Mercurial > hg > ismi-richfaces

annotate src/main/webapp/imageServer/resources/js/jquery-ui-1.10.4/demos/tooltip/custom-animation.html @ 7:764f47286679

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
(none)
author jurzua
date Wed, 29 Oct 2014 14:28:34 +0000
parents
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
7
jurzua
parents:
diff changeset
1 <!doctype html>
jurzua
parents:
diff changeset
2 <html lang="en">
jurzua
parents:
diff changeset
3 <head>
jurzua
parents:
diff changeset
4 <meta charset="utf-8">
jurzua
parents:
diff changeset
5 <title>jQuery UI Tooltip - Custom animation demo</title>
jurzua
parents:
diff changeset
6 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
jurzua
parents:
diff changeset
7 <script src="../../jquery-1.10.2.js"></script>
jurzua
parents:
diff changeset
8 <script src="../../ui/jquery.ui.core.js"></script>
jurzua
parents:
diff changeset
9 <script src="../../ui/jquery.ui.widget.js"></script>
jurzua
parents:
diff changeset
10 <script src="../../ui/jquery.ui.position.js"></script>
jurzua
parents:
diff changeset
11 <script src="../../ui/jquery.ui.tooltip.js"></script>
jurzua
parents:
diff changeset
12 <script src="../../ui/jquery.ui.effect.js"></script>
jurzua
parents:
diff changeset
13 <script src="../../ui/jquery.ui.effect-explode.js"></script>
jurzua
parents:
diff changeset
14 <link rel="stylesheet" href="../demos.css">
jurzua
parents:
diff changeset
15 <script>
jurzua
parents:
diff changeset
16 $(function() {
jurzua
parents:
diff changeset
17 $( "#show-option" ).tooltip({
jurzua
parents:
diff changeset
18 show: {
jurzua
parents:
diff changeset
19 effect: "slideDown",
jurzua
parents:
diff changeset
20 delay: 250
jurzua
parents:
diff changeset
21 }
jurzua
parents:
diff changeset
22 });
jurzua
parents:
diff changeset
23 $( "#hide-option" ).tooltip({
jurzua
parents:
diff changeset
24 hide: {
jurzua
parents:
diff changeset
25 effect: "explode",
jurzua
parents:
diff changeset
26 delay: 250
jurzua
parents:
diff changeset
27 }
jurzua
parents:
diff changeset
28 });
jurzua
parents:
diff changeset
29 $( "#open-event" ).tooltip({
jurzua
parents:
diff changeset
30 show: null,
jurzua
parents:
diff changeset
31 position: {
jurzua
parents:
diff changeset
32 my: "left top",
jurzua
parents:
diff changeset
33 at: "left bottom"
jurzua
parents:
diff changeset
34 },
jurzua
parents:
diff changeset
35 open: function( event, ui ) {
jurzua
parents:
diff changeset
36 ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
jurzua
parents:
diff changeset
37 }
jurzua
parents:
diff changeset
38 });
jurzua
parents:
diff changeset
39 });
jurzua
parents:
diff changeset
40 </script>
jurzua
parents:
diff changeset
41 </head>
jurzua
parents:
diff changeset
42 <body>
jurzua
parents:
diff changeset
43
jurzua
parents:
diff changeset
44 <p>There are various ways to customize the animation of a tooltip.</p>
jurzua
parents:
diff changeset
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
jurzua
parents:
diff changeset
46 <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="explode on hide">hide</a> options.</p>
jurzua
parents:
diff changeset
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>
jurzua
parents:
diff changeset
48
jurzua
parents:
diff changeset
49 <div class="demo-description">
jurzua
parents:
diff changeset
50 <p>This demo shows how to customize animations using the show and hide options,
jurzua
parents:
diff changeset
51 as well as the open event.</p>
jurzua
parents:
diff changeset
52 </div>
jurzua
parents:
diff changeset
53 </body>
jurzua
parents:
diff changeset
54 </html>