是否有一个 Jquery 选项卡控件可以很好地处理多行选项卡？答案

【问题标题】：Is there a Jquery tab control which handles multiple lines of tabs well?是否有一个 Jquery 选项卡控件可以很好地处理多行选项卡？
【发布时间】：2010-10-12 02:10:39
【问题描述】：

我有一个 Web 应用程序，其中包含 2 到 20 个动态选项卡。

我目前正在使用 Jquery UI 的选项卡插件，但发现它的行为不如理想（即大约 12 个选项卡，当它换行时，第二行选项卡会随着选项卡选择移动，有时会跳过 3 行而不是两个。

这是一个双重问题，首先有没有人知道如何在选择更改时阻止第二行选项卡跳来跳去。

另外，有没有人知道 jQuery 的一个选项卡插件，它可以很好地处理多行选项卡（如果我找不到解决方案，我可能最终会使用 ExtJS 或类似的东西，但试图让这个应用程序保持相当轻量级)。

回答

经过进一步调查，事实证明这是由我使用的 Jquery UI 主题引起的，这是有问题的样式：

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {  padding-bottom: .1em; border-bottom: 0; }

我刚刚删除了 padding-bottom: .1em 并解决了问题（线索是第二行元素随着选择的变化而移动）。

【问题讨论】：

啊，一定要爱上对圣杯的追求！

标签： jquery user-interface tabs widget

【解决方案1】：

您根本不需要扩展程序。只需使用带有无样式 UL 的浮动 LI。 LI 应该正确包装。通常，通过将“”替换为“ ”来确保同一标签中的单词不会换行是一个好主意。

我的自定义选项卡控件是使用 ASP.Net 动态构建的，但选项卡和隐藏/显示功能都是 jQuery。

<div id="tabWrapper">
    <ul id="tabContainer">
        <li>Tab&nbsp;1</li>
        <li>Tab&nbsp;2</li>
        <li>Tab&nbsp;3</li>
     </ul>
</div>

基本 CSS

#tabWrapper
{
    border-bottom: solid 1px #676767;
}

#tabContainer 
{
    padding:0;
margin:0;
    position:relative;
    z-index: 1;
    float:left;
    list-style:none;
}

#tabContainer li 
{
    float:left;
    margin:0;
    cursor: pointer;
    background: f1f1f1;
    border-top: solid 1px #676767;
    border-left: solid 1px #676767;
    border-right: solid 1px #ababab;
    margin-bottom: -1px;
}

#tabContainer .selected, #tabContainer .selected:hover
{
    background: #fff;
}

【讨论】：

感谢您为我指出正确的方向:) 正如您所说，它应该“正常工作”并且 jquery 选项卡控件建立在相同的原则上，所以我进一步研究并发现这是由我应用的 UI 主题引起的。

【解决方案2】：

不是技术解决方案，但请记住，Nielsen 强烈建议不要使用多行选项卡：

只有一行标签。多种的行创建跳跃的 UI 元素，其中破坏空间记忆，从而使用户无法记住他们已经访问过哪些标签。此外，当然，多行是过度复杂的肯定症状：如果您需要的标签多于不适合的标签单行，你需要简化你的设计。

-- Tabs, Used Right: The 13 Usability Guidelines

【讨论】：

我绝对同意——在这种情况下，我几乎无法控制标签的数量（我们构建了一个通用系统，然后客户端添加了二十多个标签）——在大多数情况下，每个用户也是如此一年只会使用一次或两次。

【解决方案3】：

这个问题是 jQuery UI 问题跟踪器上的described in a bug report。在那个错误报告中，我附上了一个补丁来解决这个问题，同时保留非选定标签下方的 .ui-tabs-nav 边框。干杯。

【讨论】：

【解决方案4】：

我不喜欢切换到第二行时的选项卡呈现方式，因此我编写了一个插件来引入“查看更多”选项卡而不是切换到第二行。

https://github.com/jasonday/plusTabs

【讨论】：

【解决方案5】：

我发现以下内容对于多行上的可排序选项卡很有用。我遇到的一个问题是，除非指定了 axis: 'x'，否则选项卡无法正确点击到位，但在行间拖动时看起来很难看。

我设法通过以下方式改进了这一点：

$('#tab-container')
    .sortable({
        delay       : 200,
        distance    : 20,
        axis        : 'x'
    })
    .on('sort sortchange', function() {
        $('.ui-sortable-helper').css('top', $('.ui-sortable-placeholder').position().top + 'px');
    });

【讨论】：

【解决方案6】：

有很多很好的答案可以用来完全解决问题，但这是我自己的 ¢2。

为了大大简化问题，您可以添加一个 <hr> 来分隔标签行。在我看来，这看起来也比开放行更好。

【讨论】：