是否有一个可以很好地处理多行选项卡的Jquery选项卡控件? [英] Is there a Jquery tab control which handles multiple lines of tabs well?

问题描述

我有一个Web应用程序，其中标签的动态数量在2到20之间.

I have an web application with a dynamic number of tabs ranging between 2 to 20.

我当前正在使用Jquery UI的选项卡插件，但发现它的行为不如理想(即大约12个选项卡，当它环绕时，选项卡的第二行随着选项卡的选择而移动，有时会跳过3行而不是两个.

I'm currently using Jquery UI's tab plugin, but finding that it's behaviour is less then Ideal (i.e. around 12 tabs, when it wraps, the second line of tabs move with the tab selection and sometimes jump across 3 lines instead of two.

这是一个两个问题，首先是没有人知道如何在选择更改时阻止第二行选项卡跳动.

This is a two-fold question, first off does anyone have any idea how I could stop the second row of tabs jumping around when the selection changes.

或者，有人知道jQuery的选项卡插件可以很好地处理多行选项卡吗(如果我找不到分辨率，我可能最终会使用ExtJS或类似的东西，但是试图保持此应用程序的重量很轻).

Alternatively does anyone know of a tab plugin for jQuery that handles multiple lines of tabs well (if I can't find a resolution I might end up using ExtJS or something similar, but was trying to keep this application fairly light-weight).

答案

进一步调查后发现，这是由我使用的Jquery UI主题引起的，这是有问题的样式:

After further investigation it turns out this was being caused by the Jquery UI theme I was using, this was the problematic style:

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

我刚刚删除了填充底部:.1em，它解决了这个问题(线索是第二行元素随着选择的变化而移动).

I just removed the padding-bottom: .1em and it resolve the issue (the clue was that the second row of elements were moving along with the selection changing).

推荐答案

您根本不需要扩展名.只需将浮动LI与未样式化的UL配合使用即可. LI应该正确包装.通常，最好通过将"替换为 "来确保同一标签中的单词不会自动换行.

you don't really need an extension at all. Just use floating LI's with an unstyled UL. The LI's should wrap properly. Usually a good idea to ensure words in the same tab do not wrap by replacing " " with " ".

我的自定义标签控件是使用ASP.Net动态构建的，但是标签和隐藏/显示功能都是jQuery.

My custom tab control is built dynamically with ASP.Net, but the tabbing and the hide/show functionality is all 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;
}

这篇关于是否有一个可以很好地处理多行选项卡的Jquery选项卡控件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！