Sortable demos: Coding standards.

jquery · Oct 13, 2010 · bb41a25 · bb41a25
1 parent a829697
commit bb41a25
Show file tree

Hide file tree

Showing 10 changed files with 155 additions and 157 deletions.
diff --git a/demos/sortable/connect-lists-through-tabs.html b/demos/sortable/connect-lists-through-tabs.html
@@ -1,36 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Sortable - Connect lists with Tabs</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.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<style type="text/css">
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.4.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<script src="../../ui/jquery.ui.droppable.js"></script>
+	<script src="../../ui/jquery.ui.tabs.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
 	#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
 	</style>
-	<script type="text/javascript">
+	<script>
 	$(function() {
-		$("#sortable1, #sortable2").sortable().disableSelection();
+		$( "#sortable1, #sortable2" ).sortable().disableSelection();
 
-		var $tabs = $("#tabs").tabs();
+		var $tabs = $( "#tabs" ).tabs();
 
-		var $tab_items = $("ul:first li",$tabs).droppable({
+		var $tab_items = $( "ul:first li", $tabs ).droppable({
 			accept: ".connectedSortable li",
 			hoverClass: "ui-state-hover",
-			drop: function(ev, ui) {
-				var $item = $(this);
-				var $list = $($item.find('a').attr('href')).find('.connectedSortable');
+			drop: function( event, ui ) {
+				var $item = $( this );
+				var $list = $( $item.find( "a" ).attr( "href" ) )
+					.find( ".connectedSortable" );
 
-				ui.draggable.hide('slow', function() {
-					$tabs.tabs('select', $tab_items.index($item));
-					$(this).appendTo($list).show('slow');
+				ui.draggable.hide( "slow", function() {
+					$tabs.tabs( "select", $tab_items.index( $item ) );
+					$( this ).appendTo( $list ).show( "slow" );
 				});
 			}
 		});
@@ -67,12 +68,10 @@
 
 </div><!-- End demo -->
 
-<div class="demo-description">
 
-<p>
-	Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.
-</p>
 
+<div class="demo-description">
+<p>Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.</p>
 </div><!-- End demo-description -->
 
 </body>

diff --git a/demos/sortable/connect-lists.html b/demos/sortable/connect-lists.html
@@ -1,23 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Sortable - Connect lists</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.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<style type="text/css">
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.4.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
 	#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
 	#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
 	</style>
-	<script type="text/javascript">
+	<script>
 	$(function() {
-		$("#sortable1, #sortable2").sortable({
-			connectWith: '.connectedSortable'
+		$( "#sortable1, #sortable2" ).sortable({
+			connectWith: ".connectedSortable"
 		}).disableSelection();
 	});
 	</script>
@@ -43,15 +43,15 @@
 
 </div><!-- End demo -->
 
-<div class="demo-description">
 
+
+<div class="demo-description">
 <p>
 	Sort items from one list into another and vice versa, by passing a selector into
 	the <code>connectWith</code> option. The simplest way to do this is to
 	group all related lists with a CSS class, and then pass that class into the
 	sortable function (i.e., <code>connectWith: '.myclass'</code>).
 </p>
-
 </div><!-- End demo-description -->
 
 </body>

diff --git a/demos/sortable/default.html b/demos/sortable/default.html
@@ -1,24 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Sortable - Default functionality</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.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<style type="text/css">
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.4.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
 	#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
 	#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
 	#sortable li span { position: absolute; margin-left: -1.3em; }
 	</style>
-	<script type="text/javascript">
+	<script>
 	$(function() {
-		$("#sortable").sortable();
-		$("#sortable").disableSelection();
+		$( "#sortable" ).sortable();
+		$( "#sortable" ).disableSelection();
 	});
 	</script>
 </head>
@@ -37,14 +37,14 @@
 
 </div><!-- End demo -->
 
-<div class="demo-description">
 
+
+<div class="demo-description">
 <p>
 	Enable a group of DOM elements to be sortable. Click on and drag an
 	element to a new spot within the list, and the other items will adjust to
 	fit. By default, sortable items share <code>draggable</code> properties.
 </p>
-
 </div><!-- End demo-description -->
 
 </body>

diff --git a/demos/sortable/delay-start.html b/demos/sortable/delay-start.html
@@ -1,30 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Sortable - Delay start</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.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<style type="text/css">
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.4.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
 	#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; }
 	#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; }
 	</style>
-	<script type="text/javascript">
+	<script>
 	$(function() {
-		$("#sortable1").sortable({
+		$( "#sortable1" ).sortable({
 			delay: 300
 		});
 
-		$("#sortable2").sortable({
+		$( "#sortable2" ).sortable({
 			distance: 15
 		});
 
-		$("li").disableSelection();
+		$( "li" ).disableSelection();
 	});
 	</script>
 </head>
@@ -51,16 +51,16 @@ <h3 class="docs">Distance delay of 15px:</h3>
 
 </div><!-- End demo -->
 
-<div class="demo-description">
 
+
+<div class="demo-description">
 <p>
 	Prevent accidental sorting either by delay (time) or distance. Set a number of
 	milliseconds the element needs to be dragged before sorting starts
 	with the <code>delay</code> option. Set a distance in pixels the element
 	needs to be dragged before sorting starts with the <code>distance</code>
 	option.
 </p>
-
 </div><!-- End demo-description -->
 
 </body>

diff --git a/demos/sortable/display-grid.html b/demos/sortable/display-grid.html
@@ -1,23 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Sortable - Display as grid</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.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<style type="text/css">
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.4.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
 	#sortable { list-style-type: none; margin: 0; padding: 0; }
 	#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
 	</style>
-	<script type="text/javascript">
+	<script>
 	$(function() {
-		$("#sortable").sortable();
-		$("#sortable").disableSelection();
+		$( "#sortable" ).sortable();
+		$( "#sortable" ).disableSelection();
 	});
 	</script>
 </head>
@@ -41,13 +41,13 @@
 
 </div><!-- End demo -->
 
-<div class="demo-description">
 
+
+<div class="demo-description">
 <p>
 	To arrange sortable items as a grid, give them identical dimensions and
 	float them using CSS.
 </p>
-
 </div><!-- End demo-description -->
 
 </body>

diff --git a/demos/sortable/empty-lists.html b/demos/sortable/empty-lists.html
@@ -1,31 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Sortable - Handle empty lists</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.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<style type="text/css">
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.4.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
 	#sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
 	#sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
 	</style>
-	<script type="text/javascript">
+	<script>
 	$(function() {
-		$("ul.droptrue").sortable({
-			connectWith: 'ul'
+		$( "ul.droptrue" ).sortable({
+			connectWith: "ul"
 		});
 
-		$("ul.dropfalse").sortable({
-			connectWith: 'ul',
+		$( "ul.dropfalse" ).sortable({
+			connectWith: "ul",
 			dropOnEmpty: false
 		});
 
-		$("#sortable1, #sortable2, #sortable3").disableSelection();
+		$( "#sortable1, #sortable2, #sortable3" ).disableSelection();
 	});
 	</script>
 </head>
@@ -55,14 +55,14 @@
 
 </div><!-- End demo -->
 
-<div class="demo-description">
 
+
+<div class="demo-description">
 <p>
 	Prevent all items in a list from being dropped into a separate, empty list
 	using the <code>dropOnEmpty</code> option set to <code>false</code>.  By default,
 	sortable items can be dropped on empty lists.
 </p>
-
 </div><!-- End demo-description -->
 
 </body>

diff --git a/demos/sortable/index.html b/demos/sortable/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Sortable Demos</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
+	<link rel="stylesheet" href="../demos.css">
 </head>
 <body>