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可用，他們被要求評論。把它當做一個功能並且看看他們說什麼肯定不會有什麼壞處。 （如果沒有別的，他們可能會有比上述更好的主意。）