diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2010-09-10 09:17:58 -0400 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2010-09-10 09:17:58 -0400 |
| commit | 6cf45dd25a98f98c91a4000345fc5597f9929939 (patch) | |
| tree | 192ef4a8128f42d980c5415136a0dca0057aa4d4 /demos/draggable/events.html | |
| parent | 98fb8c836220730bb9d7c0d73d6766d2b898d773 (diff) | |
| download | jquery-ui-6cf45dd25a98f98c91a4000345fc5597f9929939.tar.gz jquery-ui-6cf45dd25a98f98c91a4000345fc5597f9929939.zip | |
Draggable demos: Coding standards.
Diffstat (limited to 'demos/draggable/events.html')
| -rw-r--r-- | demos/draggable/events.html | 80 |
1 files changed, 40 insertions, 40 deletions
diff --git a/demos/draggable/events.html b/demos/draggable/events.html index 194598ffb..f7884007e 100644 --- a/demos/draggable/events.html +++ b/demos/draggable/events.html @@ -1,51 +1,53 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Events</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.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; } * html #draggable ul li { height: 1%; } - #draggable ul li span.ui-icon { float: left; } - #draggable ul li span.count { font-weight: bold; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #draggable { width: 16em; padding: 0 1em; } + #draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; } + #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]; + <script> + $(function() { + var $start_counter = $( "#event-start" ), + $drag_counter = $( "#event-drag" ), + $stop_counter = $( "#event-stop" ), + 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]); - } - }); + $( "#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) { + 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'); + 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); + $( "span.count", $event_counter ).text( new_count ); } + }); </script> </head> <body> @@ -65,12 +67,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p> -Layer functionality onto the draggable using the <code>start</code>, <code>drag</code>, and <code>stop</code> events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops. -</p> +<div class="demo-description"> +<p>Layer functionality onto the draggable using the <code>start</code>, <code>drag</code>, and <code>stop</code> events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.</p> </div><!-- End demo-description --> </body> |