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

StackOverflow https://stackoverflow.com/questions/624516

题

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

有帮助吗？

解决方案

你根本不需要扩展。只需使用浮动LI和无样式的UL。 LI应该正确包装。通常一个好主意是确保同一个标签中的单词不会通过替换<！>来换行; <！> QUOT;使用<！>“<！> nbsp; <！>”;

我的自定义标签控件是使用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;
}

其他提示

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

  

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

- 标签，使用权：13可用性指南

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

我不喜欢在打破第二行时标签的呈现方式，所以我写了一个插件来介绍<！>引用;查看更多<！>选项卡而不是分成第二行。

https://github.com/jasonday/plusTabs

我发现以下内容对多行的可排序标签很有用。我遇到的一个问题是标签没有正确点击到位，除非指定了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');
    });

有许多很好的答案可以用来完全解决问题，但这是我自己的<！>＃162; 2.

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top