12

我有一个 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 并且它解决了这个问题（线索是第二行元素随着选择的变化而移动）。

4

6 回答 6

5

你根本不需要扩展。只需使用带有无样式 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;
}
于 2009-03-09T04:27:52.487 回答
5

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

只有一行标签。多行创建跳跃的 UI 元素，这会破坏空间内存，从而使用户无法记住他们已经访问过哪些选项卡。此外，当然，多行是过度复杂性的肯定症状：如果您需要的选项卡多于单行，则需要简化设计。

--标签，正确使用：13 条可用性指南

于 2009-04-01T16:48:05.230 回答
4

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

于 2009-10-17T22:39:07.900 回答
2

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

https://github.com/jasonday/plusTabs

于 2012-09-28T06:03:17.630 回答
1

我发现以下内容对于多行上的可排序选项卡很有用。我遇到的问题之一是除非指定，否则选项卡无法正确单击到位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');
    });
于 2011-11-06T16:31:57.097 回答
0

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

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

于 2015-12-31T15:17:25.133 回答