1

我想知道是否可以在指定位置动态创建选项卡面板？

目前我的标签是通过加载一些 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 选项卡外观，因此不受任何容器设计的约束。

4

1 回答 1

2

我想知道是否可以在指定位置动态创建选项卡面板？

不容易（我可以看到）。

如果你真的想要，你可以通过以下方式获得类似的行为

  • 创建第二个无序列表，
  • 更改当前无序列表的样式，使其不显示，
  • 绑定事件，以便单击新列表中的任何选项卡会触发“真实”列表上的“单击”事件。

或者，您可以采用“其他方式”并通过以下方式获得类似的行为

  • 创建第二组面板，
  • 改变“真实”面板的样式，使其不显示，
  • 拦截“tabsselect”（和类似事件）并在新面板中触发相应的显示更改。

需要注意的是，jQuery UI 选项卡 API 目前正在进行重新设计。有一个可用的 pre-alpha里程碑，请他们发表评论。将其作为一项功能请求并看看他们说什么当然不会有什么坏处。（如果不出意外，他们可能有比上述更好的主意。）

于 2011-10-04T11:42:37.077 回答