Tabs: update manipulation demo to use the refresh method

jquery · May 11, 2011 · a02e393 · a02e393
1 parent 9bd731d
commit a02e393
Showing 1 changed file with 23 additions and 16 deletions.
diff --git a/demos/tabs/manipulation.html b/demos/tabs/manipulation.html
@@ -22,21 +22,21 @@
 	</style>
 	<script>
 	$(function() {
-		var $tab_title_input = $( "#tab_title"),
-			$tab_content_input = $( "#tab_content" );
-		var tab_counter = 2;
+		var tab_title_input = $( "#tab_title"),
+			tab_content_input = $( "#tab_content" ),
+			tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
+			tab_counter = 2;
 
 		// tabs init with a custom tab template and an "add" callback filling in the content
-		var $tabs = $( "#tabs").tabs({
-			tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
+		var tabs = $( "#tabs").tabs({
 			add: function( event, ui ) {
-				var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
+				var tab_content = tab_content_input.val() || "Tab " + tab_counter + " content.";
 				$( ui.panel ).append( "<p>" + tab_content + "</p>" );
 			}
 		});
 
 		// modal dialog init: custom buttons and a "close" callback reseting the form inside
-		var $dialog = $( "#dialog" ).dialog({
+		var dialog = $( "#dialog" ).dialog({
 			autoOpen: false,
 			modal: true,
 			buttons: {
@@ -49,39 +49,46 @@
 				}
 			},
 			open: function() {
-				$tab_title_input.focus();
+				tab_title_input.focus();
 			},
 			close: function() {
-				$form[ 0 ].reset();
+				form[ 0 ].reset();
 			}
 		});
 
 		// addTab form: calls addTab function on submit and closes the dialog
-		var $form = $( "form", $dialog ).submit(function() {
+		var form = $( "form", dialog ).submit(function() {
 			addTab();
-			$dialog.dialog( "close" );
+			dialog.dialog( "close" );
 			return false;
 		});
 
 		// actual addTab function: adds new tab using the title input from the form above
 		function addTab() {
-			var tab_title = $tab_title_input.val() || "Tab " + tab_counter;
-			$tabs.tabs( "add", "#tabs-" + tab_counter, tab_title );
+			var label = tab_title_input.val() || "Tab " + tab_counter,
+				id = "tabs-" + tab_counter,
+				li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
+				tab_content = tab_content_input.val() || "Tab " + tab_counter + " content.";
+
+			tabs.find('ul').append( li );
+			tabs.append( "<div id='" + id + "'><p>" + tab_content + "</p></div>" );
+			tabs.tabs( "refresh" );
 			tab_counter++;
 		}
 
 		// addTab button: just opens the dialog
 		$( "#add_tab" )
 			.button()
 			.click(function() {
-				$dialog.dialog( "open" );
+				dialog.dialog( "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
 		$( "#tabs span.ui-icon-close" ).live( "click", function() {
-			var index = $( "li", $tabs ).index( $( this ).parent() );
-			$tabs.tabs( "remove", index );
+			$( this ).closest( "li" ).remove();
+			$( "#" + $( this ).prev().attr( "aria-controls" ) ).remove();
+			tabs.tabs( "refresh" );
 		});
 	});
 	</script>