diff options
| author | Bohdan Ganicky <bohdan.ganicky@gmail.com> | 2009-01-08 16:39:03 +0000 |
|---|---|---|
| committer | Bohdan Ganicky <bohdan.ganicky@gmail.com> | 2009-01-08 16:39:03 +0000 |
| commit | ee392f33a62f4c2a15aaa325c6cce2d69a9bdddd (patch) | |
| tree | 0511d2deb48aaa50ee5f23f92dcaba1af77eae98 /demos/draggable/events.html | |
| parent | ebda5578fbf97d99617f9a1bfe8a926215a564d7 (diff) | |
| download | jquery-ui-ee392f33a62f4c2a15aaa325c6cce2d69a9bdddd.tar.gz jquery-ui-ee392f33a62f4c2a15aaa325c6cce2d69a9bdddd.zip | |
demos/draggable - added events demo
Diffstat (limited to 'demos/draggable/events.html')
| -rw-r--r-- | demos/draggable/events.html | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/demos/draggable/events.html b/demos/draggable/events.html new file mode 100644 index 000000000..82bd3534a --- /dev/null +++ b/demos/draggable/events.html @@ -0,0 +1,74 @@ +<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Draggable - Events Demo</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.3pre.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.draggable.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #draggable { width: 16em; padding: 0 1em; } + #draggable ul li { margin: 1em 0; padding: 0.5em 0; } + #draggable ul li span.ui-icon { float: left; } + #draggable ul li span.count { font-weight: bold; } + </style> + <script type="text/javascript"> + $(function() { + var $start_counter = $('#event-start'), $drag_counter = $('#event-drag'), $stop_counter = $('#event-stop'); + var counts = [0,0,0]; + + $("#draggable").draggable({ + start: function() { + counts[0]++; + updateCounterStatus($start_counter,counts[0]); + }, + drag: function() { + counts[1]++; + updateCounterStatus($drag_counter,counts[1]); + }, + stop: function() { + counts[2]++; + updateCounterStatus($stop_counter,counts[2]); + } + }); + }); + + function updateCounterStatus($event_counter,new_count) { + // first update the status visually... + if (!$event_counter.hasClass('ui-state-hover')) { + $event_counter.addClass('ui-state-hover') + .siblings().removeClass('ui-state-hover'); + } + // ...then update the numbers + $('span.count',$event_counter).text(new_count); + } + </script> +</head> +<body> + +<div class="demo"> + +<div id="draggable" class="ui-widget ui-widget-content"> + + <p>Drag me to trigger the chain of events.</p> + + <ul class="ui-helper-reset"> + <li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li> + <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li> + <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li> + </ul> +</div> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p> +<!-- Add description here --> +</p> + +</div><!-- End demo-description --> + +</body> +</html> |