diff options
| -rw-r--r-- | demos/tabs/manipulation.html | 36 |
1 files changed, 13 insertions, 23 deletions
diff --git a/demos/tabs/manipulation.html b/demos/tabs/manipulation.html index 75214b41a..4b79ac714 100644 --- a/demos/tabs/manipulation.html +++ b/demos/tabs/manipulation.html @@ -22,18 +22,12 @@ </style> <script> $(function() { - var tab_title_input = $( "#tab_title"), - tab_content_input = $( "#tab_content" ), + var tabTitle = $( "#tab_title" ), + tabContent = $( "#tab_content" ), tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>", - tab_counter = 2; + tabCounter = 2; - // tabs init with a custom tab template and an "add" callback filling in the content - var tabs = $( "#tabs").tabs({ - add: function( event, ui ) { - var tab_content = tab_content_input.val() || "Tab " + tab_counter + " content."; - $( ui.panel ).append( "<p>" + tab_content + "</p>" ); - } - }); + var tabs = $( "#tabs" ).tabs(); // modal dialog init: custom buttons and a "close" callback reseting the form inside var dialog = $( "#dialog" ).dialog({ @@ -48,32 +42,29 @@ $( this ).dialog( "close" ); } }, - open: function() { - tab_title_input.focus(); - }, close: function() { form[ 0 ].reset(); } }); // addTab form: calls addTab function on submit and closes the dialog - var form = $( "form", dialog ).submit(function() { + var form = dialog.find( "form" ).submit(function( event ) { addTab(); dialog.dialog( "close" ); - return false; + event.preventDefault(); }); - // actual addTab function: adds new tab using the title input from the form above + // actual addTab function: adds new tab using the input from the form above function addTab() { - var label = tab_title_input.val() || "Tab " + tab_counter, - id = "tabs-" + tab_counter, + var label = tabTitle.val() || "Tab " + tabCounter, + id = "tabs-" + tabCounter, li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ), - tab_content = tab_content_input.val() || "Tab " + tab_counter + " content."; + tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content."; - tabs.find('ul').append( li ); - tabs.append( "<div id='" + id + "'><p>" + tab_content + "</p></div>" ); + tabs.find( ".ui-tabs-nav" ).append( li ); + tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" ); tabs.tabs( "refresh" ); - tab_counter++; + tabCounter++; } // addTab button: just opens the dialog @@ -84,7 +75,6 @@ }); // close icon: removing the tab on click - // note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924 $( "#tabs span.ui-icon-close" ).live( "click", function() { $( this ).closest( "li" ).remove(); $( "#" + $( this ).prev().attr( "aria-controls" ) ).remove(); |