Question

我有一个Web应用程序，其动态数量的选项卡介于2到20之间。

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

这是一个双重问题，首先，有人知道如何在选择更改时停止第二行标签跳转。

或者，任何人都知道jQuery的标签插件可以很好地处理多行标签（如果我找不到解决方案，我可能会最终使用ExtJS或类似的东西，但试图保持这个应用程序相当轻量级）。

答案

经过进一步调查后发现这是由我使用的Jquery UI主题引起的，这是有问题的风格：

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

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

Answer 1

你根本不需要扩展。只需使用浮动LI和无样式的UL。 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;
}

Answer 2

不是技术解决方案，但请注意Nielsen强烈建议不要使用多行标签：

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

- Tabs, Used Right: The 13 Usability Guidelines

Answer 3

这个问题在jQuery UI问题跟踪器上是described in a bug report。在该错误报告中，我附加了一个补丁，它解决了这个问题，而保留 .u-tabs-nav边框位于非选定选项卡下方。欢呼声。

Answer 4

我不喜欢在打破第二行时标签的呈现方式，所以我写了一个插件来介绍“看到更多”标签，而不是打破第二行。

https://github.com/jasonday/plusTabs

Answer 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');
    });

Answer 6

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

为了大大简化问题，您可以根据需要添加<hr>样式，以分隔选项卡行。在我看来，这看起来也比打开行更好。

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

6 个答案: