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

我有一个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应该正确包装.通常,通过将""替换为""来确保同一选项卡中的单词不会换行.

我的自定义选项卡控件是使用ASP.Net动态构建的,但是tabbing和hide/show功能都是jQuery.

    

        
Tab 1
        
Tab 2
        
Tab 3
     

基本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;
}

不是技术解决方案,但请记住,Nielsen强烈建议不要使用多行标签:

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

- 选项卡,使用权:13可用性指南