Subversion Repositories Sites.obs-saisons.fr

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
40 aurelien 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.4.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>