javascript - 可调整大小的选项卡区域

Question

我想在页面的选项卡上设置一个可调整大小的选择器，所以我使用了 Jquery UI 可调整大小的组件。但是我在找出所选标签的数量等方面遇到了问题。

注意：可以从两端调整 div 的大小。

这是我的小提琴：http: //jsfiddle.net/svXTa/10/

是否有任何 jquery 插件可以为我提供这种功能？

Answer 1

var enw = parseInt(Math.abs(newWidth / gridSize));

编辑：

我带着新的更新回来了。请检查这个jsfiddle

var tabs = [];

$(document).ready(function(){

    $('.dateTab ul li').each(function(){
        var tabNo = parseInt($(this).html(),10);
        tabs.push({'no':tabNo, 'right':tabNo * ($(this).width() + 2)});
    });

    $('#dDragHandler').resizable({
        handles: 'e,w' ,
        grid: [32,32],
        distance: 28,
        maxWidth: 940,
        minWidth: 0,    
        resize: function(event, ui) {
                   },
        stop : function(event, ui) {

        var pos = $('.dateDragHandler').offset();
        var width  = $('.dateDragHandler').width()+1;
        var right = pos.right + width;

            var html = "Number of tabs selected: " + parseInt(width / 32, 10);


        for(var i = 0; i < tabs.length; i++) {
            if(tabs[i].right == pos.left) {
                html += "<br />First tab selected is: " + tabs[i + 1].no;
            }
            if(tabs[i].right == right) {
                html += "<br />Latest tab selected is: " + tabs[i].no;
            }
        }
        $('.dateInfoTab').html(html);

    }
    });
});