Mercurial > hg > ismi-richfaces
comparison src/main/webapp/imageServer/resources/js/jquery-ui-1.10.4/demos/tooltip/custom-animation.html @ 7:764f47286679
(none)
| author | jurzua |
|---|---|
| date | Wed, 29 Oct 2014 14:28:34 +0000 |
| parents | |
| children |
comparison
equal
deleted
inserted
replaced
| 6:ded3bccf2cf9 | 7:764f47286679 |
|---|---|
| 1 <!doctype html> | |
| 2 <html lang="en"> | |
| 3 <head> | |
| 4 <meta charset="utf-8"> | |
| 5 <title>jQuery UI Tooltip - Custom animation demo</title> | |
| 6 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> | |
| 7 <script src="../../jquery-1.10.2.js"></script> | |
| 8 <script src="../../ui/jquery.ui.core.js"></script> | |
| 9 <script src="../../ui/jquery.ui.widget.js"></script> | |
| 10 <script src="../../ui/jquery.ui.position.js"></script> | |
| 11 <script src="../../ui/jquery.ui.tooltip.js"></script> | |
| 12 <script src="../../ui/jquery.ui.effect.js"></script> | |
| 13 <script src="../../ui/jquery.ui.effect-explode.js"></script> | |
| 14 <link rel="stylesheet" href="../demos.css"> | |
| 15 <script> | |
| 16 $(function() { | |
| 17 $( "#show-option" ).tooltip({ | |
| 18 show: { | |
| 19 effect: "slideDown", | |
| 20 delay: 250 | |
| 21 } | |
| 22 }); | |
| 23 $( "#hide-option" ).tooltip({ | |
| 24 hide: { | |
| 25 effect: "explode", | |
| 26 delay: 250 | |
| 27 } | |
| 28 }); | |
| 29 $( "#open-event" ).tooltip({ | |
| 30 show: null, | |
| 31 position: { | |
| 32 my: "left top", | |
| 33 at: "left bottom" | |
| 34 }, | |
| 35 open: function( event, ui ) { | |
| 36 ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" ); | |
| 37 } | |
| 38 }); | |
| 39 }); | |
| 40 </script> | |
| 41 </head> | |
| 42 <body> | |
| 43 | |
| 44 <p>There are various ways to customize the animation of a tooltip.</p> | |
| 45 <p>You can use the <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="slide down on show">show</a> and | |
| 46 <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="explode on hide">hide</a> options.</p> | |
| 47 <p>You can also use the <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="move down on show">open event</a>.</p> | |
| 48 | |
| 49 <div class="demo-description"> | |
| 50 <p>This demo shows how to customize animations using the show and hide options, | |
| 51 as well as the open event.</p> | |
| 52 </div> | |
| 53 </body> | |
| 54 </html> |