Question

I’m wondering if it possible to dynamically create the tab panels in a specified location?

At the moment my tabs are dynamically created through loading some json. My div structure is like so:

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

It then populates the structure dynamically similar to below…

<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>

I would like to tell jQuery to create the panel divs in a parent div of my choice, Eg ‘#panels’:

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

Is this possible? Thanks.

FYI I’m not using the generic ui tab look & feel, so not bound by any container design.

Answer 1

I’m wondering if it possible to dynamically create the tab panels in a specified location?

Not easily (that I can see).

You could, if you really wanted, get a similar behavior by

• creating a second unordered list,
• altering the styling of your current unordered list so that it’s not displayed,
• binding events such that clicking any tab in your new list triggers a ‘click’ event on the “real” list.

Alternatively, you could go the “other way” and get similar behavior by

• creating a second set of panels,
• altering the styling of the “real” panels so that they’re not displayed,
• intercepting the “tabsselect” (and similar events) and triggering the corresponding display change in your new panels.

As a note, the jQuery UI tabs API is currently undergoing a redesign. There’s a pre-alpha milestone available and they’re requested comments. It certainly wouldn’t hurt to request this as a feature and see what they say. (If nothing else, they may have a better idea than the above.)