library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Adding shopping cart demo for integration of accordion, draggable, droppable and sortable

Browse Source
This commit is contained in:
unknown 2010-03-30 21:57:43 +02:00
parent 5baa180776
commit c9a877e81a
1 changed files with 96 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
demos/droppable/shopping-cart.html Normal file
View File

@ -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>