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++; }
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); })); }); }