-
Notifications
You must be signed in to change notification settings - Fork 5.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
demos/droppable: added Simple photo manager demo
- Loading branch information
Showing
10 changed files
with
162 additions
and
1 deletion.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
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,160 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>jQuery UI Droppable - Simple photo manager</title> | ||
| <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
| <script type="text/javascript" src="../../jquery-1.3.js"></script> | ||
| <script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
| <script type="text/javascript" src="../../ui/ui.draggable.js"></script> | ||
| <script type="text/javascript" src="../../ui/ui.droppable.js"></script> | ||
| <script type="text/javascript" src="../../ui/ui.resizable.js"></script> | ||
| <script type="text/javascript" src="../../ui/ui.dialog.js"></script> | ||
| <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
| <style type="text/css"> | ||
| #gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */ | ||
| .gallery.custom-state-active { background: #eee; } | ||
| .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; } | ||
| .gallery li h5 { margin: 0 0 0.4em; cursor: move; } | ||
| .gallery li a { float: right; } | ||
| .gallery li a.ui-icon-zoomin { float: left; } | ||
| .gallery li img { width: 100%; cursor: move; } | ||
|
|
||
| #trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */ | ||
| #trash h4 { line-height: 16px; margin: 0 0 0.4em; } | ||
| #trash h4 .ui-icon { float: left; } | ||
| #trash .gallery h5 { display: none; } | ||
| </style> | ||
| <script type="text/javascript"> | ||
| $(function() { | ||
| // there's the gallery and the trash | ||
| var $gallery = $('#gallery'), $trash = $('#trash'); | ||
|
|
||
| // let the gallery items be draggable | ||
| $('li',$gallery).draggable({ | ||
| cancel: 'a.ui-icon',// clicking an icon won't initiate dragging | ||
| revert: 'invalid', // when not dropped, the item will revert back to its initial position | ||
| containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present | ||
| helper: 'clone', | ||
| cursor: 'move' | ||
| }); | ||
|
|
||
| // let the trash be droppable, accepting the gallery items | ||
| $trash.droppable({ | ||
| accept: '#gallery > li', | ||
| activeClass: 'ui-state-highlight', | ||
| drop: function(ev, ui) { | ||
| deleteImage(ui.draggable); | ||
| } | ||
| }); | ||
|
|
||
| // let the gallery be droppable as well, accepting items from the trash | ||
| $gallery.droppable({ | ||
| accept: '#trash li', | ||
| activeClass: 'custom-state-active', | ||
| drop: function(ev, ui) { | ||
| recycleImage(ui.draggable); | ||
| } | ||
| }); | ||
|
|
||
| // image deletion function | ||
| 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>'; | ||
| function deleteImage($item) { | ||
| $item.fadeOut(function() { | ||
| var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash); | ||
|
|
||
| $item.find('a.ui-icon-trash').remove(); | ||
| $item.append(recycle_icon).appendTo($list).fadeIn(function() { | ||
| $item.animate({ width: '48px' }).find('img').animate({ height: '36px' }); | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| // image recycle function | ||
| 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>'; | ||
| function recycleImage($item) { | ||
| $item.fadeOut(function() { | ||
| $item.find('a.ui-icon-refresh').remove(); | ||
| $item.css('width','96px').append(trash_icon).find('img').css('height','72px').end().appendTo($gallery).fadeIn(); | ||
| }); | ||
| } | ||
|
|
||
| // image preview function, demonstrating the ui.dialog used as a modal window | ||
| function viewLargerImage($link) { | ||
| var src = $link[0].href; | ||
| var title = $link.siblings('img').attr('alt'); | ||
| var $modal = $('img[src="'+src+'"]'); | ||
|
|
||
| $modal.length ? $modal.dialog('open') : $('<img src="'+src+'" alt="'+title+'" width="384" height="288" style="padding: 8px;" />').appendTo('body').dialog({ | ||
| title: title, | ||
| width: '400px', | ||
| modal: 'true', | ||
| overlay: { | ||
| backgroundColor: '#000', | ||
| opacity: 0.5 | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| // resolve the icons behavior with event delegation | ||
| $('ul.gallery > li').click(function(ev) { | ||
| var $item = $(this); | ||
| var $target = $(ev.target); | ||
|
|
||
| if ($target.is('a.ui-icon-trash')) { | ||
| deleteImage($item); | ||
| } else if ($target.is('a.ui-icon-zoomin')) { | ||
| viewLargerImage($target); | ||
| } else if ($target.is('a.ui-icon-refresh')) { | ||
| recycleImage($item); | ||
| } | ||
|
|
||
| return false; | ||
| }); | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div class="demo ui-widget ui-helper-clearfix"> | ||
|
|
||
| <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"> | ||
| <li class="ui-widget-content ui-corner-tr"> | ||
| <h5 class="ui-widget-header">High Tatras</h5> | ||
| <img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" /> | ||
| <a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> | ||
| <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> | ||
| </li> | ||
| <li class="ui-widget-content ui-corner-tr"> | ||
| <h5 class="ui-widget-header">High Tatras 2</h5> | ||
| <img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" /> | ||
| <a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> | ||
| <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> | ||
| </li> | ||
| <li class="ui-widget-content ui-corner-tr"> | ||
| <h5 class="ui-widget-header">High Tatras 3</h5> | ||
| <img src="images/high_tatras3_min.jpg" alt="Planning the ascend" width="96" height="72" /> | ||
| <a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> | ||
| <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> | ||
| </li> | ||
| <li class="ui-widget-content ui-corner-tr"> | ||
| <h5 class="ui-widget-header">High Tatras 4</h5> | ||
| <img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" /> | ||
| <a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> | ||
| <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <div id="trash" class="ui-widget-content ui-state-default"> | ||
| <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4> | ||
| </div> | ||
|
|
||
| </div><!-- End demo --> | ||
|
|
||
| <div class="demo-description"> | ||
|
|
||
| <p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p> | ||
| <p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p> | ||
| <p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p> | ||
|
|
||
| </div><!-- End demo-description --> | ||
| </body> | ||
| </html> |