Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adding shopping cart demo for integration of accordion, draggable, dr…
…oppable and sortable
- Loading branch information
1 parent
5baa180
commit c9a877e
Showing
1 changed file
with
96 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |