Droppable demos: Coding standards.

author: Scott González <scott.gonzalez@gmail.com> 2010-09-10 09:38:42 -0400
committer: Scott González <scott.gonzalez@gmail.com> 2010-09-10 09:38:42 -0400
commit: a1fc59c17e40b89c28920681cd6dd32ed68a4102 (patch)
tree: 3c1ddd977d1524775f48eef1b361d085b04bf7eb /demos
parent: 6cf45dd25a98f98c91a4000345fc5597f9929939 (diff)
download: jquery-ui-a1fc59c17e40b89c28920681cd6dd32ed68a4102.tar.gz
jquery-ui-a1fc59c17e40b89c28920681cd6dd32ed68a4102.zip
8 files changed, 330 insertions, 294 deletions
diff --git a/demos/droppable/accepted-elements.html b/demos/droppable/accepted-elements.html
index 0ba0207e3..455e075e0 100644
--- a/demos/droppable/accepted-elements.html
+++ b/demos/droppable/accepted-elements.html
@@ -1,38 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
-	<title>jQuery UI Droppable - Accept Demo</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.draggable.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<style type="text/css">
+	<meta charset="utf-8">
+	<title>jQuery UI Droppable - Accept</title>
+	<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.draggable.js"></script>
+	<script src="../../ui/jquery.ui.droppable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
 	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
 	#draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
 	</style>
-	<script type="text/javascript">
+	<script>
 	$(function() {
-
-		$("#draggable, #draggable-nonvalid").draggable();
-
-		$("#droppable").droppable({
-			accept: '#draggable',
-			activeClass: 'ui-state-hover',
-			hoverClass: 'ui-state-active',
-			drop: function(event, ui) {
-				$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+		$( "#draggable, #draggable-nonvalid" ).draggable();
+		$( "#droppable" ).droppable({
+			accept: "#draggable",
+			activeClass: "ui-state-hover",
+			hoverClass: "ui-state-active",
+			drop: function( event, ui ) {
+				$( this )
+					.addClass( "ui-state-highlight" )
+					.find( "p" )
+						.html( "Dropped!" );
 			}
 		});
-
 	});
 	</script>
 </head>
 <body>
+
 <div class="demo">
 	
 <div id="draggable-nonvalid" class="ui-widget-content">
@@ -49,10 +50,11 @@
 
 </div><!-- End demo -->
 
-<div class="demo-description">
 
-<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p>
 
+<div class="demo-description">
+<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p>
 </div><!-- End demo-description -->
+
 </body>
 </html>
diff --git a/demos/droppable/default.html b/demos/droppable/default.html
index 4134dc942..19748a560 100644
--- a/demos/droppable/default.html
+++ b/demos/droppable/default.html
@@ -1,33 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
-	<title>jQuery UI Droppable - Default Demo</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.draggable.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<style type="text/css">
+	<meta charset="utf-8">
+	<title>jQuery UI Droppable - Default functionality</title>
+	<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.draggable.js"></script>
+	<script src="../../ui/jquery.ui.droppable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
 	#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
 	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
 	</style>
-	<script type="text/javascript">
+	<script>
 	$(function() {
-		$("#draggable").draggable();
-		$("#droppable").droppable({
-			drop: function(event, ui) {
-				$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+		$( "#draggable" ).draggable();
+		$( "#droppable" ).droppable({
+			drop: function( event, ui ) {
+				$( this )
+					.addClass( "ui-state-highlight" )
+					.find( "p" )
+						.html( "Dropped!" );
 			}
 		});
-
 	});
 	</script>
 </head>
 <body>
+
 <div class="demo">
 	
 <div id="draggable" class="ui-widget-content">
@@ -40,10 +43,11 @@
 
 </div><!-- End demo -->
 
-<div class="demo-description">
 
-<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
 
+<div class="demo-description">
+<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
 </div><!-- End demo-description -->
+
 </body>
 </html>
diff --git a/demos/droppable/index.html b/demos/droppable/index.html
index e0c4e6ae2..13ae9855e 100644
--- a/demos/droppable/index.html
+++ b/demos/droppable/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Droppable Demos</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
+	<link rel="stylesheet" href="../demos.css">
 </head>
 <body>
 
diff --git a/demos/droppable/photo-manager.html b/demos/droppable/photo-manager.html
index 39176732e..989c61aca 100644
--- a/demos/droppable/photo-manager.html
+++ b/demos/droppable/photo-manager.html
@@ -1,168 +1,184 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Droppable - Simple photo manager</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.mouse.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.resizable.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">
-		#gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
-		.gallery.custom-state-active { background: #eee; }
-		.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
-		.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
-		.gallery li a { float: right; }
-		.gallery li a.ui-icon-zoomin { float: left; }
-		.gallery li img { width: 100%; cursor: move; }
-
-		#trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */
-		#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
-		#trash h4 .ui-icon { float: left; }
-		#trash .gallery h5 { display: none; }
+	<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.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<script src="../../ui/jquery.ui.droppable.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../ui/jquery.ui.dialog.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
+	.gallery.custom-state-active { background: #eee; }
+	.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
+	.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
+	.gallery li a { float: right; }
+	.gallery li a.ui-icon-zoomin { float: left; }
+	.gallery li img { width: 100%; cursor: move; }
+
+	#trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */
+	#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
+	#trash h4 .ui-icon { float: left; }
+	#trash .gallery h5 { display: none; }
 	</style>
-	<script type="text/javascript">
-		$(function() {
-			// there's the gallery and the trash
-			var $gallery = $('#gallery'), $trash = $('#trash');
-
-			// let the gallery items be draggable
-			$('li',$gallery).draggable({
-				cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
-				revert: 'invalid', // when not dropped, the item will revert back to its initial position
-				containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
-				helper: 'clone',
-				cursor: 'move'
-			});
-
-			// let the trash be droppable, accepting the gallery items
-			$trash.droppable({
-				accept: '#gallery > li',
-				activeClass: 'ui-state-highlight',
-				drop: function(ev, ui) {
-					deleteImage(ui.draggable);
-				}
-			});
-
-			// let the gallery be droppable as well, accepting items from the trash
-			$gallery.droppable({
-				accept: '#trash li',
-				activeClass: 'custom-state-active',
-				drop: function(ev, ui) {
-					recycleImage(ui.draggable);
-				}
-			});
+	<script>
+	$(function() {
+		// there's the gallery and the trash
+		var $gallery = $( "#gallery" ),
+			$trash = $( "#trash" );
+
+		// let the gallery items be draggable
+		$( "li", $gallery ).draggable({
+			cancel: "a.ui-icon", // clicking an icon won't initiate dragging
+			revert: "invalid", // when not dropped, the item will revert back to its initial position
+			containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if present
+			helper: "clone",
+			cursor: "move"
+		});
 
-			// image deletion function
-			var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image" class="ui-icon ui-icon-refresh">Recycle image</a>';
-			function deleteImage($item) {
-				$item.fadeOut(function() {
-					var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);
+		// let the trash be droppable, accepting the gallery items
+		$trash.droppable({
+			accept: "#gallery > li",
+			activeClass: "ui-state-highlight",
+			drop: function( event, ui ) {
+				deleteImage( ui.draggable );
+			}
+		});
 
-					$item.find('a.ui-icon-trash').remove();
-					$item.append(recycle_icon).appendTo($list).fadeIn(function() {
-						$item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
-					});
-				});
+		// let the gallery be droppable as well, accepting items from the trash
+		$gallery.droppable({
+			accept: "#trash li",
+			activeClass: "custom-state-active",
+			drop: function( event, ui ) {
+				recycleImage( ui.draggable );
 			}
+		});
 
-			// image recycle function
-			var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>';
-			function recycleImage($item) {
-				$item.fadeOut(function() {
-					$item.find('a.ui-icon-refresh').remove();
-					$item.css('width','96px').append(trash_icon).find('img').css('height','72px').end().appendTo($gallery).fadeIn();
+		// image deletion function
+		var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
+		function deleteImage( $item ) {
+			$item.fadeOut(function() {
+				var $list = $( "ul", $trash ).length ?
+					$( "ul", $trash ) :
+					$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
+
+				$item.find( "a.ui-icon-trash" ).remove();
+				$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
+					$item
+						.animate({ width: "48px" })
+						.find( "img" )
+							.animate({ height: "36px" });
 				});
+			});
+		}
+
+		// image recycle function
+		var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
+		function recycleImage( $item ) {
+			$item.fadeOut(function() {
+				$item
+					.find( "a.ui-icon-refresh" )
+						.remove()
+					.end()
+					.css( "width", "96px")
+					.append( trash_icon )
+					.find( "img" )
+						.css( "height", "72px" )
+					.end()
+					.appendTo( $gallery )
+					.fadeIn();
+			});
+		}
+
+		// image preview function, demonstrating the ui.dialog used as a modal window
+		function viewLargerImage( $link ) {
+			var src = $link.attr( "href" ),
+				title = $link.siblings( "img" ).attr( "alt" ),
+				$modal = $( "img[src$='" + src + "']" );
+
+			if ( $modal.length ) {
+				$modal.dialog( "open" );
+			} else {
+				var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
+					.attr( "src", src ).appendTo( "body" );
+				setTimeout(function() {
+					img.dialog({
+						title: title,
+						width: 400,
+						modal: true
+					});
+				}, 1 );
 			}
-
-			// image preview function, demonstrating the ui.dialog used as a modal window
-			function viewLargerImage($link) {
-				var src = $link.attr('href');
-				var title = $link.siblings('img').attr('alt');
-				var $modal = $('img[src$="'+src+'"]');
-
-				if ($modal.length) {
-					$modal.dialog('open')
-				} else {
-					var img = $('<img alt="'+title+'" width="384" height="288" style="display:none;padding: 8px;" />')
-						.attr('src',src).appendTo('body');
-					setTimeout(function() {
-						img.dialog({
-								title: title,
-								width: 400,
-								modal: true
-							});
-					}, 1);
-				}
+		}
+
+		// resolve the icons behavior with event delegation
+		$( "ul.gallery > li" ).click(function( event ) {
+			var $item = $( this ),
+				$target = $( event.target );
+
+			if ( $target.is( "a.ui-icon-trash" ) ) {
+				deleteImage( $item );
+			} else if ( $target.is( "a.ui-icon-zoomin" ) ) {
+				viewLargerImage( $target );
+			} else if ( $target.is( "a.ui-icon-refresh" ) ) {
+				recycleImage( $item );
 			}
 
-			// resolve the icons behavior with event delegation
-			$('ul.gallery > li').click(function(ev) {
-				var $item = $(this);
-				var $target = $(ev.target);
-
-				if ($target.is('a.ui-icon-trash')) {
-					deleteImage($item);
-				} else if ($target.is('a.ui-icon-zoomin')) {
-					viewLargerImage($target);
-				} else if ($target.is('a.ui-icon-refresh')) {
-					recycleImage($item);
-				}
-
-				return false;
-			});
+			return false;
 		});
+	});
 	</script>
 </head>
 <body>
-	<div class="demo ui-widget ui-helper-clearfix">
-
-		<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
-			<li class="ui-widget-content ui-corner-tr">
-				<h5 class="ui-widget-header">High Tatras</h5>
-				<img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
-				<a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
-				<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
-			</li>
-			<li class="ui-widget-content ui-corner-tr">
-				<h5 class="ui-widget-header">High Tatras 2</h5>
-				<img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
-				<a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
-				<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
-			</li>
-			<li class="ui-widget-content ui-corner-tr">
-				<h5 class="ui-widget-header">High Tatras 3</h5>
-				<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
-				<a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
-				<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
-			</li>
-			<li class="ui-widget-content ui-corner-tr">
-				<h5 class="ui-widget-header">High Tatras 4</h5>
-				<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
-				<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
-				<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
-			</li>
-		</ul>
-
-		<div id="trash" class="ui-widget-content ui-state-default">
-			<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
-		</div>
-
-	</div><!-- End demo -->
-
-	<div class="demo-description">
-
-		<p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p>
-		<p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p>
-		<p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p>
-
-	</div><!-- End demo-description -->
+
+<div class="demo ui-widget ui-helper-clearfix">
+
+<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
+	<li class="ui-widget-content ui-corner-tr">
+		<h5 class="ui-widget-header">High Tatras</h5>
+		<img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
+		<a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
+		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
+	</li>
+	<li class="ui-widget-content ui-corner-tr">
+		<h5 class="ui-widget-header">High Tatras 2</h5>
+		<img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
+		<a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
+		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
+	</li>
+	<li class="ui-widget-content ui-corner-tr">
+		<h5 class="ui-widget-header">High Tatras 3</h5>
+		<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
+		<a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
+		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
+	</li>
+	<li class="ui-widget-content ui-corner-tr">
+		<h5 class="ui-widget-header">High Tatras 4</h5>
+		<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
+		<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
+		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
+	</li>
+</ul>
+
+<div id="trash" class="ui-widget-content ui-state-default">
+	<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
+</div>
+
+</div><!-- End demo -->
+
+
+<div class="demo-description">
+<p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p>
+<p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p>
+<p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p>
+</div><!-- End demo-description -->
+
 </body>
 </html>
diff --git a/demos/droppable/propagation.html b/demos/droppable/propagation.html
index e6cf3c212..d39c13101 100644
--- a/demos/droppable/propagation.html
+++ b/demos/droppable/propagation.html
@@ -1,48 +1,53 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Droppable - Prevent propagation</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.draggable.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.droppable.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.draggable.js"></script>
+	<script src="../../ui/jquery.ui.droppable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
 	#draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
 	#droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
 	#droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; }
 	</style>
-	<script type="text/javascript">
+	<script>
 	$(function() {
+		$( "#draggable" ).draggable();
 
-		$("#draggable").draggable();
-
-		$("#droppable, #droppable-inner").droppable({
-			activeClass: 'ui-state-hover',
-			hoverClass: 'ui-state-active',
-			drop: function(event, ui) {
-				$(this).addClass('ui-state-highlight').find('> p').html('Dropped!');
+		$( "#droppable, #droppable-inner" ).droppable({
+			activeClass: "ui-state-hover",
+			hoverClass: "ui-state-active",
+			drop: function( event, ui ) {
+				$( this )
+					.addClass( "ui-state-highlight" )
+					.find( "> p" )
+						.html( "Dropped!" );
 				return false;
 			}
 		});
 
-		$("#droppable2, #droppable2-inner").droppable({
+		$( "#droppable2, #droppable2-inner" ).droppable({
 			greedy: true,
-			activeClass: 'ui-state-hover',
-			hoverClass: 'ui-state-active',
-			drop: function(event, ui) {
-				$(this).addClass('ui-state-highlight').find('> p').html('Dropped!');
+			activeClass: "ui-state-hover",
+			hoverClass: "ui-state-active",
+			drop: function( event, ui ) {
+				$( this )
+					.addClass( "ui-state-highlight" )
+					.find( "> p" )
+						.html( "Dropped!" );
 			}
 		});
-
 	});
 	</script>
 </head>
 <body>
+
 <div class="demo">
 	
 <div id="draggable" class="ui-widget-content">
@@ -65,10 +70,11 @@
 
 </div><!-- End demo -->
 
-<div class="demo-description">
 
-<p>When working with nested droppables &#8212; for example, you may have an editable directory structure displayed as a tree, with folder and document nodes &#8212; the <code>greedy</code> option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p>
 
+<div class="demo-description">
+<p>When working with nested droppables &#8212; for example, you may have an editable directory structure displayed as a tree, with folder and document nodes &#8212; the <code>greedy</code> option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p>
 </div><!-- End demo-description -->
+
 </body>
 </html>
diff --git a/demos/droppable/revert.html b/demos/droppable/revert.html
index 1f36c7178..e6de051f5 100644
--- a/demos/droppable/revert.html
+++ b/demos/droppable/revert.html
@@ -1,38 +1,40 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Droppable - Revert draggable position</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.draggable.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.droppable.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.draggable.js"></script>
+	<script src="../../ui/jquery.ui.droppable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
 	#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
 	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
 	</style>
-	<script type="text/javascript">
+	<script>
 	$(function() {
-
-		$("#draggable").draggable({ revert: 'valid' });
-		$("#draggable2").draggable({ revert: 'invalid' });
-
-		$("#droppable").droppable({
-			activeClass: 'ui-state-hover',
-			hoverClass: 'ui-state-active',
-			drop: function(event, ui) {
-				$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+		$( "#draggable" ).draggable({ revert: "valid" });
+		$( "#draggable2" ).draggable({ revert: "invalid" });
+
+		$( "#droppable" ).droppable({
+			activeClass: "ui-state-hover",
+			hoverClass: "ui-state-active",
+			drop: function( event, ui ) {
+				$( this )
+					.addClass( "ui-state-highlight" )
+					.find( "p" )
+						.html( "Dropped!" );
 			}
 		});
-
 	});
 	</script>
 </head>
 <body>
+
 <div class="demo">
 	
 <div id="draggable" class="ui-widget-content">
@@ -49,10 +51,11 @@
 
 </div><!-- End demo -->
 
-<div class="demo-description">
 
-<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option set on the draggable.</p>
 
+<div class="demo-description">
+<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option set on the draggable.</p>
 </div><!-- End demo-description -->
+
 </body>
 </html>
diff --git a/demos/droppable/shopping-cart.html b/demos/droppable/shopping-cart.html
index de8ce4fe3..45e716423 100644
--- a/demos/droppable/shopping-cart.html
+++ b/demos/droppable/shopping-cart.html
@@ -1,53 +1,53 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Droppable - Shopping Cart Demo</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.draggable.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.accordion.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.draggable.js"></script>
+	<script src="../../ui/jquery.ui.droppable.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<script src="../../ui/jquery.ui.accordion.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
 	h1 { padding: .2em; margin: 0; }
 	#products { float:left; width: 500px; margin-right: 2em; }
 	#cart { width: 200px; float: left; }
 	/* style the list to maximize the droppable hitarea */
 	#cart ol { margin: 0; padding: 1em 0 1em 3em; }
 	</style>
-	<script type="text/javascript">
+	<script>
 	$(function() {
-		$("#catalog").accordion();
-		$("#catalog li").draggable({
+		$( "#catalog" ).accordion();
+		$( "#catalog li" ).draggable({
 			appendTo: "body",
 			helper: "clone"
 		});
-		$("#cart ol").droppable({
+		$( "#cart ol" ).droppable({
 			activeClass: "ui-state-default",
 			hoverClass: "ui-state-hover",
 			accept: ":not(.ui-sortable-helper)",
-			drop: function(event, ui) {
-				$(this).find(".placeholder").remove();
-				$("<li></li>").text(ui.draggable.text()).appendTo(this);
+			drop: function( event, ui ) {
+				$( this ).find( ".placeholder" ).remove();
+				$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
 			}
 		}).sortable({
 			items: "li:not(.placeholder)",
 			sort: function() {
 				// gets added unintentionally by droppable interacting with sortable
 				// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
-				$(this).removeClass("ui-state-default");
+				$( this ).removeClass( "ui-state-default" );
 			}
 		});
-
 	});
 	</script>
 </head>
 <body>
+
 <div class="demo">
 	
 <div id="products">
@@ -91,11 +91,11 @@
 
 </div><!-- End demo -->
 
-<div class="demo-description">
 
-<p>Demonstrate how to use an accordion to structure products into a catalog and make use drag and drop for adding
-them to a shopping cart, where they are sortable.</p>
 
+<div class="demo-description">
+<p>Demonstrate how to use an accordion to structure products into a catalog and make use drag and drop for adding them to a shopping cart, where they are sortable.</p>
 </div><!-- End demo-description -->
+
 </body>
 </html>
diff --git a/demos/droppable/visual-feedback.html b/demos/droppable/visual-feedback.html
index 1bb6c6038..f1e579621 100644
--- a/demos/droppable/visual-feedback.html
+++ b/demos/droppable/visual-feedback.html
@@ -1,43 +1,49 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Droppable - Visual feedback</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.draggable.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.droppable.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.draggable.js"></script>
+	<script src="../../ui/jquery.ui.droppable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
 	#draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
 	#droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
 	</style>
-	<script type="text/javascript">
+	<script>
 	$(function() {
-		$("#draggable").draggable();
-		$("#droppable").droppable({
-			hoverClass: 'ui-state-active',
-			drop: function(event, ui) {
-				$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+		$( "#draggable" ).draggable();
+		$( "#droppable" ).droppable({
+			hoverClass: "ui-state-active",
+			drop: function( event, ui ) {
+				$( this )
+					.addClass( "ui-state-highlight" )
+					.find( "p" )
+						.html( "Dropped!" );
 			}
 		});
-		
-		$("#draggable2").draggable();
-		$("#droppable2").droppable({
+
+		$( "#draggable2" ).draggable();
+		$( "#droppable2" ).droppable({
 			accept: "#draggable2",
-			activeClass: 'ui-state-hover',
-			drop: function(event, ui) {
-				$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+			activeClass: "ui-state-hover",
+			drop: function( event, ui ) {
+				$( this )
+					.addClass( "ui-state-highlight" )
+					.find( "p" )
+						.html( "Dropped!" );
 			}
 		});
-
 	});
 	</script>
 </head>
 <body>
+
 <div class="demo">
 
 <h3 class="docs">Feedback on hover:</h3>
@@ -60,14 +66,13 @@
 	<p>Drop here</p>
 </div>
 
-<!-- add active class demo -->
-
 </div><!-- End demo -->
 
-<div class="demo-description">
 
-<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it).  Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p>
 
+<div class="demo-description">
+<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it).  Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p>
 </div><!-- End demo-description -->
+
 </body>
 </html>
author	Scott González <scott.gonzalez@gmail.com>	2010-09-10 09:38:42 -0400
committer	Scott González <scott.gonzalez@gmail.com>	2010-09-10 09:38:42 -0400
commit	a1fc59c17e40b89c28920681cd6dd32ed68a4102 (patch)
tree	3c1ddd977d1524775f48eef1b361d085b04bf7eb /demos
parent	6cf45dd25a98f98c91a4000345fc5597f9929939 (diff)
download	jquery-ui-a1fc59c17e40b89c28920681cd6dd32ed68a4102.tar.gz jquery-ui-a1fc59c17e40b89c28920681cd6dd32ed68a4102.zip