javascript - 微软风格的标签

Question

最近我在 stackoverflow 上问了一个关于多行选项卡的问题。下面是链接

multi-line tabs

我只是想知道是否有可能使它们像 Windows 样式的选项卡一样，也就是说，如果选择了第一行中的选项卡，我想将其推到第二行。我遇到的问题是我正在创建动态选项卡。是否可以使用 Javascript/jquery 来计算每个选项卡的宽度并确定第二行选项卡的起始点？

谢谢

Answer 1

已更新 添加了选项卡自动调整大小。

在 Chrome/FF 上测试

• DEMO & SOURCE: http://ask.altervista.org/demo/microsoft-styled-tabs/

    $(function() {
        setLines();
        $('#windows-properties li a').click(function(e) {
        e.preventDefault();   
        var $li = $(this).parent(); 
            $(this.hash).show().siblings('.property-content').hide();
            var liTp =  parseInt($li.position().top);
            if (liTp < lastLiPos) {
                $('li.line-' + liTp).wrapAll('<div id="move-lis"></div>');
                $('#move-lis').insertAfter('#windows-properties li:last');
                $('li.line-' + liTp).unwrap();
                setLines();
            }
            $li.addClass('selected').siblings('li').removeClass('selected');
        });
        var $lstLi = $('#windows-properties li:last');
        var lastLiPos =  parseInt($lstLi.addClass('selected').position().top);
        $('.property-content:last').show();
    });
//.... other part of code in the demo source ...