我有一个Web应用程序,动态数量的标签范围介于2到20之间.
我目前正在使用Jquery UI的标签插件,但发现它的行为不及Ideal(即大约12个选项卡,当它包装时,第二行标签随选项卡选项移动,有时跳过3行而不是两行.
这是一个双重的问题,首先有人有任何想法,当选择发生变化时,如何可以阻止第二排标签跳转.
或者也有人知道一个jQuery的选项卡插件,它处理多行标签页(如果我找不到一个分辨率,我可能最终使用ExtJS或类似的东西,但试图保持这个应用程序相当轻).
回答
经过进一步的调查,事实证明,这是由我正在使用的Jquery UI主题引起的,这是有问题的风格：
- .ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: .1em; border-bottom: 0; }
解决方法
你根本不需要扩展.只需使用浮动LI的无级UL.李的应该正确包装通常一个好主意,以确保在同一个选项卡中的单词不用“”替换为“”替换.
我的自定义选项卡控件是用ASP.Net动态构建的,但是tab和hide / show功能都是jQuery.
- <div id="tabWrapper">
- <ul id="tabContainer">
- <li>Tab 1</li>
- <li>Tab 2</li>
- <li>Tab 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;
- }
