Microsoft styled tabs

Question

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

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 each tab and determine at which point a second line of tabs would be started?

Thanks

If you're happy to use Javascript, then the solution I gave you in that previous question isn't really very good. — thirtydot, Feb 23 '11 at 14:01
Perhaps something like [Ext JS](http://dev.sencha.com/deploy/dev/examples/#sample-5) would suit you better. See: [http://dev.sencha.com/deploy/dev/examples/tabs/tabs-adv.html](http://dev.sencha.com/deploy/dev/examples/tabs/tabs-adv.html) — thirtydot, Feb 23 '11 at 14:04
@thirtydot. The example was useful. This is a new requirement over that. I want to use Javascript to move the location of selected tab to the second line, if the selected tab is on the first line. I hope what I am asking here sounds sensible. — DG3, Feb 23 '11 at 14:04
Please don't use that God-awful UI pattern. It is confusing. — JimDaniel, Feb 23 '11 at 18:03

Luca Filosofi · Accepted Answer · 2011-02-23T19:36:18.377

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

score 0 · Answer 2 · answered Feb 23 '11 at 14:07

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.

Microsoft styled tabs

2 Answers2