annotate jquery-ui/development-bundle/demos/droppable/photo-manager.html @ 51:5d636ba6b9cb default tip

Merge with b5d89c03f9585013d464f0240f6d82751b77186f
author dwinter
date Thu, 05 Dec 2013 13:24:57 +0100
parents b2e4605f20b2
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
1 <!DOCTYPE html>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
2 <html lang="en">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
3 <head>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
4 <meta charset="utf-8">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
5 <title>jQuery UI Droppable - Simple photo manager</title>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
6 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
7 <script src="../../jquery-1.5.1.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
8 <script src="../../ui/jquery.ui.position.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
9 <script src="../../ui/jquery.ui.core.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
10 <script src="../../ui/jquery.ui.widget.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
11 <script src="../../ui/jquery.ui.mouse.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
12 <script src="../../ui/jquery.ui.draggable.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
13 <script src="../../ui/jquery.ui.droppable.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
14 <script src="../../ui/jquery.ui.resizable.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
15 <script src="../../ui/jquery.ui.dialog.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
16 <link rel="stylesheet" href="../demos.css">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
17 <style>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
18 #gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
19 .gallery.custom-state-active { background: #eee; }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
20 .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
21 .gallery li h5 { margin: 0 0 0.4em; cursor: move; }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
22 .gallery li a { float: right; }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
23 .gallery li a.ui-icon-zoomin { float: left; }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
24 .gallery li img { width: 100%; cursor: move; }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
25
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
26 #trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
27 #trash h4 { line-height: 16px; margin: 0 0 0.4em; }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
28 #trash h4 .ui-icon { float: left; }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
29 #trash .gallery h5 { display: none; }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
30 </style>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
31 <script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
32 $(function() {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
33 // there's the gallery and the trash
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
34 var $gallery = $( "#gallery" ),
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
35 $trash = $( "#trash" );
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
36
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
37 // let the gallery items be draggable
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
38 $( "li", $gallery ).draggable({
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
39 cancel: "a.ui-icon", // clicking an icon won't initiate dragging
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
40 revert: "invalid", // when not dropped, the item will revert back to its initial position
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
41 containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if present
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
42 helper: "clone",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
43 cursor: "move"
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
44 });
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
45
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
46 // let the trash be droppable, accepting the gallery items
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
47 $trash.droppable({
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
48 accept: "#gallery > li",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
49 activeClass: "ui-state-highlight",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
50 drop: function( event, ui ) {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
51 deleteImage( ui.draggable );
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
52 }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
53 });
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
54
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
55 // let the gallery be droppable as well, accepting items from the trash
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
56 $gallery.droppable({
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
57 accept: "#trash li",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
58 activeClass: "custom-state-active",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
59 drop: function( event, ui ) {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
60 recycleImage( ui.draggable );
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
61 }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
62 });
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
63
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
64 // image deletion function
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
65 var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
66 function deleteImage( $item ) {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
67 $item.fadeOut(function() {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
68 var $list = $( "ul", $trash ).length ?
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
69 $( "ul", $trash ) :
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
70 $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
71
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
72 $item.find( "a.ui-icon-trash" ).remove();
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
73 $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
74 $item
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
75 .animate({ width: "48px" })
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
76 .find( "img" )
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
77 .animate({ height: "36px" });
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
78 });
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
79 });
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
80 }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
81
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
82 // image recycle function
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
83 var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
84 function recycleImage( $item ) {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
85 $item.fadeOut(function() {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
86 $item
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
87 .find( "a.ui-icon-refresh" )
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
88 .remove()
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
89 .end()
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
90 .css( "width", "96px")
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
91 .append( trash_icon )
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
92 .find( "img" )
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
93 .css( "height", "72px" )
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
94 .end()
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
95 .appendTo( $gallery )
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
96 .fadeIn();
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
97 });
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
98 }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
99
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
100 // image preview function, demonstrating the ui.dialog used as a modal window
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
101 function viewLargerImage( $link ) {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
102 var src = $link.attr( "href" ),
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
103 title = $link.siblings( "img" ).attr( "alt" ),
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
104 $modal = $( "img[src$='" + src + "']" );
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
105
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
106 if ( $modal.length ) {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
107 $modal.dialog( "open" );
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
108 } else {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
109 var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
110 .attr( "src", src ).appendTo( "body" );
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
111 setTimeout(function() {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
112 img.dialog({
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
113 title: title,
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
114 width: 400,
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
115 modal: true
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
116 });
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
117 }, 1 );
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
118 }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
119 }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
120
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
121 // resolve the icons behavior with event delegation
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
122 $( "ul.gallery > li" ).click(function( event ) {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
123 var $item = $( this ),
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
124 $target = $( event.target );
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
125
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
126 if ( $target.is( "a.ui-icon-trash" ) ) {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
127 deleteImage( $item );
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
128 } else if ( $target.is( "a.ui-icon-zoomin" ) ) {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
129 viewLargerImage( $target );
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
130 } else if ( $target.is( "a.ui-icon-refresh" ) ) {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
131 recycleImage( $item );
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
132 }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
133
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
134 return false;
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
135 });
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
136 });
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
137 </script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
138 </head>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
139 <body>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
140
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
141 <div class="demo ui-widget ui-helper-clearfix">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
142
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
143 <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
144 <li class="ui-widget-content ui-corner-tr">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
145 <h5 class="ui-widget-header">High Tatras</h5>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
146 <img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
147 <a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
148 <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
149 </li>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
150 <li class="ui-widget-content ui-corner-tr">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
151 <h5 class="ui-widget-header">High Tatras 2</h5>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
152 <img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
153 <a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
154 <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
155 </li>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
156 <li class="ui-widget-content ui-corner-tr">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
157 <h5 class="ui-widget-header">High Tatras 3</h5>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
158 <img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
159 <a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
160 <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
161 </li>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
162 <li class="ui-widget-content ui-corner-tr">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
163 <h5 class="ui-widget-header">High Tatras 4</h5>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
164 <img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
165 <a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
166 <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
167 </li>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
168 </ul>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
169
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
170 <div id="trash" class="ui-widget-content ui-state-default">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
171 <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
172 </div>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
173
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
174 </div><!-- End demo -->
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
175
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
176
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
177 <div class="demo-description">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
178 <p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
179 <p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
180 <p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
181 </div><!-- End demo-description -->
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
182
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
183 </body>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
184 </html>