jQuery UI 1.7.1
My initial structure for tabs functionality with the ui-tabs plugin
is:
<div id="ddblock-tabs-1" class="ddblock-tabs ui-tabs">
<ul id="ddblock-nav-tabs-1" class="anchors">
<li><a href="#ddblock-tabs-1-t0" class="ddblock-tab">Tab 1</a></li>
</ul>
<div id="ddblock-custom-pager-1" class="custom-pager ddblock-pager
custom-pager-bottom clear-block border">
<div class="custom-pager-inner clear-block border">
<div id="ddblock-tabs-1-t0" class="tabcontent ui-tabs-hide">
<div class="custom-pager-item custom-pager-item-1">
</div>
<div class="custom-pager-item custom-pager-item-2">
</div>
<div class="custom-pager-item custom-pager-item-3">
</div>
</div>
<div>
<div>
<div>
When I add a tab, the panel of the tab appears after the div following
the ul of the tabs
because the add functionality uses $panel.appendTo(this.list
[0].parentNode);
<div id="ddblock-tabs-1" class="ddblock-tabs ui-tabs">
<ul id="ddblock-nav-tabs-1" class="anchors">
<li><a href="#ddblock-tabs-1-t0" class="ddblock-tab">Tab 1</a></li>
<li><a href="#ddblock-tabs-1-t1" class="ddblock-tab">Tab 2</a></li>
</ul>
<div id="ddblock-custom-pager-1" class="custom-pager ddblock-pager
custom-pager-bottom clear-block border">
<div class="custom-pager-inner clear-block border">
<div id="ddblock-tabs-1-t0" class="tabcontent ui-tabs-hide">
<div class="custom-pager-item custom-pager-item-1">
</div>
<div class="custom-pager-item custom-pager-item-2">
</div>
<div class="custom-pager-item custom-pager-item-3">
</div>
</div>
<div>
<div>
<div id="ddblock-tabs-1-t1" class="tabcontent ui-tabs-hide">
<div class="custom-pager-item custom-pager-item-4">
</div>
<div class="custom-pager-item custom-pager-item-5">
</div>
<div class="custom-pager-item custom-pager-item-6">
</div>
</div>
<div>
<div>
I want the panel of the tab in the custom-pager-inner class like
below:
<div id="ddblock-tabs-1" class="ddblock-tabs ui-tabs">
<ul id="ddblock-nav-tabs-1" class="anchors">
<li><a href="#ddblock-tabs-1-t0" class="ddblock-tab">Tab 1</a></li>
<li><a href="#ddblock-tabs-1-t1" class="ddblock-tab">Tab 2</a></li>
</ul>
<div id="ddblock-custom-pager-1" class="custom-pager ddblock-pager
custom-pager-bottom clear-block border">
<div class="custom-pager-inner clear-block border">
<div id="ddblock-tabs-1-t0" class="tabcontent ui-tabs-hide">
<div class="custom-pager-item custom-pager-item-1">
</div>
<div class="custom-pager-item custom-pager-item-2">
</div>
<div class="custom-pager-item custom-pager-item-3">
</div>
</div>
<div>
<div id="ddblock-tabs-1-t1" class="tabcontent ui-tabs-hide">
<div class="custom-pager-item custom-pager-item-4">
</div>
<div class="custom-pager-item custom-pager-item-5">
</div>
<div class="custom-pager-item custom-pager-item-6">
</div>
</div>
<div>
<div>
<div>
How to tell addtab to place the tabs panel in a different DIV as the
parent of the ul
I can hack the ui.tabs plugin and use
$panel.appendTo($(this.list[0].parentNode).find('.custom-pager-
inner'));
then it works
I am new to the ui.tabs plugin. Tried to find answers in the
documentation and in the jQuery UI group but without success.
Is there an elegant way to add the tabs panel to a different div?
Thanks in advance
Philip Blaauw
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
