You could use the add callback to push the panel whereever you want it
to:
$(...).tabs({
add: function(event, ui) {
$(ui.panel).appendTo('.custom-pager-inner');
}
});
--Klaus
On 19 Mai, 07:59, ppblaauw <[email protected]> wrote:
> 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
-~----------~----~----~----~------~----~------~--~---
