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

Question

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

Answer 1

你根本不需要扩展。只需将 float 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;
}