jQuery in CakePHP

Examples:

Default options:

<div class="demo-frame">
<div id="draggable" class="ui-widget-content">
	<p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
	<p>Drop here</p>
</div>
<?=$ajax->drag('draggable')?>
<?=$ajax->drop('droppable',array(
    'drop' => '$(this).addClass(\'ui-state-highlight\').find(\'p\').html(\'Dropped!\');'
))?>
</div>

            

Accepted elements

<div class="demo-frame">

    <div id="draggable-nonvalid" class="ui-widget-content">
    	<p>I'm draggable but can't be dropped</p>
    </div>
    
    <div id="draggable2" class="ui-widget-content">
    	<p>Drag me to my target</p>
    </div>
    
    <div id="droppable2" class="ui-widget-header">
    	<p>accept: '#draggable2'</p>
    </div>
</div>

<?=$ajax->drag('draggable2')?>
<?=$ajax->drag('draggable-nonvalid')?>
<?=$ajax->drop('droppable2',array(
    'drop' => '$(this).addClass(\'ui-state-highlight\').find(\'p\').html(\'Dropped!\');',
    'accept' => '#draggable2',
    'activeClass' => 'ui-state-hover',
    'hoverClass' => 'ui-state-active',
))?>  

            

Revert draggable position

<div class="demo-frame">

<div id="draggable3" class="ui-widget-content">
	<p>I revert when I'm dropped</p>
</div>

<div id="draggable4" class="ui-widget-content">
	<p>I revert when I'm not dropped</p>
</div>

<div id="droppable3" class="ui-widget-header">
	<p>Drop me here</p>
</div>

</div>
<?=$ajax->drag('draggable3', array(
    'revert' => 'valid'
))?>
<?=$ajax->drag('draggable4', array(
    'revert' => 'invalid'
))?>       
<?=$ajax->drop('droppable3',array(
    'drop' => '$(this).addClass(\'ui-state-highlight\').find(\'p\').html(\'Dropped!\');',
    'activeClass' => 'ui-state-hover',
    'hoverClass' => 'ui-state-active',
))?>
            

Simple photo manager

<style type="text/css">
	#gallery { float: left; width: 50%; 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; z-index:5!important}
	.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: 200px!important; min-height: 18em; padding: 1%; position: static!important} * 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>


<div class="demo-frame">
    <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
	<li class="ui-widget-content ui-corner-tr" id="gal1">
		<h5 class="ui-widget-header">High Tatras</h5>
		<img src="http://jqueryui.com/demos/droppable/images/high_tatras_min.jpg"  alt="The peaks of High Tatras" width="96" height="72" //>
		<a href="http://jqueryui.com/demos/droppable/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" id="gal2">
		<h5 class="ui-widget-header">High Tatras 2</h5>
		<img src="http://jqueryui.com/demos/droppable/images/high_tatras2_min.jpg"  alt="The chalet at the Green mountain lake" width="96" height="72" //>
		<a href="http://jqueryui.com/demos/droppable/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" id="gal3">
		<h5 class="ui-widget-header">High Tatras 3</h5>
		<img src="http://jqueryui.com/demos/droppable/images/high_tatras3_min.jpg"  alt="Planning the ascent" width="96" height="72" //>
		<a href="http://jqueryui.com/demos/droppable/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" id="gal4">
		<h5 class="ui-widget-header">High Tatras 4</h5>
		<img src="http://jqueryui.com/demos/droppable/images/high_tatras4_min.jpg"  alt="On top of Kozi kopka" width="96" height="72" //>
		<a href="http://jqueryui.com/demos/droppable/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>

<script>
var $gallery = $('#gallery'), $trash = $('#trash');
    // 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.attr('href');
		var title = $link.siblings('img').attr('alt');
		var $modal = $('img[src$="'+src+'"]');

		if ($modal.length) {
			$modal.dialog('open')
		} else {
			var img = $('<img alt="'+title+'" width="384" height="288" style="display:none;padding: 8px;" />')
				.attr('src',src).appendTo('body');
			setTimeout(function() {
				img.dialog({
						title: title,
						width: 400,
						modal: true
					});
			}, 1);
		}
	}

	// 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>
	
<?=$ajax->drag('gal1',array(
    'cancel' => 'a.ui-icon',
    'revert' => 'invalid',
    'helper' => 'clone',
    'cursor' => 'move',
    'containment'=> '$("#demo-frame").length ? "#demo-frame" : document'
))?>
<?=$ajax->drag('gal2',array(
    'cancel' => 'a.ui-icon',
    'revert' => 'invalid',
    'helper' => 'clone',
    'cursor' => 'move',
    'containment'=> '$("#demo-frame").length ? "#demo-frame" : document'
))?>
<?=$ajax->drag('gal3',array(
    'cancel' => 'a.ui-icon',
    'revert' => 'invalid',
    'helper' => 'clone',
    'cursor' => 'move',
    'containment'=> '$("#demo-frame").length ? "#demo-frame" : document'
))?>
<?=$ajax->drag('gal4',array(
    'cancel' => 'a.ui-icon',
    'revert' => 'invalid',
    'helper' => 'clone',
    'cursor' => 'move',
    'containment'=> '$("#demo-frame").length ? "#demo-frame" : document'
))?>

<?=$ajax->drop('trash',array(
    'accept'=> '#gallery > li',
    'activeClass'=> 'ui-state-highlight',
    'drop'=> 'deleteImage(ui.draggable);'
))?>
<?=$ajax->drop('gallery',array(
    'accept'=> '#trash li',
    'activeClass'=> 'custom-state-active',
    'drop'=> 'recycleImage(ui.draggable);'
))?>

</div>

            

Comments

Post a comment

Author

Message

Send