我想知道是否有可能在指定位置动态创建选项卡面板?
目前我的选项卡是通过加载一些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选项卡外观&感觉,所以不受任何容器设计的约束。
我想知道是否有可能在指定位置动态创建选项卡面板?
不容易(我看)。
如果你真的想要,你可以通过
得到类似的行为- 创建第二个无序列表
- 改变当前无序列表的样式,使其不显示,
- 绑定事件,这样单击新列表中的任何选项卡都会触发"真实"列表中的"点击"事件。
或者,您可以通过
进行"另一种方式"并获得类似的行为- 创建第二组面板
- 改变"真实"面板的样式,使它们不显示,
- 拦截"tabsselect"(和类似的事件)并触发相应的显示变化在你的新面板。
值得注意的是,jQuery UI选项卡API目前正在重新设计。有一个pre-alpha里程碑可用,他们被要求评论。当然,请求将此作为一项功能并看看他们的反应不会有什么坏处。(如果没有别的,他们可能有比上面更好的主意。)