diff options
| author | jzaefferer <joern.zaefferer@gmail.com> | 2010-10-26 17:07:22 +0200 |
|---|---|---|
| committer | jzaefferer <joern.zaefferer@gmail.com> | 2010-10-26 17:07:22 +0200 |
| commit | 48a5977d3325869abd7b7ba835eb8ac331fd6eb5 (patch) | |
| tree | 43fd0cda4af2cdcd33f5f2ae8205b13100caca83 /demos/tooltip | |
| parent | bdd815e8dcdeace8be6dd8005ef443bc5ea20548 (diff) | |
| download | jquery-ui-48a5977d3325869abd7b7ba835eb8ac331fd6eb5.tar.gz jquery-ui-48a5977d3325869abd7b7ba835eb8ac331fd6eb5.zip | |
Tooltip: Implementing event delegation support.
Diffstat (limited to 'demos/tooltip')
| -rw-r--r-- | demos/tooltip/ajax/content1.html | 1 | ||||
| -rw-r--r-- | demos/tooltip/ajax/content2.html | 1 | ||||
| -rw-r--r-- | demos/tooltip/custom-animation.html | 2 | ||||
| -rw-r--r-- | demos/tooltip/default.html | 2 | ||||
| -rw-r--r-- | demos/tooltip/delegation-mixbag.html | 73 | ||||
| -rw-r--r-- | demos/tooltip/index.html | 1 | ||||
| -rw-r--r-- | demos/tooltip/tracking.html | 2 |
7 files changed, 79 insertions, 3 deletions
diff --git a/demos/tooltip/ajax/content1.html b/demos/tooltip/ajax/content1.html new file mode 100644 index 000000000..a1401b26d --- /dev/null +++ b/demos/tooltip/ajax/content1.html @@ -0,0 +1 @@ +<p><strong>This content was loaded via ajax.</strong></p>
\ No newline at end of file diff --git a/demos/tooltip/ajax/content2.html b/demos/tooltip/ajax/content2.html new file mode 100644 index 000000000..f4132d731 --- /dev/null +++ b/demos/tooltip/ajax/content2.html @@ -0,0 +1 @@ +<p><strong>This other content was loaded via ajax.</strong></p>
\ No newline at end of file diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html index 585360d7c..1353e3b91 100644 --- a/demos/tooltip/custom-animation.html +++ b/demos/tooltip/custom-animation.html @@ -11,7 +11,7 @@ <link type="text/css" href="../demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { - $("a, input").tooltip({ + $(".demo").tooltip({ open: function() { $(this).tooltip("widget").stop(false, true).hide().slideDown(); }, diff --git a/demos/tooltip/default.html b/demos/tooltip/default.html index 22dac4f90..59a32311f 100644 --- a/demos/tooltip/default.html +++ b/demos/tooltip/default.html @@ -11,7 +11,7 @@ <link type="text/css" href="../demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { - $("a, input").tooltip(); + $(".demo").tooltip(); }); </script> <style> diff --git a/demos/tooltip/delegation-mixbag.html b/demos/tooltip/delegation-mixbag.html new file mode 100644 index 000000000..45548433d --- /dev/null +++ b/demos/tooltip/delegation-mixbag.html @@ -0,0 +1,73 @@ +<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Tooltip - Default demo</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.position.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <script type="text/javascript"> + $(function() { + $(".demo").tooltip({ + items: "[href], [title]", + content: function(response) { + var href = $(this).attr("href"); + if (/^#/.test(href)) { + return $(href).html(); + } else if (href) { + $.get(href, response); + return "loading..."; + } + return this.title; + } + }); + $("#footnotes").hide(); + }); + </script> + <style> + label { display: inline-block; width: 5em; } + </style> +</head> +<body> + +<div class="demo"> + <ul> + <li> + <a href="#footnote1">I'm a link to a footnote.</a> + </li> + <li> + <a href="#footnote2">I'm another link to a footnote.</a> + </li> + </ul> + <input title="This is just an input, nothing special" /> + + <ul> + <li> + <a href="ajax/content1.html">Link to ajax content, with tooltip preview!</a> + </li> + <li> + <a href="ajax/content2.html">Another link to ajax content, with tooltip preview!</a> + </li> + </ul> + + <div id="footnotes"> + <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div> + <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div> + </div> +</div><!-- End demo --> + + + +<div class="demo-description"> + +<p>Show how to combine different event delegated tooltips into a single instance, by customizing the items and content options.</p> + +</div><!-- End demo-description --> + + + +</body> +</html> diff --git a/demos/tooltip/index.html b/demos/tooltip/index.html index e55575d4c..6bc9c1e5c 100644 --- a/demos/tooltip/index.html +++ b/demos/tooltip/index.html @@ -13,6 +13,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> </ul> </div> diff --git a/demos/tooltip/tracking.html b/demos/tooltip/tracking.html index 9af4d0d09..286f01209 100644 --- a/demos/tooltip/tracking.html +++ b/demos/tooltip/tracking.html @@ -11,7 +11,7 @@ <link type="text/css" href="../demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { - $("a, input").tooltip({ + $(".demo").tooltip({ open: function() { var tooltip = $(this).tooltip("widget"); $(document).mousemove(function(event) { |