jQuery选项卡 - 选择创建内容面板的位置

时间:2011-10-04 11:04:31

标签: javascript jquery tabs panels

我想知道是否可以在指定位置动态创建标签面板?

目前我的标签是通过加载一些json动态创建的。我的div结构是这样的:

<div id="tabs">
  <ul id="tablist"></ul>
</div>

然后它动态地填充结构,类似于下面......

<div id="tabs">
  <ul id="tablist">
   <li><a href="#panel1">blah1</a></li>
   <li><a href="#panel2">blah2</a></li>
   <li><a href="#panel3">blah3</a></li>
  </ul>
  <div id="panel1">Some content...</div>
  <div id="panel2">Some content...</div>
  <div id="panel3">Some content...</div>
</div>

我想告诉jQuery在我选择的父div中创建面板div,例如'#panels':

<div id="tabs">
  <ul id="tablist"></ul>
</div>
<div id="panels"></div>

这可能吗?感谢。

仅供参考我没有使用通用ui标签外观&amp;感觉,所以不受任何容器设计的限制。

1 个答案:

答案 0 :(得分:2)

  

我想知道是否可以在指定位置动态创建标签面板?

不容易(我能看到)。

如果你真的想要,可以通过

获得类似的行为
  • 创建第二个无序列表,
  • 更改当前无序列表的样式,使其不显示,
  • 绑定事件,以便点击新列表中的任何标签会触发“真实”列表中的“点击”事件。

或者,您可以采用“其他方式”并通过

获得类似的行为
  • 创建第二组面板,
  • 改变“真实”面板的样式,以便它们不会显示,
  • 拦截“tabsselect”(和类似事件)并在新面板中触发相应的显示更改。

请注意,jQuery UI标签API目前正在进行redesign。有一个pre-alpha milestone可用,他们被要求评论。将此作为一项功能请求并查看他们所说的内容肯定不会受到影响。 (如果没有别的,他们可能比上面的想法更好。)