diff options
| author | Jörn Zaefferer <joern.zaefferer@gmail.com> | 2011-06-02 14:11:55 +0200 |
|---|---|---|
| committer | Jörn Zaefferer <joern.zaefferer@gmail.com> | 2011-06-02 14:11:55 +0200 |
| commit | 8deb745a4a29351ef1f1e240b06e10bbb37579e5 (patch) | |
| tree | dae42f89f3bfc24bd5709657c9f8b9614ee7f8fd /demos | |
| parent | afe0f72945170879571ebaf060a816b39c9871b8 (diff) | |
| parent | 2a27499ee4ab8076f7c342934af63ad4827f2533 (diff) | |
| download | jquery-ui-8deb745a4a29351ef1f1e240b06e10bbb37579e5.tar.gz jquery-ui-8deb745a4a29351ef1f1e240b06e10bbb37579e5.zip | |
Merge branch 'master' into widget-factory-demo
Diffstat (limited to 'demos')
| -rw-r--r-- | demos/tooltip/custom-animation.html | 21 | ||||
| -rw-r--r-- | demos/tooltip/custom-content.html (renamed from demos/tooltip/delegation-mixbag.html) | 23 | ||||
| -rw-r--r-- | demos/tooltip/index.html | 2 |
3 files changed, 20 insertions, 26 deletions
diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html index e96960f47..c7d1aa5b8 100644 --- a/demos/tooltip/custom-animation.html +++ b/demos/tooltip/custom-animation.html @@ -26,16 +26,14 @@ delay: 250 } }); - $( "#position-option" ).tooltip({ + $( "#open-event" ).tooltip({ + show: null, position: { my: "left top", - at: "left bottom+10", - using: function( pos ) { - $( this ).css({ - left: pos.left, - top: pos.top - 10 - }).animate({ top: pos.top }, "fast" ); - } + at: "left bottom" + }, + open: function( event, ui ) { + ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" ); } }); }); @@ -48,16 +46,15 @@ <p>There are various ways to customize the animation of a tooltip.</p> <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 <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="explode on hide">hide</a> options.</p> -<p>You can also use the <a id="position-option" href="http://jqueryui.com/demos/tooltip/#option-position" title="move down on show">position option</a>.</p> +<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> </div><!-- End demo --> <div class="demo-description"> -<p>This demo shows how to customize animations. The tooltip is shown, after a -delay of 250ms, using a slide down animation, and hidden, after another delay, -without an animation.</p> +<p>This demo shows how to customize animations using the show and hide options, +as well as the open event.</p> </div><!-- End demo-description --> </body> diff --git a/demos/tooltip/delegation-mixbag.html b/demos/tooltip/custom-content.html index 5b1fa4119..e84a7104b 100644 --- a/demos/tooltip/delegation-mixbag.html +++ b/demos/tooltip/custom-content.html @@ -2,7 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <title>jQuery UI Tooltip - Default demo</title> + <title>jQuery UI Tooltip - Custom content</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> <script src="../../jquery-1.5.1.js"></script> <script src="../../ui/jquery.ui.core.js"></script> @@ -18,6 +18,10 @@ .photo .ui-widget-header { margin: 1em 0; } + .map { + width: 350px; + height: 350px; + } </style> <script> $(function() { @@ -26,16 +30,9 @@ content: function() { var element = $( this ); if ( element.is( "[data-geo]" ) ) { - return $( "<iframe>", { - width: 425, - height: 350, - frameborder: 0, - scrolling: "no", - marginheight: 0, - marginwidth: 0, - src: "http://maps.google.com/maps?ll=" + element.attr( "data-geo" ) + - "&z=11&t=p&output=embed" - }); + return "<img class='map' src='http://maps.google.com/maps/api/staticmap?" + + "zoom=11&size=350x350&maptype=terrain&sensor=false¢er=" + + element.text() + "'>"; } if ( element.is( "[title]" ) ) { return element.attr( "title" ); @@ -55,7 +52,7 @@ <div class="ui-widget photo"> <div class="ui-widget-header ui-corner-all"> <h2>St. Stephen's Cathedral</h2> - <h3><a href="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo="48.208174,16.373819">Vienna, Austria</a></h3> + <h3><a href="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo>Vienna, Austria</a></h3> </div> <a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG"> <img src="images/st-stephens.jpg" alt="St. Stephen's Cathedral" class="ui-corner-all"> @@ -65,7 +62,7 @@ <div class="ui-widget photo"> <div class="ui-widget-header ui-corner-all"> <h2>Tower Bridge</h2> - <h3><a href="http://maps.google.com/maps?q=london,+england&z=11" data-geo="51.500152,-0.126236">London, England</a></h3> + <h3><a href="http://maps.google.com/maps?q=london,+england&z=11" data-geo>London, England</a></h3> </div> <a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg"> <img src="images/tower-bridge.jpg" alt="Tower Bridge" class="ui-corner-all"> diff --git a/demos/tooltip/index.html b/demos/tooltip/index.html index 460c494e3..6e7c6836e 100644 --- a/demos/tooltip/index.html +++ b/demos/tooltip/index.html @@ -14,7 +14,7 @@ <li><a href="forms.html">Forms with tooltips</a></li> <li><a href="tracking.html">Track the mouse</a></li> <li><a href="custom-animation.html">Custom animation</a></li> - <li><a href="delegation-mixbag.html">Delegation Mixbag</a></li> + <li><a href="custom-content.html">Custom content</a></li> <li><a href="video-player.html">Video Player</a></li> </ul> </div> |