是否有一个 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; }

我刚刚删除了 padding-bottom: .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).

推荐答案

你根本不需要扩展.只需使用带有无样式 UL 的浮动 LI.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屋！