JQuery Scrolling/Paging Tabs

Question

I am trying to create a simple tab bar for a site that has the ability to scroll for tabs that do not fit on the page. This is quite simple and does not need to have any ajax or dynamically loaded content...it simply displays all the tabs, and when you click one, it takes you to another page.

I have scoured the internet and can not seem to find anything other than: http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html however this is very heavy and complicated...I am looking for a lightweight example in jquery. If anyone can help I would be grateful!

Answer 1

I ended up writing it myself with a div who's overflow is set to hidden. Then used the jquery below to move the tabs in the div.

    $(document).ready(function()
    {
      $('.scrollButtons .left').click(function()
      {
        var content = $(".tabs .scrollable .content")
        var pos = content.position().left + 250;
        if (pos >= 0)
        {
            pos = 0;
        }
        content.animate({ left: pos }, 1000);
      });
      $('.scrollButtons .right').click(function()
      {
        var content = $(".tabs .scrollable .content")
        var width = content.children('ul').width();
        var pos = content.position().left - 250;
        //var width = content.width();
        if (pos <= (width * -1) + 670)
        {
            pos = (width * -1) + 600;
        }
        content.animate({ left: pos }, 1000);
      });
    });

My Html looked like this:

    <div class="tabs">
    <div class="scrollable">
        <div class="content">
            <ul>
                <li>Tab1</li>
                <li>Tab2</li>
                <li>Tab3</li>
                <li>Tab4</li>
                <li>Tab5</li>                    
                </ul>
        </div>
    </div>
    <div class="scrollButtons">
        <ul>
            <li>
                <div class="left">
                </div>
            </li>
            <li>
                <div class="right">
                </div>
            </li>
        </ul>
    </div>
</div>

Answer 2

I have just created a plugin myself: Project home: http://jquery.aamirafridi.com/jst

Answer 3

Could you simply wrap the tabs in a DIV with overflow-x: auto set in the CSS?