From 7ce4ddbcac5c908c78ac6956b6c8799b5f927c4d Mon Sep 17 00:00:00 2001
From: Scott González <scott.gonzalez@gmail.com>
Date: Wed, 13 Oct 2010 15:43:49 -0400
Subject: Tabs demos: Coding standards.

---
 demos/tabs/manipulation.html | 83 +++++++++++++++++++++++---------------------
 1 file changed, 43 insertions(+), 40 deletions(-)

(limited to 'demos/tabs/manipulation.html')
diff --git a/demos/tabs/manipulation.html b/demos/tabs/manipulation.html
index 693eaada8..3e06d328a 100644
--- a/demos/tabs/manipulation.html
+++ b/demos/tabs/manipulation.html
@@ -1,86 +1,87 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Tabs - Simple manipulation</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<style type="text/css">
-		#dialog label, #dialog input { display:block; }
-		#dialog label { margin-top: 0.5em; }
-		#dialog input, #dialog textarea { width: 95%; }
-		#tabs { margin-top: 1em; }
-		#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
-		#add_tab { cursor: pointer; }
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.4.2.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.tabs.js"></script>
+	<script src="../../ui/jquery.ui.dialog.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#dialog label, #dialog input { display:block; }
+	#dialog label { margin-top: 0.5em; }
+	#dialog input, #dialog textarea { width: 95%; }
+	#tabs { margin-top: 1em; }
+	#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
+	#add_tab { cursor: pointer; }
 	</style>
-	<script type="text/javascript">
+	<script>
 	$(function() {
-		var $tab_title_input = $('#tab_title'), $tab_content_input = $('#tab_content');
+		var $tab_title_input = $( "#tab_title"),
+			$tab_content_input = $( "#tab_content" );
 		var 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>',
-			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({
+			tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
+			add: function( event, ui ) {
+				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: {
-				'Add': function() {
+				Add: function() {
 					addTab();
-					$(this).dialog('close');
+					$( this ).dialog( "close" );
 				},
-				'Cancel': function() {
-					$(this).dialog('close');
+				Cancel: function() {
+					$( this ).dialog( "close" );
 				}
 			},
 			open: function() {
 				$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 tab_title = $tab_title_input.val() || "Tab " + tab_counter;
+			$tabs.tabs( "add", "#tabs-" + tab_counter, tab_title );
 			tab_counter++;
 		}
 
 		// addTab button: just opens the dialog
-		$('#add_tab')
+		$( "#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);
+		$( "#tabs span.ui-icon-close" ).live( "click", function() {
+			var index = $( "li", $tabs ).index( $( this ).parent() );
+			$tabs.tabs( "remove", index );
 		});
 	});
 	</script>
@@ -113,8 +114,10 @@
 
 </div><!-- End demo -->
 
+
+
 <div class="demo-description">
-	<p>Simple tabs adding and removing.</p>
+<p>Simple tabs adding and removing.</p>
 </div><!-- End demo-description -->
 
 </body>
-- 
cgit v1.2.3

