jQuery滚动/分页选项卡

Question

jQuery滚动/分页选项卡

13

我正在尝试创建一个简单的选项卡栏，该网站具有滚动选项卡以便显示无法适应页面的选项卡。这很简单，不需要任何ajax或动态加载的内容...它只显示所有选项卡，当您单击其中一个时，它会带您到另一个页面。

我已搜索互联网，但除了这个网址之外似乎找不到其他东西： http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html 然而，这非常复杂且过重...我正在寻找一个用jquery实现的轻量级示例。如果有人能帮忙，我将感激不尽！

- Chris Kooken

4个回答

6

我刚刚自己创建了一个插件：项目主页：http://jquery.aamirafridi.com/jst

- Aamir Afridi

嘿，你跟上了吗？看起来它不能与较新版本的JQuery和JQuery UI一起使用。大部分是这样的。 - The God Emperor

1

你能否简单地将选项卡用DIV包装，并在CSS中设置overflow-x: auto？

- lod3n

0

我经常使用JQuery UI选项卡作为选项卡的起点。您可以在网站下载区自定义JQuery UI下载。如果您已经在网站上使用JQuery，则此方法应该比任何其他实现更轻巧。

默认情况下，JQuery UI选项卡不会提供您所需的滚动效果。我认为这可以通过修改CSS来实现，但更可能更容易地通过改变站点导航（即创建更多级别，使用较短的标题）来实现。

希望这有所帮助

- wiifm

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Kooken · Accepted Answer

最终我自己写了一个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>