RubyGems - omf_web - Versions diffs - 1.2.4 → 1.2.5 - Mend

omf_web 1.2.4 → 1.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (318) hide show

data/share/htdocs/vendor/jquery-ui-1.10.4/development-bundle/demos/draggable/visual-feedback.html ADDED Viewed

@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Draggable - Visual feedback</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.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>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
+	#draggable, #draggable2, #draggable3 { margin-bottom:20px; }
+	#set { clear:both; float:left; width: 368px; height: 120px; }
+	p { clear:both; margin:0; padding:1em 0; }
+	</style>
+	<script>
+	$(function() {
+		$( "#draggable" ).draggable({ helper: "original" });
+		$( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" });
+		$( "#draggable3" ).draggable({
+			cursor: "move",
+			cursorAt: { top: -12, left: -20 },
+			helper: function( event ) {
+				return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
+			}
+		});
+		$( "#set div" ).draggable({ stack: "#set div" });
+	});
+	</script>
+</head>
+<body>
+<h3 class="docs">With helpers:</h3>
+<div id="draggable" class="ui-widget-content">
+	<p>Original</p>
+</div>
+<div id="draggable2" class="ui-widget-content">
+	<p>Semi-transparent clone</p>
+</div>
+<div id="draggable3" class="ui-widget-content">
+	<p>Custom helper (in combination with cursorAt)</p>
+</div>
+<h3 class="docs">Stacked:</h3>
+<div id="set">
+	<div class="ui-widget-content">
+		<p>We are draggables..</p>
+	</div>
+	<div class="ui-widget-content">
+		<p>..whose z-indexes are controlled automatically..</p>
+	</div>
+	<div class="ui-widget-content">
+		<p>..with the stack option.</p>
+	</div>
+</div>
+<div class="demo-description">
+<p>Provide feedback to users as they drag an object in the form of a helper. The <code>helper</code> option accepts the values 'original' (the draggable object moves with the cursor), 'clone' (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper's transparency with the <code>opacity</code> option.</p>
+<p>To clarify which draggable is in play, bring the draggable in motion to front. Use the <code>zIndex</code> option to set a higher z-index for the helper, if in play, or use the <code>stack</code> option to ensure that the last item dragged will appear on top of others in the same group on drag stop.</p>
+</div>
+</body>
+</html>

data/share/htdocs/vendor/jquery-ui-1.10.4/development-bundle/demos/droppable/accepted-elements.html ADDED Viewed

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Droppable - Accept</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.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>
+	$(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!" );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+<div id="draggable-nonvalid" class="ui-widget-content">
+	<p>I'm draggable but can't be dropped</p>
+</div>
+<div id="draggable" class="ui-widget-content">
+	<p>Drag me to my target</p>
+</div>
+<div id="droppable" class="ui-widget-header">
+	<p>accept: '#draggable'</p>
+</div>
+<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>
+</body>
+</html>

data/share/htdocs/vendor/jquery-ui-1.10.4/development-bundle/demos/droppable/default.html ADDED Viewed

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<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.10.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>
+	$(function() {
+		$( "#draggable" ).draggable();
+		$( "#droppable" ).droppable({
+			drop: function( event, ui ) {
+				$( this )
+					.addClass( "ui-state-highlight" )
+					.find( "p" )
+						.html( "Dropped!" );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+<div id="draggable" class="ui-widget-content">
+	<p>Drag me to my target</p>
+</div>
+<div id="droppable" class="ui-widget-header">
+	<p>Drop here</p>
+</div>
+<div class="demo-description">
+<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
+</div>
+</body>
+</html>

data/share/htdocs/vendor/jquery-ui-1.10.4/development-bundle/demos/droppable/images/high_tatras.jpg ADDED Viewed

Binary file

data/share/htdocs/vendor/jquery-ui-1.10.4/development-bundle/demos/droppable/images/high_tatras2.jpg ADDED Viewed

Binary file

data/share/htdocs/vendor/jquery-ui-1.10.4/development-bundle/demos/droppable/images/high_tatras2_min.jpg ADDED Viewed

Binary file

data/share/htdocs/vendor/jquery-ui-1.10.4/development-bundle/demos/droppable/images/high_tatras3.jpg ADDED Viewed

Binary file

data/share/htdocs/vendor/jquery-ui-1.10.4/development-bundle/demos/droppable/images/high_tatras3_min.jpg ADDED Viewed

Binary file

data/share/htdocs/vendor/jquery-ui-1.10.4/development-bundle/demos/droppable/images/high_tatras4.jpg ADDED Viewed

Binary file

data/share/htdocs/vendor/jquery-ui-1.10.4/development-bundle/demos/droppable/images/high_tatras4_min.jpg ADDED Viewed

Binary file

data/share/htdocs/vendor/jquery-ui-1.10.4/development-bundle/demos/droppable/images/high_tatras_min.jpg ADDED Viewed

Binary file

data/share/htdocs/vendor/jquery-ui-1.10.4/development-bundle/demos/droppable/index.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Droppable Demos</title>
+</head>
+<body>
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="accepted-elements.html">Accepted elements</a></li>
+	<li><a href="propagation.html">Prevent propagation</a></li>
+	<li><a href="visual-feedback.html">Visual feedback</a></li>
+	<li><a href="revert.html">Revert draggable position</a></li>
+	<li><a href="shopping-cart.html">Shopping Cart</a></li>
+	<li><a href="photo-manager.html">Simple photo manager</a></li>
+</ul>
+</body>
+</html>

data/share/htdocs/vendor/jquery-ui-1.10.4/development-bundle/demos/droppable/photo-manager.html ADDED Viewed

@@ -0,0 +1,182 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Droppable - Simple photo manager</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.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; }
+	.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%; }
+	#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
+	#trash h4 .ui-icon { float: left; }
+	#trash .gallery h5 { display: none; }
+	</style>
+	<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: "document",
+			helper: "clone",
+			cursor: "move"
+		});
+		// 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 );
+			}
+		});
+		// 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 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 );
+			}
+		}
+		// 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 );
+			}
+			return false;
+		});
+	});
+	</script>
+</head>
+<body>
+<div class="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>
+<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>
+</body>
+</html>

data/share/htdocs/vendor/jquery-ui-1.10.4/development-bundle/demos/droppable/propagation.html ADDED Viewed

@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Droppable - Prevent propagation</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.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>
+	$(function() {
+		$( "#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!" );
+				return false;
+			}
+		});
+		$( "#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!" );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+<div id="draggable" class="ui-widget-content">
+	<p>Drag me to my target</p>
+</div>
+<div id="droppable" class="ui-widget-header">
+	<p>Outer droppable</p>
+	<div id="droppable-inner" class="ui-widget-header">
+		<p>Inner droppable (not greedy)</p>
+	</div>
+</div>
+<div id="droppable2" class="ui-widget-header">
+	<p>Outer droppable</p>
+	<div id="droppable2-inner" class="ui-widget-header">
+		<p>Inner droppable (greedy)</p>
+	</div>
+</div>
+<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>
+</body>
+</html>

data/share/htdocs/vendor/jquery-ui-1.10.4/development-bundle/demos/droppable/revert.html ADDED Viewed

@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Droppable - Revert draggable position</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.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>
+	$(function() {
+		$( "#draggable" ).draggable({ revert: "valid" });
+		$( "#draggable2" ).draggable({ revert: "invalid" });
+		$( "#droppable" ).droppable({
+			activeClass: "ui-state-default",
+			hoverClass: "ui-state-hover",
+			drop: function( event, ui ) {
+				$( this )
+					.addClass( "ui-state-highlight" )
+					.find( "p" )
+						.html( "Dropped!" );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+<div id="draggable" class="ui-widget-content">
+	<p>I revert when I'm dropped</p>
+</div>
+<div id="draggable2" class="ui-widget-content">
+	<p>I revert when I'm not dropped</p>
+</div>
+<div id="droppable" class="ui-widget-header">
+	<p>Drop me here</p>
+</div>
+<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>
+</body>
+</html>

data/share/htdocs/vendor/jquery-ui-1.10.4/development-bundle/demos/droppable/shopping-cart.html ADDED Viewed

@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Droppable - Shopping Cart Demo</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.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; margin-top: 1em; }
+	/* style the list to maximize the droppable hitarea */
+	#cart ol { margin: 0; padding: 1em 0 1em 3em; }
+	</style>
+	<script>
+	$(function() {
+		$( "#catalog" ).accordion();
+		$( "#catalog li" ).draggable({
+			appendTo: "body",
+			helper: "clone"
+		});
+		$( "#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 );
+			}
+		}).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" );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+<div id="products">
+	<h1 class="ui-widget-header">Products</h1>
+	<div id="catalog">
+		<h2><a href="#">T-Shirts</a></h2>
+		<div>
+			<ul>
+				<li>Lolcat Shirt</li>
+				<li>Cheezeburger Shirt</li>
+				<li>Buckit Shirt</li>
+			</ul>
+		</div>
+		<h2><a href="#">Bags</a></h2>
+		<div>
+			<ul>
+				<li>Zebra Striped</li>
+				<li>Black Leather</li>
+				<li>Alligator Leather</li>
+			</ul>
+		</div>
+		<h2><a href="#">Gadgets</a></h2>
+		<div>
+			<ul>
+				<li>iPhone</li>
+				<li>iPod</li>
+				<li>iPad</li>
+			</ul>
+		</div>
+	</div>
+</div>
+<div id="cart">
+	<h1 class="ui-widget-header">Shopping Cart</h1>
+	<div class="ui-widget-content">
+		<ol>
+			<li class="placeholder">Add your items here</li>
+		</ol>
+	</div>
+</div>
+<div class="demo-description">
+<p>Demonstrate how to use an accordion to structure products into a catalog and make use of drag and drop for adding them to a shopping cart, where they are sortable.</p>
+</div>
+</body>
+</html>