So far I have an accordion like widget that functions almost the same
but is sortable and allows for more than one draw to be open at once.
Its currently displayed on tab one of a multi tab interface, standard
tabs, sortable too.
I am wanting to allow users to drag draws from the front tab to an
area in one of the others, so each user can rearrange the front page
to display only whats needed.
Anyone care to help me out?
Heres the Jquery for the interface:
$(function() {$("#tabs").tabs().find(".ui-tabs-nav").sortable
({axis:'x'});});
$(function() {
$("#accordion1").addClass("ui-accordion ui-widget ui-helper-reset")
.find("h3")
.addClass("ui-accordion-header ui-helper-reset ui-state-default
ui-
corner-top ui-corner-bottom")
.prepend('<span class="ui-icon ui-icon-triangle-1-e"/>')
.hover(function() {
$(this).addClass("ui-state-hover");
},
function() {
$(this).removeClass("ui-state-hover");
})
.click(function() {
$(this).toggleClass("ui-accordion-header-active").toggleClass("ui-
state-active")
.toggleClass("ui-state-default").toggleClass("ui-corner-bottom")
.find(">
.ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass
("ui-icon-triangle-1-s")
.end().next().toggleClass("ui-accordion-content-active").toggle();
return false;
})
.next().addClass("ui-accordion-content ui-helper-reset
ui-widget-
content ui-corner-bottom").hide();
$("#accordion1").sortable();
})
And the HTML:
<div id="tabs">
<ul>
<li><a href="#tabs-1"><div class="ui-icon
ui-icon-zoomin"></div></
a></li>
<li><a href="#tabs-2"><div class="ui-icon
ui-icon-script"></div></
a></li>
<li><a href="#tabs-3"><div class="ui-icon
ui-icon-wrench"></div></
a></li>
<li><a href="#tabs-4"><div class="ui-icon
ui-icon-scissors"></div></
a></li>
<li style="float:right;"><a href="#tabs-6"><div
class="ui-icon ui-
icon-help"></div></a></li>
</ul>
<div id="tabs-1">
<div id="accordion1">
<div><h3><a href="#">draw 1 title</a></h3>
<div>
Contents Draw 1
</div>
</div>
<div><h3><a href="#">draw 2 title</a></h3>
<div>
Contents Draw 2
</div>
</div>
<div><h3><a href="#">draw 3 title</a></h3>
<div>
Contents Draw 3
</div>
</div>
</div> // ends accordion
</div> //ends tab
<div id="tabs-2">
etc etc.
Thank you in advance.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
