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

Answer 1

你根本不需要扩展。 只需使用浮动LI和无样式的UL。 LI应该正确包装。 通常，通过将“”替换为“”来确保同一选项卡中的单词不会换行。

我的自定义选项卡控件是使用ASP.Net动态构建的，但是tabbing和hide / showfunction都是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; } 

Answer 2

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

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

– 选项卡，使用权：13可用性指南

Answer 3

有关jQuery UI问题跟踪器的错误报告中描述了此问题。 在该错误报告中，我附加了一个补丁，解决了这个问题，同时保留了非选定选项卡下面的.ui-tabs-nav边框。 干杯。

Answer 4

我不喜欢在打破第二行时标签的呈现方式，所以我写了一个插件来介绍“看到更多”标签，而不是打破第二行。

https://github.com/jasonday/plusTabs

Answer 5

我发现以下内容对多行的可排序选项卡很有用。 我遇到的一个问题是，除非指定了axis: 'x' ，否则标签没有正确点击到位，但是在行之间拖动时看起来很难看。

我设法用以下方法改进了这个：

 $('#tab-container') .sortable({ delay : 200, distance : 20, axis : 'x' }) .on('sort sortchange', function() { $('.ui-sortable-helper').css('top', $('.ui-sortable-placeholder').position().top + 'px'); }); 

Answer 6

有很多很好的答案可以用来完全解决问题，但这是我自己的¢2。

为了大大简化问题，您可以根据需要添加

---

样式以分隔选项卡行。 在我看来，这也比打开行更好看。