Microsoft styled tabs

Recently I asked a question on stackoverflow about multiline tabs. Below is the link

multi-line tabs

I was just wondering if its possible to make them like windows styled tabs, that is if a tab in first line is selected, I want to push it to the second line. The problem I have is I am creating dynamic tabs. Is it possible using Javascript/jquery, to calculate the widths of e开发者_如何转开发ach tab and determine at which point a second line of tabs would be started?

Thanks

UPDATED added Tab Auto-Resize.

Tested on 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 ...

I don't know how windows does it, but i don't think this will be possible with dynamic tabs. Instead you can create two lists instead of one. Or better still you can use script to make two lists from one, so that both the lists span the entire line width & you don't have to hard code anything.