Mercurial > hg > ismi-richfaces

comparison src/main/webapp/imageServer/resources/js/jquery-ui-1.10.4/demos/tooltip/custom-content.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
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 content</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 <link rel="stylesheet" href="../demos.css">
13 <style>
14 .photo {
15 width: 300px;
16 text-align: center;
17 }
18 .photo .ui-widget-header {
19 margin: 1em 0;
20 }
21 .map {
22 width: 350px;
23 height: 350px;
24 }
25 .ui-tooltip {
26 max-width: 350px;
27 }
28 </style>
29 <script>
30 $(function() {
31 $( document ).tooltip({
32 items: "img, [data-geo], [title]",
33 content: function() {
34 var element = $( this );
35 if ( element.is( "[data-geo]" ) ) {
36 var text = element.text();
37 return "<img class='map' alt='" + text +
38 "' src='http://maps.google.com/maps/api/staticmap?" +
39 "zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
40 text + "'>";
41 }
42 if ( element.is( "[title]" ) ) {
43 return element.attr( "title" );
44 }
45 if ( element.is( "img" ) ) {
46 return element.attr( "alt" );
47 }
48 }
49 });
50 });
51 </script>
52 </head>
53 <body>
54
55 <div class="ui-widget photo">
56 <div class="ui-widget-header ui-corner-all">
57 <h2>St. Stephen's Cathedral</h2>
58 <h3><a href="http://maps.google.com/maps?q=vienna,+austria&amp;z=11" data-geo>Vienna, Austria</a></h3>
59 </div>
60 <a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
61 <img src="images/st-stephens.jpg" alt="St. Stephen's Cathedral" class="ui-corner-all">
62 </a>
63 </div>
64
65 <div class="ui-widget photo">
66 <div class="ui-widget-header ui-corner-all">
67 <h2>Tower Bridge</h2>
68 <h3><a href="http://maps.google.com/maps?q=london,+england&amp;z=11" data-geo>London, England</a></h3>
69 </div>
70 <a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
71 <img src="images/tower-bridge.jpg" alt="Tower Bridge" class="ui-corner-all">
72 </a>
73 </div>
74
75 <p>All images are part of <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>
76 and are licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> by the copyright holder.</p>
77
78 <div class="demo-description">
79 <p>Shows how to combine different event delegated tooltips into a single instance, by customizing the items and content options.</p>
80 <p>We realize you may want to interact with the map tooltips. This is a planned feature for a future version.</p>
81 </div>
82 </body>
83 </html>