如何使用jQueryUI创建子选项卡?

时间:2012-02-15 04:45:27

标签: jquery jquery-ui user-interface tabs

我们在垂直向下的标签应用中有一个接口标准。 95%的时间这是我们所需要的,一切都很好。

| Tab          | Content
| Selected Tab
| Tab          |

我们现在拥有的是一个需要分为子部分的标签。我们真的不希望交换到顶部的水平标签用于子内容部分。如果其中一个侧面标签可以展开以显示可选择的子标签,那将是理想的。

| Tab          | Content of Selected Tab Child 2
| Selected Tab |
 |   Child 1   |
 |   Child 2
 |   Child 3   |
| Tab          |

是否有jQueryUI的插件已经做过这样的事情?还是我们从头开始?

1 个答案:

答案 0 :(得分:1)

jquery-vert-tabs支持嵌套标签,但AFAIK不是你想要的干净方式......

screenshot of jquery-vert-tabs example of nested tabs

您目前使用的垂直标签有哪些? jQuery UI不支持它,所以我假设您要么使用其他插件,要么使用自定义解决方案。

如果找不到更好的方法,我建议创建一个包含“常规”标签和“子”标签的菜单,后者带有一些缩进(使用padding-left或添加一些{{1}在它之前)并默认隐藏。当您单击常规选项卡时,将隐藏所有子选项卡,除了将显示的单击选项卡的子选项卡。根据您当前使用的内容,这不应该太难实现......