diff options
| author | unknown <joern.zaefferer@gmail.com> | 2010-03-30 21:57:43 +0200 |
|---|---|---|
| committer | unknown <joern.zaefferer@gmail.com> | 2010-03-30 21:57:43 +0200 |
| commit | c9a877e81a0138c933c0bc6171e6948949c5c2c9 (patch) | |
| tree | 9544de85707923e40c7a36773ee2080cb42f275f /demos/droppable | |
| parent | 5baa18077698f16e2471ccb4828872287fbe4f09 (diff) | |
| download | jquery-ui-c9a877e81a0138c933c0bc6171e6948949c5c2c9.tar.gz jquery-ui-c9a877e81a0138c933c0bc6171e6948949c5c2c9.zip | |
Adding shopping cart demo for integration of accordion, draggable, droppable and sortable
Diffstat (limited to 'demos/droppable')
| -rw-r--r-- | demos/droppable/shopping-cart.html | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/demos/droppable/shopping-cart.html b/demos/droppable/shopping-cart.html new file mode 100644 index 000000000..402fc2300 --- /dev/null +++ b/demos/droppable/shopping-cart.html @@ -0,0 +1,96 @@ +<!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> + <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"> + 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"> + $(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)" + }); + + }); + </script> +</head> +<body> +<div class="demo"> + +<div id="products"> + <h1 class="ui-widget-header">Products</h1> + <div id="catalog"> + <h3><a href="#">T-Shirts</a></h3> + <div> + <ul> + <li>Lolcat Shirt</li> + <li>Cheezeburger Shirt</li> + <li>Buckit Shirt</li> + </ul> + </div> + <h3><a href="#">Bags</a></h3> + <div> + <ul> + <li>Zebra Striped</li> + <li>Black Lether</li> + <li>Alligator Lether</li> + </ul> + </div> + <h3><a href="#">Gadgets</a></h3> + <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><!-- 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><!-- End demo-description --> +</body> +</html> |