corrade-http-templates – Blame information for rev 57
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
57 | office | 1 | <!doctype html> |
2 | <html lang="en"> |
||
3 | <head> |
||
4 | <meta charset="utf-8"> |
||
5 | <title>Tooltip Visual Test: Default</title> |
||
6 | <link rel="stylesheet" href="../../../themes/base/all.css"> |
||
7 | <style> |
||
8 | .group { |
||
9 | margin-top: 2em; |
||
10 | } |
||
11 | </style> |
||
12 | <script src="../../../external/requirejs/require.js"></script> |
||
13 | <script src="../../../demos/bootstrap.js" data-modules="button"> |
||
14 | // default |
||
15 | $( "#context1, form, #childish, #nested-input" ).tooltip(); |
||
16 | |||
17 | // Custom class, replaces ui-widget-content |
||
18 | $( "#context2" ).tooltip({ |
||
19 | classes: { |
||
20 | "ui-tooltip": "ui-corner-all ui-widget-header" |
||
21 | } |
||
22 | }); |
||
23 | $( "#right1" ).tooltip({ |
||
24 | classes: { |
||
25 | "ui-tooltip": "ui-corner-all ui-state-error" |
||
26 | } |
||
27 | }); |
||
28 | |||
29 | // Synchronous content |
||
30 | $( "#footnotes" ).tooltip({ |
||
31 | items: "[href^='#']", |
||
32 | content: function() { |
||
33 | return $( $( this ).attr( "href" ) ).html(); |
||
34 | } |
||
35 | }); |
||
36 | |||
37 | // Asynchronous content |
||
38 | $( "#async" ).tooltip({ |
||
39 | content: function( response ) { |
||
40 | setTimeout(function() { |
||
41 | response( "I loaded <strong>asynchronously</strong>!" ); |
||
42 | }, 1000 ); |
||
43 | return "Loading..."; |
||
44 | } |
||
45 | }); |
||
46 | |||
47 | // Asynchronous content with caching |
||
48 | var content; |
||
49 | $( "#async2" ).tooltip({ |
||
50 | content: function( response ) { |
||
51 | if ( content ) { |
||
52 | return content; |
||
53 | } |
||
54 | setTimeout(function() { |
||
55 | content = "<strong>Hello</strong> world!"; |
||
56 | response( content ); |
||
57 | }, 1000 ); |
||
58 | return "Loading..."; |
||
59 | } |
||
60 | }); |
||
61 | |||
62 | // Custom position |
||
63 | $( "#right2" ).tooltip({ |
||
64 | classes: { |
||
65 | "ui-tooltip": "ui-corner-all ui-state-highlight" |
||
66 | }, |
||
67 | position: { |
||
68 | my: "center top", |
||
69 | at: "center bottom+10" |
||
70 | } |
||
71 | }); |
||
72 | |||
73 | $( "#button1" ).button(); |
||
74 | $( "#button2" ).button({ |
||
75 | icons: { |
||
76 | primary: "ui-icon-wrench" |
||
77 | } |
||
78 | }); |
||
79 | $( "#button3, #button4" ).button({ |
||
80 | icons: { |
||
81 | primary: "ui-icon-wrench" |
||
82 | }, |
||
83 | text: false |
||
84 | }); |
||
85 | $( "#buttons" ).tooltip({ |
||
86 | position: { |
||
87 | my: "center bottom", |
||
88 | at: "center top-5" |
||
89 | } |
||
90 | }); |
||
91 | |||
92 | $( "#blurs-on-click" ).tooltip({ |
||
93 | track: true, |
||
94 | show: { |
||
95 | delay: 500 |
||
96 | } |
||
97 | }).on( "click", function() { |
||
98 | $( "#focus-on-me" ).trigger( "focus" ); |
||
99 | }); |
||
100 | </script> |
||
101 | </head> |
||
102 | <body> |
||
103 | |||
104 | <div> |
||
105 | <p>Lots of tooltipped elements close together.<br> |
||
106 | Mouse through them quickly and slowly.</p> |
||
107 | <ul id="context1"> |
||
108 | <li><a href="#" title="Tooltip text 1">Anchor 1</a></li> |
||
109 | <li><a href="#" title="Tooltip text 2">Anchor 2</a></li> |
||
110 | <li><a href="#" title="Tooltip text 3">Anchor 3</a></li> |
||
111 | <li><a href="#" title="Tooltip text 4 more Tooltip text Tooltip text ">Anchor 4</a></li> |
||
112 | <li><a href="#" title="Tooltip text 5 more Tooltip text Tooltip text ">Anchor 5</a></li> |
||
113 | <li><a href="#" title="Tooltip text 6 more Tooltip text Tooltip text ">Anchor 6</a></li> |
||
114 | </ul> |
||
115 | |||
116 | <div class="group" style="position: absolute; right: 1em; text-align: right;"> |
||
117 | <p>These elements are right aligned.<br> |
||
118 | One collides and one uses custom position.</p> |
||
119 | <p id="right1" title="right aligned element"> |
||
120 | collision detection should kick in around here |
||
121 | </p> |
||
122 | <p id="right2" title="right aligned element with custom position"> |
||
123 | right aligned with custom position |
||
124 | </p> |
||
125 | </div> |
||
126 | |||
127 | <div class="group"> |
||
128 | <p>These footnotes pull content form the elements they link to.</p> |
||
129 | <div id="footnotes"> |
||
130 | <a href="#footnote1">I'm a link to a footnote.</a> |
||
131 | <a href="#footnote2">I'm another link to a footnote.</a> |
||
132 | </div> |
||
133 | </div> |
||
134 | |||
135 | <div class="group"> |
||
136 | <p>These elements load their content asynchronously.<br> |
||
137 | There should be a loading message while the content is retrieved.</p> |
||
138 | <div id="async" style="width: 100px;" class="ui-widget-content" title="never be seen"> |
||
139 | async |
||
140 | </div> |
||
141 | <div id="async2" style="width: 100px;" class="ui-widget-content" title="never be seen"> |
||
142 | async + cache |
||
143 | </div> |
||
144 | </div> |
||
145 | |||
146 | <div class="group" style="width: 300px;"> |
||
147 | <p>Nested elements.</p> |
||
148 | <div id="context2"> |
||
149 | <div title="nested parent" style="border:1px solid red;"> |
||
150 | tooltipped |
||
151 | <span title="nested child" style="border:1px solid green; padding-left: 25px;"> |
||
152 | nested tooltipped |
||
153 | <span title="nested nested child" style="border:1px solid blue; padding-left: 25px;">third level</span> |
||
154 | </span> |
||
155 | </div> |
||
156 | <input title="nested input title"> |
||
157 | </div> |
||
158 | <div id="childish" style="border: 1px solid black;" title="element with child elements"> |
||
159 | Text in <strong>bold</strong>. |
||
160 | </div> |
||
161 | </div> |
||
162 | |||
163 | <button id="blurs-on-click" title="button title text">click me to focus something else</button> |
||
164 | <input id="focus-on-me"> |
||
165 | |||
166 | <div class="group"> |
||
167 | <p>Play around with focusing and hovering of form elements.</p> |
||
168 | <form> |
||
169 | <div> |
||
170 | <label for="first">First Name:</label> |
||
171 | <input id="first" title="Your first name is optional"> |
||
172 | </div> |
||
173 | <div> |
||
174 | <label for="last">Last Name:</label> |
||
175 | <input id="last" title="Your last name is optional"> |
||
176 | </div> |
||
177 | </form> |
||
178 | |||
179 | <p>Some inputs nested inside labels:</p> |
||
180 | <div id="nested-input"> |
||
181 | <label title="test"><input type="checkbox">This is a test</label> |
||
182 | <label title="test2"><input type="checkbox">This is a test</label> |
||
183 | <label><input type="checkbox" title="test3">This is a test</label> |
||
184 | <label><input type="checkbox" title="test4">This is a test</label> |
||
185 | </div> |
||
186 | |||
187 | <p>Some button widgets:</p> |
||
188 | <div id="buttons"> |
||
189 | <button id="button1" title="Button Tooltip">Button Label</button> |
||
190 | <button id="button2" title="Icon Button">Button with Icon</button> |
||
191 | <button id="button3">Icon Only Button 1</button> |
||
192 | <button id="button4">Icon Only Button 2</button> |
||
193 | </div> |
||
194 | </div> |
||
195 | |||
196 | <div class="group"> |
||
197 | <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div> |
||
198 | <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div> |
||
199 | </div> |
||
200 | </div> |
||
201 | |||
202 | <div style="height: 2000px"></div> |
||
203 | |||
204 | </body> |
||
205 | </html> |