root/other-projects/tipple-android/i-greenstone-server-files/greenstone/webapps/greenstone3/interfaces/default/js/jquery-ui-1.8.15/demos/droppable/shopping-cart.html @ 26899

Revision 26899, 2.6 KB (checked in by davidb, 7 years ago)

Tipple reborn after Chris's Summer of Code 2013

Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">
5    <title>jQuery UI Droppable - Shopping Cart Demo</title>
6    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7    <script src="../../jquery-1.6.2.js"></script>
8    <script src="../../ui/jquery.ui.core.js"></script>
9    <script src="../../ui/jquery.ui.widget.js"></script>
10    <script src="../../ui/jquery.ui.mouse.js"></script>
11    <script src="../../ui/jquery.ui.draggable.js"></script>
12    <script src="../../ui/jquery.ui.droppable.js"></script>
13    <script src="../../ui/jquery.ui.sortable.js"></script>
14    <script src="../../ui/jquery.ui.accordion.js"></script>
15    <link rel="stylesheet" href="../demos.css">
16    <style>
17    h1 { padding: .2em; margin: 0; }
18    #products { float:left; width: 500px; margin-right: 2em; }
19    #cart { width: 200px; float: left; }
20    /* style the list to maximize the droppable hitarea */
21    #cart ol { margin: 0; padding: 1em 0 1em 3em; }
22    </style>
23    <script>
24    $(function() {
25        $( "#catalog" ).accordion();
26        $( "#catalog li" ).draggable({
27            appendTo: "body",
28            helper: "clone"
29        });
30        $( "#cart ol" ).droppable({
31            activeClass: "ui-state-default",
32            hoverClass: "ui-state-hover",
33            accept: ":not(.ui-sortable-helper)",
34            drop: function( event, ui ) {
35                $( this ).find( ".placeholder" ).remove();
36                $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
37            }
38        }).sortable({
39            items: "li:not(.placeholder)",
40            sort: function() {
41                // gets added unintentionally by droppable interacting with sortable
42                // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
43                $( this ).removeClass( "ui-state-default" );
44            }
45        });
46    });
47    </script>
48</head>
49<body>
50
51<div class="demo">
52   
53<div id="products">
54    <h1 class="ui-widget-header">Products</h1> 
55    <div id="catalog">
56        <h3><a href="#">T-Shirts</a></h3>
57        <div>
58            <ul>
59                <li>Lolcat Shirt</li>
60                <li>Cheezeburger Shirt</li>
61                <li>Buckit Shirt</li>
62            </ul>
63        </div>
64        <h3><a href="#">Bags</a></h3>
65        <div>
66            <ul>
67                <li>Zebra Striped</li>
68                <li>Black Leather</li>
69                <li>Alligator Leather</li>
70            </ul>
71        </div>
72        <h3><a href="#">Gadgets</a></h3>
73        <div>
74            <ul>
75                <li>iPhone</li>
76                <li>iPod</li>
77                <li>iPad</li>
78            </ul>
79        </div>
80    </div>
81</div>
82
83<div id="cart">
84    <h1 class="ui-widget-header">Shopping Cart</h1>
85    <div class="ui-widget-content">
86        <ol>
87            <li class="placeholder">Add your items here</li>
88        </ol>
89    </div>
90</div>
91
92</div><!-- End demo -->
93
94
95
96<div class="demo-description">
97<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>
98</div><!-- End demo-description -->
99
100</body>
101</html>
Note: See TracBrowser for help on using the browser.