JQuery滚动/分页选项卡

Question

我正在尝试为网站创建一个简单的标签栏,该标签栏能够滚动页面上不适合的标签.这非常简单,不需要任何ajax或动态加载的内容......它只显示所有选项卡,当您单击一个选项卡时,它会将您带到另一个页面.

我已经浏览了互联网,似乎找不到除了以下任何东西:http: //www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html 然而这是非常沉重和复杂的...我是在jquery中寻找一个轻量级的例子.如果有人可以提供帮助,我将不胜感激!

Answer 1

我最后自己写了一个div,溢出被设置为隐藏.然后使用下面的jquery移动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);
      });
    });

我的Html看起来像这样:

    <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

我自己刚刚创建了一个插件:Project home:http://jquery.aamirafridi.com/jst