static ConnectListsTabs()
{
jQuery.OnDocumentReady(delegate()
{
jQuery.Select("#sortable41, #sortable42")
.Plugin <SortableObject>()
.Sortable();
TabsObject tabs = jQuery.Select("#tabs")
.Plugin <TabsObject>()
.Tabs();
DroppableObject tabItems
= jQuery.Select("ul:first li", tabs)
.Plugin <DroppableObject>()
.Droppable(new DroppableOptions(
DroppableOption.Accept, ".connectedSortable2 li",
DroppableOption.HoverClass, "ui-state-hover",
DroppableEvents.Drop, new jQueryUIEventHandler <DropEvent>(delegate(jQueryEvent e, DropEvent dropEvent) {
jQueryObject list = jQuery.Select(jQuery.This.Find("a").GetAttribute("href"))
.Find(".connectedSortable2");
((jQueryObject)dropEvent.Draggable).Hide(EffectDuration.Slow, delegate() {
tabs.Tabs(new TabsOptions(TabsOption.Active, jQuery.This.Index(jQuery.This.Selector)));
jQuery.This.AppendTo(list).Show(EffectDuration.Slow);
});
})));
});
}
// actual addTab function: adds new tab using the title input from the form above
static void addTab(TabsObject tabs)
{
string tab_title = tab_title_input.GetValue() ?? ("Tab " + tab_counter);
tabs.Tabs(TabsMethod.Add, "#tabs-" + tab_counter, tab_title);
tab_counter++;
}
// actual addTab function: adds new tab using the title input from the form above
static void addTab(TabsObject tabs)
{
string tab_title = tab_title_input.GetValue() ?? ("Tab " + tab_counter);
tabs.Tabs(TabsMethod.Add, "#tabs-" + tab_counter, tab_title);
tab_counter++;
}
static Manipulation()
{
jQuery.OnDocumentReady(delegate() {
// tabs init with a custom tab template and an "add" callback filling in the content
TabsObject tabs
= jQuery.Select("#tabs6")
.Plugin <TabsObject>()
.Tabs(new TabsOptions(
"tabTemplate", "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
"add", new jQueryUIEventHandler <TabsAddEvent>(
delegate(jQueryEvent @event, TabsAddEvent ui) {
string tab_content = tab_content_input.GetValue() ?? ("Tab " + tab_counter + " content.");
jQuery.Select(ui.Panel).Append("<p>" + tab_content + "</p>");
})));
// modal dialog init: custom buttons and a "close" callback reseting the form inside
DialogObject dialog
= jQuery.Select("#dialog11")
.Plugin <DialogObject>()
.Dialog(new DialogOptions(
DialogOption.AutoOpen, false,
DialogOption.Modal, true,
DialogOption.Buttons,
new DialogOptions(
"Add", new Action(delegate() {
addTab(tabs);
jQuery.This.Plugin <DialogObject>().Dialog(DialogMethod.Close);
}),
"Cancel", new Action(delegate() {
jQuery.This.Plugin <DialogObject>().Dialog(DialogMethod.Open);
})),
DialogMethod.Open, new Action(delegate() {
tab_title_input.Focus();
}),
DialogMethod.Close, new Action(delegate() {
// addTab form: calls addTab function on submit and closes the dialog
jQuery.Select("form", jQuery.This)
.Submit(new jQueryEventHandler(delegate(jQueryEvent e) {
addTab(tabs);
jQuery.This.Plugin <DialogObject>().Dialog(DialogMethod.Close);
e.PreventDefault();
e.StopPropagation();
}));
})));
// addTab button: just opens the dialog
jQuery.Select("#add_tab")
.Plugin <ButtonObject>()
.Button()
.Click(new jQueryEventHandler(delegate(jQueryEvent e) {
dialog.Dialog(DialogMethod.Open);
}));
// close icon: removing the tab on click
// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
jQuery.Select("#tabs6 span.ui-icon-close")
.Live("click", new jQueryEventHandler(delegate(jQueryEvent e) {
int index = jQuery.Select("li", tabs).Index(jQuery.This.Parent()[0]);
tabs.Tabs(TabsMethod.Remove, index);
}));
});
}