jQuery选项卡 - 选择内容面板创建的地方

Question

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

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

Answer 1

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

不容易（我可以看到）。

你可以，如果你真的想要，获得由

• 创建第二个无序列表，
• 改变你目前的无序列表的样式相似的行为，以便它不显示，
• 结合事件，以便点击新列表中的任何选项卡会在“真实”列表中触发“点击”事件。

或者，你可以去“其他方式”，并

• 创建第二组板，
• 得到类似的行为改变了“真正的”面板的造型，让他们”不显示，
• 拦截“选项卡选择”（和类似的事件），并在新面板中触发相应的显示更改。

作为一个说明，jQuery的UI选项卡API目前正在进行redesign。有一个pre-alpha milestone可用，他们被要求评论。把它当做一个功能并且看看他们说什么肯定不会有什么坏处。 （如果没有别的，他们可能会有比上述更好的主意。）