|
1 |
|
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
3 <html> |
|
4 <head> |
|
5 <title>YUI Library Examples: Widget: Creating a simple Tooltip widget</title> |
|
6 <meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
7 <link rel="stylesheet" type="text/css" href="../../assets/yui.css" > |
|
8 |
|
9 <style> |
|
10 /*Supplemental CSS for the YUI distribution*/ |
|
11 #custom-doc { width: 95%; min-width: 950px; } |
|
12 #pagetitle {background-image: url(../../assets/bg_hd.gif);} |
|
13 /* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/ |
|
14 </style> |
|
15 |
|
16 <link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css"> |
|
17 <link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
18 <script type="text/javascript" src="../../build/yui/yui-min.js"></script> |
|
19 <style type="text/css"> |
|
20 .yui-tooltip { |
|
21 position:absolute; |
|
22 } |
|
23 |
|
24 .yui-tooltip-content { |
|
25 color: #000; |
|
26 padding: 2px 5px; |
|
27 border-color: #D4C237 #A6982B #A6982B #A6982B; |
|
28 border-width: 1px; |
|
29 border-style: solid; |
|
30 background-color: #FFEE69; |
|
31 } |
|
32 |
|
33 .yui-tooltip-hidden { |
|
34 visibility:hidden; |
|
35 } |
|
36 |
|
37 div.yui-hastooltip { |
|
38 border:1px solid #243356; |
|
39 background-color:#406ED9; |
|
40 color:#ffffff; |
|
41 width:25em; |
|
42 margin:20px 0px; |
|
43 padding:5px; |
|
44 cursor:default; |
|
45 } |
|
46 |
|
47 div.yui-hastooltip span { |
|
48 font-style:italic; |
|
49 font-weight:bold; |
|
50 color:#ABCEFF; |
|
51 } |
|
52 |
|
53 .yui-tooltip-content strong { |
|
54 font-weight:bold; |
|
55 } |
|
56 </style> |
|
57 |
|
58 </head> |
|
59 <body id="yahoo-com" class=" yui-skin-sam"> |
|
60 <div id="custom-doc" class="yui-t2"> |
|
61 <div id="hd"> |
|
62 <div id="ygunav"> |
|
63 <p> |
|
64 <em> |
|
65 <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
66 </em> |
|
67 </p> |
|
68 <form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
69 <input name="vs" type="hidden" value="developer.yahoo.com"> |
|
70 <input name="vs" type="hidden" value="yuiblog.com"> |
|
71 <div id="sitesearch"> |
|
72 <label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
73 <input type="text" id="searchinput" name="p"> |
|
74 <input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
75 </div> |
|
76 </form> |
|
77 </div> |
|
78 <div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
79 <div id="pagetitle"><h1>YUI Library Examples: Widget: Creating a simple Tooltip widget</h1></div> |
|
80 </div> |
|
81 <div id="bd"> |
|
82 |
|
83 |
|
84 <div id="yui-main"> |
|
85 <div class="yui-b"> |
|
86 <div class="yui-ge"> |
|
87 <div class="yui-u first example" id="main"> |
|
88 |
|
89 <h2>Widget: Creating a simple Tooltip widget</h2> |
|
90 |
|
91 <div id="example" class="promo"> |
|
92 <div class="example-intro"> |
|
93 This is an advanced example, in which we create a Tooltip widget, by extending the base <code>Widget</code> class, and adding <code>WidgetStack</code> and <code>WidgetPosition</code> extensions, through <code>Base.build</code>. </div> |
|
94 |
|
95 <div class="module example-container "> |
|
96 <div class="hd exampleHd"> |
|
97 <p class="newWindowButton yui-skin-sam"> |
|
98 <a href="widget-tooltip_clean.html" target="_blank">View example in new window.</a> |
|
99 </p> |
|
100 </div> <div id="example-canvas" class="bd"> |
|
101 |
|
102 |
|
103 <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
104 |
|
105 <div id="delegate"> |
|
106 <div class="yui-hastooltip" title="Tooltip 1" id="tt1">Tooltip One <span>(content from title)</span></div> |
|
107 <div class="yui-hastooltip" title="Tooltip 2" id="tt2">Tooltip Two <span>(content set in event listener)</span></div> |
|
108 <div class="yui-hastooltip" title="Tooltip 3" id="tt3">Tooltip Three <span>(content from lookup)</span></div> |
|
109 <div class="yui-hastooltip" title="Tooltip 4" id="tt4">Tooltip Four <span>(content from title)</span></div> |
|
110 <label><input type="checkbox" id="prevent" /> Prevent Tooltip Four</label> |
|
111 </div> |
|
112 |
|
113 <script type="text/javascript"> |
|
114 YUI({base:"../../build/", timeout: 10000}).use("widget", "widget-position", "widget-stack", function(Y) { |
|
115 var Lang = Y.Lang, |
|
116 Node = Y.Node; |
|
117 |
|
118 /* Tooltip constructor */ |
|
119 function Tooltip(config) { |
|
120 Tooltip.superclass.constructor.apply(this, arguments); |
|
121 } |
|
122 |
|
123 /* |
|
124 Required NAME static field, used to identify the Widget class and |
|
125 used as an event prefix, to generate class names etc. (set to the |
|
126 class name in camel case). |
|
127 */ |
|
128 Tooltip.NAME = "tooltip"; |
|
129 |
|
130 /* Static constants */ |
|
131 Tooltip.OFFSET_X = 15; |
|
132 Tooltip.OFFSET_Y = 15; |
|
133 Tooltip.OFFSCREEN_X = -10000; |
|
134 Tooltip.OFFSCREEN_Y = -10000; |
|
135 |
|
136 /* Default Tooltip Attributes */ |
|
137 Tooltip.ATTRS = { |
|
138 |
|
139 /* |
|
140 * The tooltip content. This can either be a fixed content value, |
|
141 * or a map of id-to-values, designed to be used when a single |
|
142 * tooltip is mapped to multiple trigger elements. |
|
143 */ |
|
144 content : { |
|
145 value: null |
|
146 }, |
|
147 |
|
148 /* |
|
149 * The set of nodes to bind to the tooltip instance. Can be a string, |
|
150 * or a node instance. |
|
151 */ |
|
152 triggerNodes : { |
|
153 value: null, |
|
154 setter: function(val) { |
|
155 if (val && Lang.isString(val)) { |
|
156 val = Node.all(val); |
|
157 } |
|
158 return val; |
|
159 } |
|
160 }, |
|
161 |
|
162 /* |
|
163 * The delegate node to which event listeners should be attached. |
|
164 * This node should be an ancestor of all trigger nodes bound |
|
165 * to the instance. By default the document is used. |
|
166 */ |
|
167 delegate : { |
|
168 value: null, |
|
169 setter: function(val) { |
|
170 return Y.one(val) || Y.one("document"); |
|
171 } |
|
172 }, |
|
173 |
|
174 /* |
|
175 * The time to wait, after the mouse enters the trigger node, |
|
176 * to display the tooltip |
|
177 */ |
|
178 showDelay : { |
|
179 value:250 |
|
180 }, |
|
181 |
|
182 /* |
|
183 * The time to wait, after the mouse leaves the trigger node, |
|
184 * to hide the tooltip |
|
185 */ |
|
186 hideDelay : { |
|
187 value:10 |
|
188 }, |
|
189 |
|
190 /* |
|
191 * The time to wait, after the tooltip is first displayed for |
|
192 * a trigger node, to hide it, if the mouse has not left the |
|
193 * trigger node |
|
194 */ |
|
195 autoHideDelay : { |
|
196 value:2000 |
|
197 }, |
|
198 |
|
199 /* |
|
200 * Override the default visibility set by the widget base class |
|
201 */ |
|
202 visible : { |
|
203 value:false |
|
204 }, |
|
205 |
|
206 /* |
|
207 * Override the default XY value set by the widget base class, |
|
208 * to position the tooltip offscreen |
|
209 */ |
|
210 xy: { |
|
211 value:[Tooltip.OFFSCREEN_X, Tooltip.OFFSCREEN_Y] |
|
212 } |
|
213 }; |
|
214 |
|
215 /* Extend the base Widget class */ |
|
216 Y.extend(Tooltip, Y.Widget, { |
|
217 |
|
218 /* |
|
219 * Initialization Code: Sets up privately used state |
|
220 * properties, and publishes the events Tooltip introduces |
|
221 */ |
|
222 initializer : function(config) { |
|
223 |
|
224 this._triggerClassName = this.getClassName("trigger"); |
|
225 |
|
226 // Currently bound trigger node information |
|
227 this._currTrigger = { |
|
228 node: null, |
|
229 title: null, |
|
230 mouseX: Tooltip.OFFSCREEN_X, |
|
231 mouseY: Tooltip.OFFSCREEN_Y |
|
232 }; |
|
233 |
|
234 // Event handles - mouse over is set on the delegate |
|
235 // element, mousemove and mouseout are set on the trigger node |
|
236 this._eventHandles = { |
|
237 delegate: null, |
|
238 trigger: { |
|
239 mouseMove : null, |
|
240 mouseOut: null |
|
241 } |
|
242 }; |
|
243 |
|
244 // Show/hide timers |
|
245 this._timers = { |
|
246 show: null, |
|
247 hide: null |
|
248 }; |
|
249 |
|
250 // Publish events introduced by Tooltip. Note the triggerEnter event is preventable, |
|
251 // with the default behavior defined in the _defTriggerEnterFn method |
|
252 this.publish("triggerEnter", {defaultFn: this._defTriggerEnterFn, preventable:true}); |
|
253 this.publish("triggerLeave", {preventable:false}); |
|
254 }, |
|
255 |
|
256 /* |
|
257 * Destruction Code: Clears event handles, timers, |
|
258 * and current trigger information |
|
259 */ |
|
260 destructor : function() { |
|
261 this._clearCurrentTrigger(); |
|
262 this._clearTimers(); |
|
263 this._clearHandles(); |
|
264 }, |
|
265 |
|
266 /* |
|
267 * bindUI is used to bind attribute change and dom event |
|
268 * listeners |
|
269 */ |
|
270 bindUI : function() { |
|
271 this.after("delegateChange", this._afterSetDelegate); |
|
272 this.after("nodesChange", this._afterSetNodes); |
|
273 |
|
274 this._bindDelegate(); |
|
275 }, |
|
276 |
|
277 /* |
|
278 * syncUI is used to update the rendered DOM, based on the current |
|
279 * Tooltip state |
|
280 */ |
|
281 syncUI : function() { |
|
282 this._uiSetNodes(this.get("triggerNodes")); |
|
283 }, |
|
284 |
|
285 /* |
|
286 * Public method, which can be used by triggerEvent event listeners |
|
287 * to set the content of the tooltip for the current trigger node |
|
288 */ |
|
289 setTriggerContent : function(content) { |
|
290 var contentBox = this.get("contentBox"); |
|
291 contentBox.set("innerHTML", ""); |
|
292 |
|
293 if (content) { |
|
294 if (content instanceof Node) { |
|
295 for (var i = 0, l = content.size(); i < l; ++i) { |
|
296 contentBox.appendChild(content.item(i)); |
|
297 } |
|
298 } else if (Lang.isString(content)) { |
|
299 contentBox.set("innerHTML", content); |
|
300 } |
|
301 } |
|
302 }, |
|
303 |
|
304 /* |
|
305 * Gets the closest ancestor of the given node, |
|
306 * which is a tooltip trigger node |
|
307 */ |
|
308 getParentTrigger : function(node) { |
|
309 var cn = this._triggerClassName; |
|
310 return (node.hasClass(cn)) ? node : node.ancestor(function(node) {return node.hasClass(cn)}); |
|
311 }, |
|
312 |
|
313 /* |
|
314 * Default attribute change listener for |
|
315 * the triggerNodes attribute |
|
316 */ |
|
317 _afterSetNodes : function(e) { |
|
318 this._uiSetNodes(e.newVal); |
|
319 }, |
|
320 |
|
321 /* |
|
322 * Default attribute change listener for |
|
323 * the delegate attribute |
|
324 */ |
|
325 _afterSetDelegate : function(e) { |
|
326 this._bindDelegate(e.newVal); |
|
327 }, |
|
328 |
|
329 /* |
|
330 * Updates the rendered DOM to reflect the |
|
331 * set of trigger nodes passed in |
|
332 */ |
|
333 _uiSetNodes : function(nodes) { |
|
334 if (this._triggerNodes) { |
|
335 this._triggerNodes.removeClass(this._triggerClassName); |
|
336 } |
|
337 |
|
338 if (nodes) { |
|
339 this._triggerNodes = nodes; |
|
340 this._triggerNodes.addClass(this._triggerClassName); |
|
341 } |
|
342 }, |
|
343 |
|
344 /* |
|
345 * Attaches the default mouseover DOM listener to the |
|
346 * current delegate node |
|
347 */ |
|
348 _bindDelegate : function() { |
|
349 var eventHandles = this._eventHandles; |
|
350 |
|
351 if (eventHandles.delegate) { |
|
352 eventHandles.delegate.detach(); |
|
353 eventHandles.delegate = null; |
|
354 } |
|
355 eventHandles.delegate = Y.on("mouseover", Y.bind(this._onDelegateMouseOver, this), this.get("delegate")); |
|
356 }, |
|
357 |
|
358 /* |
|
359 * Default mouse over DOM event listener. |
|
360 * |
|
361 * Delegates to the _enterTrigger method, |
|
362 * if the mouseover enters a trigger node. |
|
363 */ |
|
364 _onDelegateMouseOver : function(e) { |
|
365 var node = this.getParentTrigger(e.target); |
|
366 if (node && (!this._currTrigger.node || !node.compareTo(this._currTrigger.node))) { |
|
367 this._enterTrigger(node, e.pageX, e.pageY); |
|
368 } |
|
369 }, |
|
370 |
|
371 /* |
|
372 * Default mouse out DOM event listener |
|
373 * |
|
374 * Delegates to _leaveTrigger if the mouseout |
|
375 * leaves the current trigger node |
|
376 */ |
|
377 _onNodeMouseOut : function(e) { |
|
378 var to = e.relatedTarget; |
|
379 var trigger = e.currentTarget; |
|
380 |
|
381 if (!trigger.contains(to)) { |
|
382 this._leaveTrigger(trigger); |
|
383 } |
|
384 }, |
|
385 |
|
386 /* |
|
387 * Default mouse move DOM event listener |
|
388 */ |
|
389 _onNodeMouseMove : function(e) { |
|
390 this._overTrigger(e.pageX, e.pageY); |
|
391 }, |
|
392 |
|
393 /* |
|
394 * Default handler invoked when the mouse enters |
|
395 * a trigger node. Fires the triggerEnter |
|
396 * event which can be prevented by listeners to |
|
397 * show the tooltip from being displayed. |
|
398 */ |
|
399 _enterTrigger : function(node, x, y) { |
|
400 this._setCurrentTrigger(node, x, y); |
|
401 this.fire("triggerEnter", {node:node, pageX:x, pageY:y}); |
|
402 }, |
|
403 |
|
404 /* |
|
405 * Default handler for the triggerEvent event, |
|
406 * which will setup the timer to display the tooltip, |
|
407 * if the default handler has not been prevented. |
|
408 */ |
|
409 _defTriggerEnterFn : function(e) { |
|
410 var node = e.node; |
|
411 if (!this.get("disabled")) { |
|
412 this._clearTimers(); |
|
413 var delay = (this.get("visible")) ? 0 : this.get("showDelay"); |
|
414 this._timers.show = Y.later(delay, this, this._showTooltip, [node]); |
|
415 } |
|
416 }, |
|
417 |
|
418 /* |
|
419 * Default handler invoked when the mouse leaves |
|
420 * the current trigger node. Fires the triggerLeave |
|
421 * event and sets up the hide timer |
|
422 */ |
|
423 _leaveTrigger : function(node) { |
|
424 this.fire("triggerLeave"); |
|
425 |
|
426 this._clearCurrentTrigger(); |
|
427 this._clearTimers(); |
|
428 |
|
429 this._timers.hide = Y.later(this.get("hideDelay"), this, this._hideTooltip); |
|
430 }, |
|
431 |
|
432 /* |
|
433 * Default handler invoked for mousemove events |
|
434 * on the trigger node. Stores the current mouse |
|
435 * x, y positions |
|
436 */ |
|
437 _overTrigger : function(x, y) { |
|
438 this._currTrigger.mouseX = x; |
|
439 this._currTrigger.mouseY = y; |
|
440 }, |
|
441 |
|
442 /* |
|
443 * Shows the tooltip, after moving it to the current mouse |
|
444 * position. |
|
445 */ |
|
446 _showTooltip : function(node) { |
|
447 var x = this._currTrigger.mouseX; |
|
448 var y = this._currTrigger.mouseY; |
|
449 |
|
450 this.move(x + Tooltip.OFFSET_X, y + Tooltip.OFFSET_Y); |
|
451 |
|
452 this.show(); |
|
453 this._clearTimers(); |
|
454 |
|
455 this._timers.hide = Y.later(this.get("autoHideDelay"), this, this._hideTooltip); |
|
456 }, |
|
457 |
|
458 /* |
|
459 * Hides the tooltip, after clearing existing timers. |
|
460 */ |
|
461 _hideTooltip : function() { |
|
462 this._clearTimers(); |
|
463 this.hide(); |
|
464 }, |
|
465 |
|
466 /* |
|
467 * Set the rendered content of the tooltip for the current |
|
468 * trigger, based on (in order of precedence): |
|
469 * |
|
470 * a). The string/node content attribute value |
|
471 * b). From the content lookup map if it is set, or |
|
472 * c). From the title attribute if set. |
|
473 */ |
|
474 _setTriggerContent : function(node) { |
|
475 var content = this.get("content"); |
|
476 if (content && !(content instanceof Node || Lang.isString(content))) { |
|
477 content = content[node.get("id")] || node.getAttribute("title"); |
|
478 } |
|
479 this.setTriggerContent(content); |
|
480 }, |
|
481 |
|
482 /* |
|
483 * Set the currently bound trigger node information, clearing |
|
484 * out the title attribute if set and setting up mousemove/out |
|
485 * listeners. |
|
486 */ |
|
487 _setCurrentTrigger : function(node, x, y) { |
|
488 |
|
489 var currTrigger = this._currTrigger, |
|
490 triggerHandles = this._eventHandles.trigger; |
|
491 |
|
492 this._setTriggerContent(node); |
|
493 |
|
494 triggerHandles.mouseMove = Y.on("mousemove", Y.bind(this._onNodeMouseMove, this), node); |
|
495 triggerHandles.mouseOut = Y.on("mouseout", Y.bind(this._onNodeMouseOut, this), node); |
|
496 |
|
497 var title = node.getAttribute("title"); |
|
498 node.setAttribute("title", ""); |
|
499 |
|
500 currTrigger.mouseX = x; |
|
501 currTrigger.mouseY = y; |
|
502 currTrigger.node = node; |
|
503 currTrigger.title = title; |
|
504 }, |
|
505 |
|
506 /* |
|
507 * Clear out the current trigger state, restoring |
|
508 * the title attribute on the trigger node, |
|
509 * if it was originally set. |
|
510 */ |
|
511 _clearCurrentTrigger : function() { |
|
512 |
|
513 var currTrigger = this._currTrigger, |
|
514 triggerHandles = this._eventHandles.trigger; |
|
515 |
|
516 if (currTrigger.node) { |
|
517 var node = currTrigger.node; |
|
518 var title = currTrigger.title || ""; |
|
519 |
|
520 currTrigger.node = null; |
|
521 currTrigger.title = ""; |
|
522 |
|
523 triggerHandles.mouseMove.detach(); |
|
524 triggerHandles.mouseOut.detach(); |
|
525 triggerHandles.mouseMove = null; |
|
526 triggerHandles.mouseOut = null; |
|
527 |
|
528 node.setAttribute("title", title); |
|
529 } |
|
530 }, |
|
531 |
|
532 /* |
|
533 * Cancel any existing show/hide timers |
|
534 */ |
|
535 _clearTimers : function() { |
|
536 var timers = this._timers; |
|
537 if (timers.hide) { |
|
538 timers.hide.cancel(); |
|
539 timers.hide = null; |
|
540 } |
|
541 if (timers.show) { |
|
542 timers.show.cancel(); |
|
543 timers.show = null; |
|
544 } |
|
545 }, |
|
546 |
|
547 /* |
|
548 * Detach any stored event handles |
|
549 */ |
|
550 _clearHandles : function() { |
|
551 var eventHandles = this._eventHandles; |
|
552 |
|
553 if (eventHandles.delegate) { |
|
554 this._eventHandles.delegate.detach(); |
|
555 } |
|
556 if (eventHandles.trigger.mouseOut) { |
|
557 eventHandles.trigger.mouseOut.detach(); |
|
558 } |
|
559 if (eventHandles.trigger.mouseMove) { |
|
560 eventHandles.trigger.mouseMove.detach(); |
|
561 } |
|
562 } |
|
563 }); |
|
564 |
|
565 // dynamic:false = Modify the existing Tooltip class |
|
566 Tooltip = Y.Base.build(Tooltip.NAME, Tooltip, [Y.WidgetPosition, Y.WidgetStack], {dynamic:false}); |
|
567 |
|
568 var tt = new Tooltip({ |
|
569 triggerNodes:".yui-hastooltip", |
|
570 delegate: "#delegate", |
|
571 content: { |
|
572 tt3: "Tooltip 3 (from lookup)" |
|
573 }, |
|
574 shim:false, |
|
575 zIndex:2 |
|
576 }); |
|
577 tt.render(); |
|
578 |
|
579 tt.on("triggerEnter", function(e) { |
|
580 var node = e.node; |
|
581 if (node && node.get("id") == "tt2") { |
|
582 this.setTriggerContent("Tooltip 2 (from triggerEvent)"); |
|
583 } |
|
584 }); |
|
585 |
|
586 var prevent = Y.one("#prevent"); |
|
587 tt.on("triggerEnter", function(e) { |
|
588 var node = e.node; |
|
589 if (prevent.get("checked")) { |
|
590 if (node && node.get("id") == "tt4") { |
|
591 e.preventDefault(); |
|
592 } |
|
593 } |
|
594 }); |
|
595 }); |
|
596 </script> |
|
597 |
|
598 <!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
599 |
|
600 |
|
601 </div> |
|
602 </div> |
|
603 </div> |
|
604 |
|
605 <h3>Creating A Tooltip Widget Class</h3> |
|
606 |
|
607 <h4>Basic Class Structure</h4> |
|
608 |
|
609 <p>As with the basic <a href="widget-extend.html">"Extending Widget"</a> example, the <code>Tooltip</code> class will extend the <code>Widget</code> base class and follows the same pattern we use for other classes which extend Base.</p> |
|
610 |
|
611 <p>Namely:</p> |
|
612 |
|
613 <ul> |
|
614 <li>Set up the constructor to invoke the superclass constructor</li> |
|
615 <li>Define a <code>NAME</code> property, to identify the class</li> |
|
616 <li>Define the default attribute configuration, using the <code>ATTRS</code> property</li> |
|
617 <li>Implement prototype methods</li> |
|
618 </ul> |
|
619 |
|
620 <p>This basic structure is shown below:</p> |
|
621 |
|
622 <div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * Required NAME static field, used to identify the Widget class and </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * used as an event prefix, to generate class names etc. (set to the </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * class name in camel case). </span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1">Tooltip.<span class="kw3">NAME</span> <span class="sy0">=</span> <span class="st0">"tooltip"</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co2">/* Default Tooltip Attributes */</span></div></li><li class="li1"><div class="de1">Tooltip.<span class="me1">ATTRS</span> <span class="sy0">=</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="coMULTI">/* </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * The tooltip content. This can either be a fixed content value, </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * or a map of id-to-values, designed to be used when a single</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * tooltip is mapped to multiple trigger elements.</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"> content <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> value<span class="sy0">:</span> <span class="kw2">null</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="coMULTI">/* </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * The set of nodes to bind to the tooltip instance. Can be a string, </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * or a node instance.</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"> triggerNodes <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> value<span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> setter<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>val <span class="sy0">&&</span> Lang.<span class="me1">isString</span><span class="br0">(</span>val<span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> val <span class="sy0">=</span> Node.<span class="me1">all</span><span class="br0">(</span>val<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> <span class="kw1">return</span> val<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="coMULTI">/*</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> * The delegate node to which event listeners should be attached.</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * This node should be an ancestor of all trigger nodes bound</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * to the instance. By default the document is used.</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"> delegate <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> value<span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> setter<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> Y.<span class="me1">one</span><span class="br0">(</span>val<span class="br0">)</span> <span class="sy0">||</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"document"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * The time to wait, after the mouse enters the trigger node,</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * to display the tooltip</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li2"><div class="de2"> showDelay <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> value<span class="sy0">:</span><span class="nu0">250</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="coMULTI">/*</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> * The time to wait, after the mouse leaves the trigger node,</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * to hide the tooltip</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"> hideDelay <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> value<span class="sy0">:</span><span class="nu0">10</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * The time to wait, after the tooltip is first displayed for </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * a trigger node, to hide it, if the mouse has not left the </span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> * trigger node</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"> autoHideDelay <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> value<span class="sy0">:</span><span class="nu0">2000</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * Override the default visibility set by the widget base class</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"> visible <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> value<span class="sy0">:</span><span class="kw2">false</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * Override the default XY value set by the widget base class,</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> * to position the tooltip offscreen</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"> xy<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> value<span class="sy0">:</span><span class="br0">[</span>Tooltip.<span class="me1">OFFSCREEN_X</span><span class="sy0">,</span> Tooltip.<span class="me1">OFFSCREEN_Y</span><span class="br0">]</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">Y.<span class="me1">extend</span><span class="br0">(</span>Tooltip<span class="sy0">,</span> Y.<span class="me1">Widget</span><span class="sy0">,</span> <span class="br0">{</span> </div></li><li class="li1"><div class="de1"> <span class="co1">// Prototype methods/properties</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="coMULTI">/* |
|
623 * Required NAME static field, used to identify the Widget class and |
|
624 * used as an event prefix, to generate class names etc. (set to the |
|
625 * class name in camel case). |
|
626 */</span> |
|
627 Tooltip.<span class="kw3">NAME</span> <span class="sy0">=</span> <span class="st0">"tooltip"</span><span class="sy0">;</span> |
|
628 |
|
629 <span class="co2">/* Default Tooltip Attributes */</span> |
|
630 Tooltip.<span class="me1">ATTRS</span> <span class="sy0">=</span> <span class="br0">{</span> |
|
631 |
|
632 <span class="coMULTI">/* |
|
633 * The tooltip content. This can either be a fixed content value, |
|
634 * or a map of id-to-values, designed to be used when a single |
|
635 * tooltip is mapped to multiple trigger elements. |
|
636 */</span> |
|
637 content <span class="sy0">:</span> <span class="br0">{</span> |
|
638 value<span class="sy0">:</span> <span class="kw2">null</span> |
|
639 <span class="br0">}</span><span class="sy0">,</span> |
|
640 |
|
641 <span class="coMULTI">/* |
|
642 * The set of nodes to bind to the tooltip instance. Can be a string, |
|
643 * or a node instance. |
|
644 */</span> |
|
645 triggerNodes <span class="sy0">:</span> <span class="br0">{</span> |
|
646 value<span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span> |
|
647 setter<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span> |
|
648 <span class="kw1">if</span> <span class="br0">(</span>val <span class="sy0">&&</span> Lang.<span class="me1">isString</span><span class="br0">(</span>val<span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span> |
|
649 val <span class="sy0">=</span> Node.<span class="me1">all</span><span class="br0">(</span>val<span class="br0">)</span><span class="sy0">;</span> |
|
650 <span class="br0">}</span> |
|
651 <span class="kw1">return</span> val<span class="sy0">;</span> |
|
652 <span class="br0">}</span> |
|
653 <span class="br0">}</span><span class="sy0">,</span> |
|
654 |
|
655 <span class="coMULTI">/* |
|
656 * The delegate node to which event listeners should be attached. |
|
657 * This node should be an ancestor of all trigger nodes bound |
|
658 * to the instance. By default the document is used. |
|
659 */</span> |
|
660 delegate <span class="sy0">:</span> <span class="br0">{</span> |
|
661 value<span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span> |
|
662 setter<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span> |
|
663 <span class="kw1">return</span> Y.<span class="me1">one</span><span class="br0">(</span>val<span class="br0">)</span> <span class="sy0">||</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"document"</span><span class="br0">)</span><span class="sy0">;</span> |
|
664 <span class="br0">}</span> |
|
665 <span class="br0">}</span><span class="sy0">,</span> |
|
666 |
|
667 <span class="coMULTI">/* |
|
668 * The time to wait, after the mouse enters the trigger node, |
|
669 * to display the tooltip |
|
670 */</span> |
|
671 showDelay <span class="sy0">:</span> <span class="br0">{</span> |
|
672 value<span class="sy0">:</span><span class="nu0">250</span> |
|
673 <span class="br0">}</span><span class="sy0">,</span> |
|
674 |
|
675 <span class="coMULTI">/* |
|
676 * The time to wait, after the mouse leaves the trigger node, |
|
677 * to hide the tooltip |
|
678 */</span> |
|
679 hideDelay <span class="sy0">:</span> <span class="br0">{</span> |
|
680 value<span class="sy0">:</span><span class="nu0">10</span> |
|
681 <span class="br0">}</span><span class="sy0">,</span> |
|
682 |
|
683 <span class="coMULTI">/* |
|
684 * The time to wait, after the tooltip is first displayed for |
|
685 * a trigger node, to hide it, if the mouse has not left the |
|
686 * trigger node |
|
687 */</span> |
|
688 autoHideDelay <span class="sy0">:</span> <span class="br0">{</span> |
|
689 value<span class="sy0">:</span><span class="nu0">2000</span> |
|
690 <span class="br0">}</span><span class="sy0">,</span> |
|
691 |
|
692 <span class="coMULTI">/* |
|
693 * Override the default visibility set by the widget base class |
|
694 */</span> |
|
695 visible <span class="sy0">:</span> <span class="br0">{</span> |
|
696 value<span class="sy0">:</span><span class="kw2">false</span> |
|
697 <span class="br0">}</span><span class="sy0">,</span> |
|
698 |
|
699 <span class="coMULTI">/* |
|
700 * Override the default XY value set by the widget base class, |
|
701 * to position the tooltip offscreen |
|
702 */</span> |
|
703 xy<span class="sy0">:</span> <span class="br0">{</span> |
|
704 value<span class="sy0">:</span><span class="br0">[</span>Tooltip.<span class="me1">OFFSCREEN_X</span><span class="sy0">,</span> Tooltip.<span class="me1">OFFSCREEN_Y</span><span class="br0">]</span> |
|
705 <span class="br0">}</span> |
|
706 <span class="br0">}</span><span class="sy0">;</span> |
|
707 |
|
708 Y.<span class="me1">extend</span><span class="br0">(</span>Tooltip<span class="sy0">,</span> Y.<span class="me1">Widget</span><span class="sy0">,</span> <span class="br0">{</span> |
|
709 <span class="co1">// Prototype methods/properties</span> |
|
710 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax1-plain">/* |
|
711 * Required NAME static field, used to identify the Widget class and |
|
712 * used as an event prefix, to generate class names etc. (set to the |
|
713 * class name in camel case). |
|
714 */ |
|
715 Tooltip.NAME = "tooltip"; |
|
716 |
|
717 /* Default Tooltip Attributes */ |
|
718 Tooltip.ATTRS = { |
|
719 |
|
720 /* |
|
721 * The tooltip content. This can either be a fixed content value, |
|
722 * or a map of id-to-values, designed to be used when a single |
|
723 * tooltip is mapped to multiple trigger elements. |
|
724 */ |
|
725 content : { |
|
726 value: null |
|
727 }, |
|
728 |
|
729 /* |
|
730 * The set of nodes to bind to the tooltip instance. Can be a string, |
|
731 * or a node instance. |
|
732 */ |
|
733 triggerNodes : { |
|
734 value: null, |
|
735 setter: function(val) { |
|
736 if (val && Lang.isString(val)) { |
|
737 val = Node.all(val); |
|
738 } |
|
739 return val; |
|
740 } |
|
741 }, |
|
742 |
|
743 /* |
|
744 * The delegate node to which event listeners should be attached. |
|
745 * This node should be an ancestor of all trigger nodes bound |
|
746 * to the instance. By default the document is used. |
|
747 */ |
|
748 delegate : { |
|
749 value: null, |
|
750 setter: function(val) { |
|
751 return Y.one(val) || Y.one("document"); |
|
752 } |
|
753 }, |
|
754 |
|
755 /* |
|
756 * The time to wait, after the mouse enters the trigger node, |
|
757 * to display the tooltip |
|
758 */ |
|
759 showDelay : { |
|
760 value:250 |
|
761 }, |
|
762 |
|
763 /* |
|
764 * The time to wait, after the mouse leaves the trigger node, |
|
765 * to hide the tooltip |
|
766 */ |
|
767 hideDelay : { |
|
768 value:10 |
|
769 }, |
|
770 |
|
771 /* |
|
772 * The time to wait, after the tooltip is first displayed for |
|
773 * a trigger node, to hide it, if the mouse has not left the |
|
774 * trigger node |
|
775 */ |
|
776 autoHideDelay : { |
|
777 value:2000 |
|
778 }, |
|
779 |
|
780 /* |
|
781 * Override the default visibility set by the widget base class |
|
782 */ |
|
783 visible : { |
|
784 value:false |
|
785 }, |
|
786 |
|
787 /* |
|
788 * Override the default XY value set by the widget base class, |
|
789 * to position the tooltip offscreen |
|
790 */ |
|
791 xy: { |
|
792 value:[Tooltip.OFFSCREEN_X, Tooltip.OFFSCREEN_Y] |
|
793 } |
|
794 }; |
|
795 |
|
796 Y.extend(Tooltip, Y.Widget, { |
|
797 // Prototype methods/properties |
|
798 });</textarea></div> |
|
799 <h4>Adding WidgetPosition and WidgetStack Extension Support</h4> |
|
800 |
|
801 <p>The Tooltip class also needs basic positioning and stacking (z-index, shimming) support. As with the <a href="widget-build.html">Custom Widget Classes</a> example, we use |
|
802 <code>Base.build</code> to add this support to the <code>Tooltip</code> class. However in this case, we want to modify the Tooltip class, as opposed to extending it |
|
803 to create a completely new class, hence we set the <code>dynamic</code> configuration property to <code>false</code>:</p> |
|
804 |
|
805 <div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// dynamic:false = Modify the existing Tooltip class</span></div></li><li class="li1"><div class="de1">Tooltip <span class="sy0">=</span> Y.<span class="me1">Base</span>.<span class="me1">build</span><span class="br0">(</span><span class="st0">"tooltip"</span><span class="sy0">,</span> Tooltip<span class="sy0">,</span> <span class="br0">[</span>Y.<span class="me1">WidgetPosition</span><span class="sy0">,</span> Y.<span class="me1">WidgetStack</span><span class="br0">]</span><span class="sy0">,</span> <span class="br0">{</span>dynamic<span class="sy0">:</span><span class="kw2">false</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// dynamic:false = Modify the existing Tooltip class</span> |
|
806 Tooltip <span class="sy0">=</span> Y.<span class="me1">Base</span>.<span class="me1">build</span><span class="br0">(</span><span class="st0">"tooltip"</span><span class="sy0">,</span> Tooltip<span class="sy0">,</span> <span class="br0">[</span>Y.<span class="me1">WidgetPosition</span><span class="sy0">,</span> Y.<span class="me1">WidgetStack</span><span class="br0">]</span><span class="sy0">,</span> <span class="br0">{</span>dynamic<span class="sy0">:</span><span class="kw2">false</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax2-plain">// dynamic:false = Modify the existing Tooltip class |
|
807 Tooltip = Y.Base.build("tooltip", Tooltip, [Y.WidgetPosition, Y.WidgetStack], {dynamic:false});</textarea></div> |
|
808 <h4>Lifecycle Methods: initializer, destructor</h4> |
|
809 |
|
810 <p>The <code>initializer</code> method is invoked during the <code>init</code> lifecycle phase, after the attributes are configured for each class. <code>Tooltip</code> uses it |
|
811 to setup the private state variables it will use to store the trigger node currently being serviced by the tooltip instance, event handles and show/hide timers.</p> |
|
812 |
|
813 <div id="syntax3" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">initializer <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>config<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._triggerClassName <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">getClassName</span><span class="br0">(</span><span class="st0">"trigger"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// Currently bound trigger node information</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._currTrigger <span class="sy0">=</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> node<span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> title<span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> mouseX<span class="sy0">:</span> Tooltip.<span class="me1">OFFSCREEN_X</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> mouseY<span class="sy0">:</span> Tooltip.<span class="me1">OFFSCREEN_Y</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Event handles - mouse over is set on the delegate</span></div></li><li class="li1"><div class="de1"> <span class="co1">// element, mousemove and mouseout are set on the trigger node</span></div></li><li class="li2"><div class="de2"> <span class="kw1">this</span>._eventHandles <span class="sy0">=</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> delegate<span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> trigger<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> mouseMove <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> mouseOut<span class="sy0">:</span> <span class="kw2">null</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Show/hide timers</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._timers <span class="sy0">=</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> show<span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> hide<span class="sy0">:</span> <span class="kw2">null</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Publish events introduced by Tooltip. Note the triggerEnter event is preventable,</span></div></li><li class="li2"><div class="de2"> <span class="co1">// with the default behavior defined in the _defTriggerEnterFn method </span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">publish</span><span class="br0">(</span><span class="st0">"triggerEnter"</span><span class="sy0">,</span> <span class="br0">{</span>defaultFn<span class="sy0">:</span> <span class="kw1">this</span>._defTriggerEnterFn<span class="sy0">,</span> preventable<span class="sy0">:</span><span class="kw2">true</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">publish</span><span class="br0">(</span><span class="st0">"triggerLeave"</span><span class="sy0">,</span> <span class="br0">{</span>preventable<span class="sy0">:</span><span class="kw2">false</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">initializer <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>config<span class="br0">)</span> <span class="br0">{</span> |
|
814 |
|
815 <span class="kw1">this</span>._triggerClassName <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">getClassName</span><span class="br0">(</span><span class="st0">"trigger"</span><span class="br0">)</span><span class="sy0">;</span> |
|
816 |
|
817 <span class="co1">// Currently bound trigger node information</span> |
|
818 <span class="kw1">this</span>._currTrigger <span class="sy0">=</span> <span class="br0">{</span> |
|
819 node<span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span> |
|
820 title<span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span> |
|
821 mouseX<span class="sy0">:</span> Tooltip.<span class="me1">OFFSCREEN_X</span><span class="sy0">,</span> |
|
822 mouseY<span class="sy0">:</span> Tooltip.<span class="me1">OFFSCREEN_Y</span> |
|
823 <span class="br0">}</span><span class="sy0">;</span> |
|
824 |
|
825 <span class="co1">// Event handles - mouse over is set on the delegate</span> |
|
826 <span class="co1">// element, mousemove and mouseout are set on the trigger node</span> |
|
827 <span class="kw1">this</span>._eventHandles <span class="sy0">=</span> <span class="br0">{</span> |
|
828 delegate<span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span> |
|
829 trigger<span class="sy0">:</span> <span class="br0">{</span> |
|
830 mouseMove <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span> |
|
831 mouseOut<span class="sy0">:</span> <span class="kw2">null</span> |
|
832 <span class="br0">}</span> |
|
833 <span class="br0">}</span><span class="sy0">;</span> |
|
834 |
|
835 <span class="co1">// Show/hide timers</span> |
|
836 <span class="kw1">this</span>._timers <span class="sy0">=</span> <span class="br0">{</span> |
|
837 show<span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span> |
|
838 hide<span class="sy0">:</span> <span class="kw2">null</span> |
|
839 <span class="br0">}</span><span class="sy0">;</span> |
|
840 |
|
841 <span class="co1">// Publish events introduced by Tooltip. Note the triggerEnter event is preventable,</span> |
|
842 <span class="co1">// with the default behavior defined in the _defTriggerEnterFn method </span> |
|
843 <span class="kw1">this</span>.<span class="me1">publish</span><span class="br0">(</span><span class="st0">"triggerEnter"</span><span class="sy0">,</span> <span class="br0">{</span>defaultFn<span class="sy0">:</span> <span class="kw1">this</span>._defTriggerEnterFn<span class="sy0">,</span> preventable<span class="sy0">:</span><span class="kw2">true</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
844 <span class="kw1">this</span>.<span class="me1">publish</span><span class="br0">(</span><span class="st0">"triggerLeave"</span><span class="sy0">,</span> <span class="br0">{</span>preventable<span class="sy0">:</span><span class="kw2">false</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
845 <span class="br0">}</span></pre></div><textarea id="syntax3-plain">initializer : function(config) { |
|
846 |
|
847 this._triggerClassName = this.getClassName("trigger"); |
|
848 |
|
849 // Currently bound trigger node information |
|
850 this._currTrigger = { |
|
851 node: null, |
|
852 title: null, |
|
853 mouseX: Tooltip.OFFSCREEN_X, |
|
854 mouseY: Tooltip.OFFSCREEN_Y |
|
855 }; |
|
856 |
|
857 // Event handles - mouse over is set on the delegate |
|
858 // element, mousemove and mouseout are set on the trigger node |
|
859 this._eventHandles = { |
|
860 delegate: null, |
|
861 trigger: { |
|
862 mouseMove : null, |
|
863 mouseOut: null |
|
864 } |
|
865 }; |
|
866 |
|
867 // Show/hide timers |
|
868 this._timers = { |
|
869 show: null, |
|
870 hide: null |
|
871 }; |
|
872 |
|
873 // Publish events introduced by Tooltip. Note the triggerEnter event is preventable, |
|
874 // with the default behavior defined in the _defTriggerEnterFn method |
|
875 this.publish("triggerEnter", {defaultFn: this._defTriggerEnterFn, preventable:true}); |
|
876 this.publish("triggerLeave", {preventable:false}); |
|
877 }</textarea></div> |
|
878 <p>The <code>destructor</code> is used to clear out stored state, detach any event handles and clear out the show/hide timers:</p> |
|
879 |
|
880 <div id="syntax4" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">destructor <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._clearCurrentTrigger<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._clearTimers<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._clearHandles<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">destructor <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
881 <span class="kw1">this</span>._clearCurrentTrigger<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
882 <span class="kw1">this</span>._clearTimers<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
883 <span class="kw1">this</span>._clearHandles<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
884 <span class="br0">}</span></pre></div><textarea id="syntax4-plain">destructor : function() { |
|
885 this._clearCurrentTrigger(); |
|
886 this._clearTimers(); |
|
887 this._clearHandles(); |
|
888 }</textarea></div> |
|
889 <h4>Lifecycle Methods: bindUI, syncUI</h4> |
|
890 |
|
891 <p>The <code>bindUI</code> and <code>syncUI</code> are invoked by the base Widget class' <code>renderer</code> method.</p> |
|
892 |
|
893 <p><code>bindUI</code> is used to bind the attribute change listeners used to update the rendered UI from the current state of the widget and also to bind |
|
894 the DOM listeners required to enable the UI for interaction.</p> |
|
895 |
|
896 <p><code>syncUI</code> is used to sync the UI state from the current widget state, when initially rendered.</p> |
|
897 |
|
898 <p><em>NOTE:</em> Widget's <code>renderer</code> method also invokes the <code>renderUI</code> method, which is responsible for laying down any additional content elements a widget requires. However |
|
899 tooltip does not have any additional elements in needs to add to the DOM, outside of the default Widget boundingBox and contentBox.</p> |
|
900 |
|
901 <div id="syntax5" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">bindUI <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">after</span><span class="br0">(</span><span class="st0">"delegateChange"</span><span class="sy0">,</span> <span class="kw1">this</span>._afterSetDelegate<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">after</span><span class="br0">(</span><span class="st0">"nodesChange"</span><span class="sy0">,</span> <span class="kw1">this</span>._afterSetNodes<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw1">this</span>._bindDelegate<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">syncUI <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._uiSetNodes<span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"triggerNodes"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">bindUI <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
902 <span class="kw1">this</span>.<span class="me1">after</span><span class="br0">(</span><span class="st0">"delegateChange"</span><span class="sy0">,</span> <span class="kw1">this</span>._afterSetDelegate<span class="br0">)</span><span class="sy0">;</span> |
|
903 <span class="kw1">this</span>.<span class="me1">after</span><span class="br0">(</span><span class="st0">"nodesChange"</span><span class="sy0">,</span> <span class="kw1">this</span>._afterSetNodes<span class="br0">)</span><span class="sy0">;</span> |
|
904 |
|
905 <span class="kw1">this</span>._bindDelegate<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
906 <span class="br0">}</span><span class="sy0">,</span> |
|
907 |
|
908 syncUI <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
909 <span class="kw1">this</span>._uiSetNodes<span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"triggerNodes"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> |
|
910 <span class="br0">}</span></pre></div><textarea id="syntax5-plain">bindUI : function() { |
|
911 this.after("delegateChange", this._afterSetDelegate); |
|
912 this.after("nodesChange", this._afterSetNodes); |
|
913 |
|
914 this._bindDelegate(); |
|
915 }, |
|
916 |
|
917 syncUI : function() { |
|
918 this._uiSetNodes(this.get("triggerNodes")); |
|
919 }</textarea></div> |
|
920 <h4>Attribute Supporting Methods</h4> |
|
921 |
|
922 <p>Tooltip's <code>triggerNodes</code>, which defines the set of nodes which should trigger this tooltip instance, |
|
923 has a couple of supporting methods associated with it.</p> |
|
924 |
|
925 <p>The <code>_afterSetNodes</code> method is the default attribute change event handler for the <code>triggerNodes</code> |
|
926 attribute. It invokes the <code>_uiSetNodes</code> method, which marks all trigger nodes with a trigger class name (<code>yui-tooltip-trigger</code>) when set.</p> |
|
927 |
|
928 <div id="syntax6" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">_afterSetNodes <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._uiSetNodes<span class="br0">(</span>e.<span class="me1">newVal</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2">_uiSetNodes <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>nodes<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="kw1">this</span>._triggerNodes<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._triggerNodes.<span class="me1">removeClass</span><span class="br0">(</span><span class="kw1">this</span>._triggerClassName<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw1">if</span> <span class="br0">(</span>nodes<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._triggerNodes <span class="sy0">=</span> nodes<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._triggerNodes.<span class="me1">addClass</span><span class="br0">(</span><span class="kw1">this</span>._triggerClassName<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">_afterSetNodes <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
929 <span class="kw1">this</span>._uiSetNodes<span class="br0">(</span>e.<span class="me1">newVal</span><span class="br0">)</span><span class="sy0">;</span> |
|
930 <span class="br0">}</span><span class="sy0">,</span> |
|
931 |
|
932 _uiSetNodes <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>nodes<span class="br0">)</span> <span class="br0">{</span> |
|
933 <span class="kw1">if</span> <span class="br0">(</span><span class="kw1">this</span>._triggerNodes<span class="br0">)</span> <span class="br0">{</span> |
|
934 <span class="kw1">this</span>._triggerNodes.<span class="me1">removeClass</span><span class="br0">(</span><span class="kw1">this</span>._triggerClassName<span class="br0">)</span><span class="sy0">;</span> |
|
935 <span class="br0">}</span> |
|
936 |
|
937 <span class="kw1">if</span> <span class="br0">(</span>nodes<span class="br0">)</span> <span class="br0">{</span> |
|
938 <span class="kw1">this</span>._triggerNodes <span class="sy0">=</span> nodes<span class="sy0">;</span> |
|
939 <span class="kw1">this</span>._triggerNodes.<span class="me1">addClass</span><span class="br0">(</span><span class="kw1">this</span>._triggerClassName<span class="br0">)</span><span class="sy0">;</span> |
|
940 <span class="br0">}</span> |
|
941 <span class="br0">}</span><span class="sy0">,</span></pre></div><textarea id="syntax6-plain">_afterSetNodes : function(e) { |
|
942 this._uiSetNodes(e.newVal); |
|
943 }, |
|
944 |
|
945 _uiSetNodes : function(nodes) { |
|
946 if (this._triggerNodes) { |
|
947 this._triggerNodes.removeClass(this._triggerClassName); |
|
948 } |
|
949 |
|
950 if (nodes) { |
|
951 this._triggerNodes = nodes; |
|
952 this._triggerNodes.addClass(this._triggerClassName); |
|
953 } |
|
954 },</textarea></div> |
|
955 <p>Similarly the <code>_afterSetDelegate</code> method is the default attributechange listener for the <code>delegate</code> attribute, |
|
956 and invokes <code>_bindDelegate</code> to set up the listeners when a new delegate node is set.</p> |
|
957 |
|
958 <div id="syntax7" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">_afterSetDelegate <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._bindDelegate<span class="br0">(</span>e.<span class="me1">newVal</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2">_bindDelegate <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> eventHandles <span class="sy0">=</span> <span class="kw1">this</span>._eventHandles<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>eventHandles.<span class="me1">delegate</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> eventHandles.<span class="me1">delegate</span>.<span class="me1">detach</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> eventHandles.<span class="me1">delegate</span> <span class="sy0">=</span> <span class="kw2">null</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> eventHandles.<span class="me1">delegate</span> <span class="sy0">=</span> Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"mouseover"</span><span class="sy0">,</span> Y.<span class="me1">bind</span><span class="br0">(</span><span class="kw1">this</span>._onDelegateMouseOver<span class="sy0">,</span> <span class="kw1">this</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"delegate"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">_afterSetDelegate <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
959 <span class="kw1">this</span>._bindDelegate<span class="br0">(</span>e.<span class="me1">newVal</span><span class="br0">)</span><span class="sy0">;</span> |
|
960 <span class="br0">}</span><span class="sy0">,</span> |
|
961 |
|
962 _bindDelegate <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
963 <span class="kw2">var</span> eventHandles <span class="sy0">=</span> <span class="kw1">this</span>._eventHandles<span class="sy0">;</span> |
|
964 |
|
965 <span class="kw1">if</span> <span class="br0">(</span>eventHandles.<span class="me1">delegate</span><span class="br0">)</span> <span class="br0">{</span> |
|
966 eventHandles.<span class="me1">delegate</span>.<span class="me1">detach</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
967 eventHandles.<span class="me1">delegate</span> <span class="sy0">=</span> <span class="kw2">null</span><span class="sy0">;</span> |
|
968 <span class="br0">}</span> |
|
969 eventHandles.<span class="me1">delegate</span> <span class="sy0">=</span> Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"mouseover"</span><span class="sy0">,</span> Y.<span class="me1">bind</span><span class="br0">(</span><span class="kw1">this</span>._onDelegateMouseOver<span class="sy0">,</span> <span class="kw1">this</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"delegate"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> |
|
970 <span class="br0">}</span><span class="sy0">,</span></pre></div><textarea id="syntax7-plain">_afterSetDelegate : function(e) { |
|
971 this._bindDelegate(e.newVal); |
|
972 }, |
|
973 |
|
974 _bindDelegate : function() { |
|
975 var eventHandles = this._eventHandles; |
|
976 |
|
977 if (eventHandles.delegate) { |
|
978 eventHandles.delegate.detach(); |
|
979 eventHandles.delegate = null; |
|
980 } |
|
981 eventHandles.delegate = Y.on("mouseover", Y.bind(this._onDelegateMouseOver, this), this.get("delegate")); |
|
982 },</textarea></div> |
|
983 <h4>DOM Event Handlers</h4> |
|
984 |
|
985 <p>Tooltips interaction revolves around the <code>mouseover</code>, <code>mousemove</code> and <code>mouseout</code> DOM events. The mouseover listener is the only listener set up initially, on the <code>delegate</code> node:</p> |
|
986 |
|
987 <div id="syntax8" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">_onDelegateMouseOver <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> node <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">getParentTrigger</span><span class="br0">(</span>e.<span class="me1">target</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>node <span class="sy0">&&</span> <span class="br0">(</span><span class="sy0">!</span><span class="kw1">this</span>._currTrigger.<span class="me1">node</span> <span class="sy0">||</span> <span class="sy0">!</span>node.<span class="me1">compareTo</span><span class="br0">(</span><span class="kw1">this</span>._currTrigger.<span class="me1">node</span><span class="br0">)</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._enterTrigger<span class="br0">(</span>node<span class="sy0">,</span> e.<span class="me1">pageX</span><span class="sy0">,</span> e.<span class="me1">pageY</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">_onDelegateMouseOver <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
988 <span class="kw2">var</span> node <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">getParentTrigger</span><span class="br0">(</span>e.<span class="me1">target</span><span class="br0">)</span><span class="sy0">;</span> |
|
989 <span class="kw1">if</span> <span class="br0">(</span>node <span class="sy0">&&</span> <span class="br0">(</span><span class="sy0">!</span><span class="kw1">this</span>._currTrigger.<span class="me1">node</span> <span class="sy0">||</span> <span class="sy0">!</span>node.<span class="me1">compareTo</span><span class="br0">(</span><span class="kw1">this</span>._currTrigger.<span class="me1">node</span><span class="br0">)</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span> |
|
990 <span class="kw1">this</span>._enterTrigger<span class="br0">(</span>node<span class="sy0">,</span> e.<span class="me1">pageX</span><span class="sy0">,</span> e.<span class="me1">pageY</span><span class="br0">)</span><span class="sy0">;</span> |
|
991 <span class="br0">}</span> |
|
992 <span class="br0">}</span></pre></div><textarea id="syntax8-plain">_onDelegateMouseOver : function(e) { |
|
993 var node = this.getParentTrigger(e.target); |
|
994 if (node && (!this._currTrigger.node || !node.compareTo(this._currTrigger.node))) { |
|
995 this._enterTrigger(node, e.pageX, e.pageY); |
|
996 } |
|
997 }</textarea></div> |
|
998 <p>It attempts to determine if the mouse is entering a trigger node. It ignores mouseover events generated from elements |
|
999 inside the current trigger node (for example when mousing out of a child element of a trigger node). If it determines that the mouse is entering a trigger node, |
|
1000 the delegates to the <code>_enterTrigger</code> method to setup the current trigger state and attaches mousemove and mouseout listeners on the current trigger node.</p> |
|
1001 |
|
1002 <p>The mouse out listener delegates to the <code>_leaveTrigger</code> method, if it determines the mouse is leaving the trigger node:</p> |
|
1003 |
|
1004 <div id="syntax9" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">_onNodeMouseOut <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> to <span class="sy0">=</span> e.<span class="me1">relatedTarget</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> trigger <span class="sy0">=</span> e.<span class="me1">currentTarget</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>trigger.<span class="me1">contains</span><span class="br0">(</span>to<span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._leaveTrigger<span class="br0">(</span>trigger<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">_onNodeMouseOut <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
1005 <span class="kw2">var</span> to <span class="sy0">=</span> e.<span class="me1">relatedTarget</span><span class="sy0">;</span> |
|
1006 <span class="kw2">var</span> trigger <span class="sy0">=</span> e.<span class="me1">currentTarget</span><span class="sy0">;</span> |
|
1007 |
|
1008 <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>trigger.<span class="me1">contains</span><span class="br0">(</span>to<span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span> |
|
1009 <span class="kw1">this</span>._leaveTrigger<span class="br0">(</span>trigger<span class="br0">)</span><span class="sy0">;</span> |
|
1010 <span class="br0">}</span> |
|
1011 <span class="br0">}</span></pre></div><textarea id="syntax9-plain">_onNodeMouseOut : function(e) { |
|
1012 var to = e.relatedTarget; |
|
1013 var trigger = e.currentTarget; |
|
1014 |
|
1015 if (!trigger.contains(to)) { |
|
1016 this._leaveTrigger(trigger); |
|
1017 } |
|
1018 }</textarea></div> |
|
1019 <p>The mouse move listener delegates to the <code>_overTrigger</code> method to store the current mouse XY co-ordinates (used to position the Tooltip when it is displayed after the <code>showDelay</code>):</p> |
|
1020 |
|
1021 <div id="syntax10" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">_onNodeMouseMove <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._overTrigger<span class="br0">(</span>e.<span class="me1">pageX</span><span class="sy0">,</span> e.<span class="me1">pageY</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">_onNodeMouseMove <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
1022 <span class="kw1">this</span>._overTrigger<span class="br0">(</span>e.<span class="me1">pageX</span><span class="sy0">,</span> e.<span class="me1">pageY</span><span class="br0">)</span><span class="sy0">;</span> |
|
1023 <span class="br0">}</span></pre></div><textarea id="syntax10-plain">_onNodeMouseMove : function(e) { |
|
1024 this._overTrigger(e.pageX, e.pageY); |
|
1025 }</textarea></div> |
|
1026 <h4>Trigger Event Delegates: _enterTrigger, _leaveTrigger, _overTrigger</h4> |
|
1027 |
|
1028 <p>As seen above, the DOM event handlers delegate to the <code>_enterTrigger, _leaveTrigger and _overTrigger</code> methods to update the |
|
1029 Tooltip state based on the currently active trigger node.</p> |
|
1030 |
|
1031 <p>The <code>_enterTrigger</code> method sets the current trigger state (which node is the current tooltip trigger, |
|
1032 what the current mouse XY position is, etc.). The method also fires the <code>triggerEnter</code> event, whose default function actually handles |
|
1033 showing the tooltip after the configured <code>showDelay</code> period. The <code>triggerEnter</code> event can be prevented by listeners, allowing |
|
1034 users to prevent the tooltip from being shown if required. (<code>triggerEnter</code> listeners are passed the current trigger node and pageX, pageY mouse co-ordinates as event facade properties):</p> |
|
1035 |
|
1036 <div id="syntax11" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">_enterTrigger <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>node<span class="sy0">,</span> x<span class="sy0">,</span> y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._setCurrentTrigger<span class="br0">(</span>node<span class="sy0">,</span> x<span class="sy0">,</span> y<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">fire</span><span class="br0">(</span><span class="st0">"triggerEnter"</span><span class="sy0">,</span> <span class="kw2">null</span><span class="sy0">,</span> node<span class="sy0">,</span> x<span class="sy0">,</span> y<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1">_defTriggerEnterFn <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> node <span class="sy0">=</span> e.<span class="me1">node</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"disabled"</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._clearTimers<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> delay <span class="sy0">=</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"visible"</span><span class="br0">)</span><span class="br0">)</span> <span class="sy0">?</span> <span class="nu0">0</span> <span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"showDelay"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._timers.<span class="me1">show</span> <span class="sy0">=</span> Y.<span class="me1">later</span><span class="br0">(</span>delay<span class="sy0">,</span> <span class="kw1">this</span><span class="sy0">,</span> <span class="kw1">this</span>._showTooltip<span class="sy0">,</span> <span class="br0">[</span>node<span class="br0">]</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">_enterTrigger <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>node<span class="sy0">,</span> x<span class="sy0">,</span> y<span class="br0">)</span> <span class="br0">{</span> |
|
1037 <span class="kw1">this</span>._setCurrentTrigger<span class="br0">(</span>node<span class="sy0">,</span> x<span class="sy0">,</span> y<span class="br0">)</span><span class="sy0">;</span> |
|
1038 <span class="kw1">this</span>.<span class="me1">fire</span><span class="br0">(</span><span class="st0">"triggerEnter"</span><span class="sy0">,</span> <span class="kw2">null</span><span class="sy0">,</span> node<span class="sy0">,</span> x<span class="sy0">,</span> y<span class="br0">)</span><span class="sy0">;</span> |
|
1039 <span class="br0">}</span><span class="sy0">,</span> |
|
1040 |
|
1041 _defTriggerEnterFn <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
1042 <span class="kw2">var</span> node <span class="sy0">=</span> e.<span class="me1">node</span><span class="sy0">;</span> |
|
1043 <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"disabled"</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span> |
|
1044 <span class="kw1">this</span>._clearTimers<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
1045 <span class="kw2">var</span> delay <span class="sy0">=</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"visible"</span><span class="br0">)</span><span class="br0">)</span> <span class="sy0">?</span> <span class="nu0">0</span> <span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"showDelay"</span><span class="br0">)</span><span class="sy0">;</span> |
|
1046 <span class="kw1">this</span>._timers.<span class="me1">show</span> <span class="sy0">=</span> Y.<span class="me1">later</span><span class="br0">(</span>delay<span class="sy0">,</span> <span class="kw1">this</span><span class="sy0">,</span> <span class="kw1">this</span>._showTooltip<span class="sy0">,</span> <span class="br0">[</span>node<span class="br0">]</span><span class="br0">)</span><span class="sy0">;</span> |
|
1047 <span class="br0">}</span> |
|
1048 <span class="br0">}</span><span class="sy0">,</span></pre></div><textarea id="syntax11-plain">_enterTrigger : function(node, x, y) { |
|
1049 this._setCurrentTrigger(node, x, y); |
|
1050 this.fire("triggerEnter", null, node, x, y); |
|
1051 }, |
|
1052 |
|
1053 _defTriggerEnterFn : function(e) { |
|
1054 var node = e.node; |
|
1055 if (!this.get("disabled")) { |
|
1056 this._clearTimers(); |
|
1057 var delay = (this.get("visible")) ? 0 : this.get("showDelay"); |
|
1058 this._timers.show = Y.later(delay, this, this._showTooltip, [node]); |
|
1059 } |
|
1060 },</textarea></div> |
|
1061 <p>Similarly the <code>_leaveTrigger</code> method is invoked when the mouse leaves a trigger node, and clears any stored state, timers and listeners before setting up |
|
1062 the <code>hideDelay</code> timer. It fires a <code>triggerLeave</code> event, but cannot be prevented, and has no default behavior to prevent:</p> |
|
1063 |
|
1064 <div id="syntax12" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">_leaveTrigger <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>node<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">fire</span><span class="br0">(</span><span class="st0">"triggerLeave"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._clearCurrentTrigger<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">this</span>._clearTimers<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._timers.<span class="me1">hide</span> <span class="sy0">=</span> Y.<span class="me1">later</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"hideDelay"</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw1">this</span><span class="sy0">,</span> <span class="kw1">this</span>._hideTooltip<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">_leaveTrigger <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>node<span class="br0">)</span> <span class="br0">{</span> |
|
1065 <span class="kw1">this</span>.<span class="me1">fire</span><span class="br0">(</span><span class="st0">"triggerLeave"</span><span class="br0">)</span><span class="sy0">;</span> |
|
1066 |
|
1067 <span class="kw1">this</span>._clearCurrentTrigger<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
1068 <span class="kw1">this</span>._clearTimers<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
1069 |
|
1070 <span class="kw1">this</span>._timers.<span class="me1">hide</span> <span class="sy0">=</span> Y.<span class="me1">later</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"hideDelay"</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw1">this</span><span class="sy0">,</span> <span class="kw1">this</span>._hideTooltip<span class="br0">)</span><span class="sy0">;</span> |
|
1071 <span class="br0">}</span><span class="sy0">,</span></pre></div><textarea id="syntax12-plain">_leaveTrigger : function(node) { |
|
1072 this.fire("triggerLeave"); |
|
1073 |
|
1074 this._clearCurrentTrigger(); |
|
1075 this._clearTimers(); |
|
1076 |
|
1077 this._timers.hide = Y.later(this.get("hideDelay"), this, this._hideTooltip); |
|
1078 },</textarea></div> |
|
1079 <p>As mentioned previously, the <code>_overTrigger</code> method simply stores the current mouse XY co-ordinates for use when the tooltip is shown:</p> |
|
1080 |
|
1081 <div id="syntax13" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">_overTrigger <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>x<span class="sy0">,</span> y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._currTrigger.<span class="me1">mouseX</span> <span class="sy0">=</span> x<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._currTrigger.<span class="me1">mouseY</span> <span class="sy0">=</span> y<span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">_overTrigger <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>x<span class="sy0">,</span> y<span class="br0">)</span> <span class="br0">{</span> |
|
1082 <span class="kw1">this</span>._currTrigger.<span class="me1">mouseX</span> <span class="sy0">=</span> x<span class="sy0">;</span> |
|
1083 <span class="kw1">this</span>._currTrigger.<span class="me1">mouseY</span> <span class="sy0">=</span> y<span class="sy0">;</span> |
|
1084 <span class="br0">}</span></pre></div><textarea id="syntax13-plain">_overTrigger : function(x, y) { |
|
1085 this._currTrigger.mouseX = x; |
|
1086 this._currTrigger.mouseY = y; |
|
1087 }</textarea></div> |
|
1088 <h4>Setting Tooltip Content</h4> |
|
1089 |
|
1090 <p>Since the content for a tooltip is usually a function of the trigger node and not constant, <code>Tooltip</code> provides a number of ways to set the content.</p> |
|
1091 |
|
1092 <ol> |
|
1093 <li>Setting the <code>content</code> attribute to a string or node. In this case, the value of the <code>content</code> attribute is used |
|
1094 for all triggerNodes</li> |
|
1095 <li>Setting the <code>content</code> attribute to an object literal, containing a map of triggerNode id to content. The content for a trigger node |
|
1096 will be set using the map, when the tooltip is triggered for the node.</li> |
|
1097 <li>Setting the title attribute on the trigger node. The value of the title attribute is used to set the tooltip content, |
|
1098 when triggered for the node.</li> |
|
1099 <li>By calling the <code>setTriggerContent</code> method to set content for a specific trigger node, in a <code>triggerEnter</code> event listener.</li> |
|
1100 </ol> |
|
1101 |
|
1102 <p>The precedence of these methods is handled in the <code>_setTriggerContent</code> method, invoked when the mouse enters a trigger:</p> |
|
1103 |
|
1104 <div id="syntax14" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">_setTriggerContent <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>node<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> content <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"content"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>content <span class="sy0">&&</span> <span class="sy0">!</span><span class="br0">(</span>content <span class="kw1">instanceof</span> Node <span class="sy0">||</span> Lang.<span class="me1">isString</span><span class="br0">(</span>content<span class="br0">)</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> content <span class="sy0">=</span> content<span class="br0">[</span>node.<span class="me1">get</span><span class="br0">(</span><span class="st0">"id"</span><span class="br0">)</span><span class="br0">]</span> <span class="sy0">||</span> node.<span class="me1">getAttribute</span><span class="br0">(</span><span class="st0">"title"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">setTriggerContent</span><span class="br0">(</span>content<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">setTriggerContent <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>content<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> contentBox <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"contentBox"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> contentBox.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> <span class="st0">""</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>content<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>content <span class="kw1">instanceof</span> Node<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw1">for</span> <span class="br0">(</span><span class="kw2">var</span> i <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">,</span> l <span class="sy0">=</span> content.<span class="me1">size</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> i <span class="sy0"><</span> l<span class="sy0">;</span> <span class="sy0">++</span>i<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> contentBox.<span class="me1">appendChild</span><span class="br0">(</span>content.<span class="kw1">item</span><span class="br0">(</span>i<span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">(</span>Lang.<span class="me1">isString</span><span class="br0">(</span>content<span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> contentBox.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> content<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">_setTriggerContent <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>node<span class="br0">)</span> <span class="br0">{</span> |
|
1105 <span class="kw2">var</span> content <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"content"</span><span class="br0">)</span><span class="sy0">;</span> |
|
1106 <span class="kw1">if</span> <span class="br0">(</span>content <span class="sy0">&&</span> <span class="sy0">!</span><span class="br0">(</span>content <span class="kw1">instanceof</span> Node <span class="sy0">||</span> Lang.<span class="me1">isString</span><span class="br0">(</span>content<span class="br0">)</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span> |
|
1107 content <span class="sy0">=</span> content<span class="br0">[</span>node.<span class="me1">get</span><span class="br0">(</span><span class="st0">"id"</span><span class="br0">)</span><span class="br0">]</span> <span class="sy0">||</span> node.<span class="me1">getAttribute</span><span class="br0">(</span><span class="st0">"title"</span><span class="br0">)</span><span class="sy0">;</span> |
|
1108 <span class="br0">}</span> |
|
1109 <span class="kw1">this</span>.<span class="me1">setTriggerContent</span><span class="br0">(</span>content<span class="br0">)</span><span class="sy0">;</span> |
|
1110 <span class="br0">}</span><span class="sy0">,</span> |
|
1111 |
|
1112 setTriggerContent <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>content<span class="br0">)</span> <span class="br0">{</span> |
|
1113 <span class="kw2">var</span> contentBox <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"contentBox"</span><span class="br0">)</span><span class="sy0">;</span> |
|
1114 contentBox.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> <span class="st0">""</span><span class="br0">)</span><span class="sy0">;</span> |
|
1115 |
|
1116 <span class="kw1">if</span> <span class="br0">(</span>content<span class="br0">)</span> <span class="br0">{</span> |
|
1117 <span class="kw1">if</span> <span class="br0">(</span>content <span class="kw1">instanceof</span> Node<span class="br0">)</span> <span class="br0">{</span> |
|
1118 <span class="kw1">for</span> <span class="br0">(</span><span class="kw2">var</span> i <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">,</span> l <span class="sy0">=</span> content.<span class="me1">size</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> i <span class="sy0"><</span> l<span class="sy0">;</span> <span class="sy0">++</span>i<span class="br0">)</span> <span class="br0">{</span> |
|
1119 contentBox.<span class="me1">appendChild</span><span class="br0">(</span>content.<span class="kw1">item</span><span class="br0">(</span>i<span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> |
|
1120 <span class="br0">}</span> |
|
1121 <span class="br0">}</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">(</span>Lang.<span class="me1">isString</span><span class="br0">(</span>content<span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span> |
|
1122 contentBox.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> content<span class="br0">)</span><span class="sy0">;</span> |
|
1123 <span class="br0">}</span> |
|
1124 <span class="br0">}</span> |
|
1125 <span class="br0">}</span></pre></div><textarea id="syntax14-plain">_setTriggerContent : function(node) { |
|
1126 var content = this.get("content"); |
|
1127 if (content && !(content instanceof Node || Lang.isString(content))) { |
|
1128 content = content[node.get("id")] || node.getAttribute("title"); |
|
1129 } |
|
1130 this.setTriggerContent(content); |
|
1131 }, |
|
1132 |
|
1133 setTriggerContent : function(content) { |
|
1134 var contentBox = this.get("contentBox"); |
|
1135 contentBox.set("innerHTML", ""); |
|
1136 |
|
1137 if (content) { |
|
1138 if (content instanceof Node) { |
|
1139 for (var i = 0, l = content.size(); i < l; ++i) { |
|
1140 contentBox.appendChild(content.item(i)); |
|
1141 } |
|
1142 } else if (Lang.isString(content)) { |
|
1143 contentBox.set("innerHTML", content); |
|
1144 } |
|
1145 } |
|
1146 }</textarea></div> |
|
1147 <p>Calling the public <code>setTriggerContent</code> in a <code>triggerEvent</code> listener will over-ride content set using the <code>content</code> attribute or the trigger node's title value.</p> |
|
1148 |
|
1149 <h4>Using Tooltip</h4> |
|
1150 |
|
1151 <p>For this example, we set up 4 DIV elements which will act as tooltip triggers. They are all marked using a <code>yui-hastooltip</code> class, so that they can be queried using a simple selector, passed as the value for the <code>triggerNodes</code> attribute in the tooltip's constructor Also all 4 trigger nodes are contained in a wrapper DIV with <code>id="delegate"</code> which will act as the <code>delegate</code> node.</p> |
|
1152 |
|
1153 <div id="syntax15" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> tt <span class="sy0">=</span> <span class="kw2">new</span> Tooltip<span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> triggerNodes<span class="sy0">:</span><span class="st0">".yui-hastooltip"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> delegate<span class="sy0">:</span> <span class="st0">"#delegate"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> content<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> tt3<span class="sy0">:</span> <span class="st0">"Tooltip 3 (from lookup)"</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> shim<span class="sy0">:</span><span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> zIndex<span class="sy0">:</span><span class="nu0">2</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">tt.<span class="me1">render</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> tt <span class="sy0">=</span> <span class="kw2">new</span> Tooltip<span class="br0">(</span><span class="br0">{</span> |
|
1154 triggerNodes<span class="sy0">:</span><span class="st0">".yui-hastooltip"</span><span class="sy0">,</span> |
|
1155 delegate<span class="sy0">:</span> <span class="st0">"#delegate"</span><span class="sy0">,</span> |
|
1156 content<span class="sy0">:</span> <span class="br0">{</span> |
|
1157 tt3<span class="sy0">:</span> <span class="st0">"Tooltip 3 (from lookup)"</span> |
|
1158 <span class="br0">}</span><span class="sy0">,</span> |
|
1159 shim<span class="sy0">:</span><span class="kw2">false</span><span class="sy0">,</span> |
|
1160 zIndex<span class="sy0">:</span><span class="nu0">2</span> |
|
1161 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
1162 tt.<span class="me1">render</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax15-plain">var tt = new Tooltip({ |
|
1163 triggerNodes:".yui-hastooltip", |
|
1164 delegate: "#delegate", |
|
1165 content: { |
|
1166 tt3: "Tooltip 3 (from lookup)" |
|
1167 }, |
|
1168 shim:false, |
|
1169 zIndex:2 |
|
1170 }); |
|
1171 tt.render();</textarea></div> |
|
1172 <p>The tooltip content for each of the trigger nodes is setup differently. The first trigger node uses the title attribute to set it's content. The third trigger node's content is set using the content map set in the constructor above. The second trigger node's content is set using a <code>triggerEnter</code> event listener and the <code>setTriggerContent</code> method as shown below:</p> |
|
1173 |
|
1174 <div id="syntax16" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">tt.<span class="me1">on</span><span class="br0">(</span><span class="st0">"triggerEnter"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> node <span class="sy0">=</span> e.<span class="me1">node</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>node <span class="sy0">&&</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">"id"</span><span class="br0">)</span> <span class="sy0">==</span> <span class="st0">"tt2"</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">setTriggerContent</span><span class="br0">(</span><span class="st0">"Tooltip 2 (from triggerEvent)"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">tt.<span class="me1">on</span><span class="br0">(</span><span class="st0">"triggerEnter"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
1175 <span class="kw2">var</span> node <span class="sy0">=</span> e.<span class="me1">node</span><span class="sy0">;</span> |
|
1176 <span class="kw1">if</span> <span class="br0">(</span>node <span class="sy0">&&</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">"id"</span><span class="br0">)</span> <span class="sy0">==</span> <span class="st0">"tt2"</span><span class="br0">)</span> <span class="br0">{</span> |
|
1177 <span class="kw1">this</span>.<span class="me1">setTriggerContent</span><span class="br0">(</span><span class="st0">"Tooltip 2 (from triggerEvent)"</span><span class="br0">)</span><span class="sy0">;</span> |
|
1178 <span class="br0">}</span> |
|
1179 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax16-plain">tt.on("triggerEnter", function(e) { |
|
1180 var node = e.node; |
|
1181 if (node && node.get("id") == "tt2") { |
|
1182 this.setTriggerContent("Tooltip 2 (from triggerEvent)"); |
|
1183 } |
|
1184 });</textarea></div> |
|
1185 <p>The fourth trigger node's content is set using it's title attribute, however it also has a <code>triggerEvent</code> listener which prevents the tooltip from being displayed for it, if the checkbox is checked.</p> |
|
1186 |
|
1187 <div id="syntax17" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> prevent <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#prevent"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">tt.<span class="me1">on</span><span class="br0">(</span><span class="st0">"triggerEnter"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> node <span class="sy0">=</span> e.<span class="me1">node</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>prevent.<span class="me1">get</span><span class="br0">(</span><span class="st0">"checked"</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw1">if</span> <span class="br0">(</span>node <span class="sy0">&&</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">"id"</span><span class="br0">)</span> <span class="sy0">==</span> <span class="st0">"tt4"</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> e.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> prevent <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#prevent"</span><span class="br0">)</span><span class="sy0">;</span> |
|
1188 tt.<span class="me1">on</span><span class="br0">(</span><span class="st0">"triggerEnter"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
1189 <span class="kw2">var</span> node <span class="sy0">=</span> e.<span class="me1">node</span><span class="sy0">;</span> |
|
1190 <span class="kw1">if</span> <span class="br0">(</span>prevent.<span class="me1">get</span><span class="br0">(</span><span class="st0">"checked"</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span> |
|
1191 <span class="kw1">if</span> <span class="br0">(</span>node <span class="sy0">&&</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">"id"</span><span class="br0">)</span> <span class="sy0">==</span> <span class="st0">"tt4"</span><span class="br0">)</span> <span class="br0">{</span> |
|
1192 e.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
1193 <span class="br0">}</span> |
|
1194 <span class="br0">}</span> |
|
1195 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax17-plain">var prevent = Y.one("#prevent"); |
|
1196 tt.on("triggerEnter", function(e) { |
|
1197 var node = e.node; |
|
1198 if (prevent.get("checked")) { |
|
1199 if (node && node.get("id") == "tt4") { |
|
1200 e.preventDefault(); |
|
1201 } |
|
1202 } |
|
1203 });</textarea></div> </div> |
|
1204 <div class="yui-u sidebar"> |
|
1205 |
|
1206 |
|
1207 <div id="examples" class="mod box4"> |
|
1208 <div class="hd"> |
|
1209 <h4> |
|
1210 Widget Examples:</h4> |
|
1211 </div> |
|
1212 <div class="bd"> |
|
1213 <ul> |
|
1214 <li><a href='../widget/widget-extend.html'>Extending the base widget class</a></li><li><a href='../widget/widget-build.html'>Creating custom widget classes</a></li><li class='selected'><a href='../widget/widget-tooltip.html'>Creating a simple Tooltip widget</a></li> </ul> |
|
1215 </div> |
|
1216 </div> |
|
1217 |
|
1218 <div class="mod box4"> |
|
1219 <div class="hd"> |
|
1220 <h4>More Widget Resources:</h4> |
|
1221 </div> |
|
1222 <div class="bd"> |
|
1223 <ul> |
|
1224 <!-- <li><a href="http://developer.yahoo.com/yui/widget/">User's Guide</a> (external)</li> --> |
|
1225 <li><a href="../../api/module_widget.html">API Documentation</a></li></ul> |
|
1226 </div> |
|
1227 </div> |
|
1228 </div> |
|
1229 </div> |
|
1230 |
|
1231 </div> |
|
1232 </div> |
|
1233 |
|
1234 |
|
1235 <div class="yui-b toc3" id="tocWrapper"> |
|
1236 <!-- TABLE OF CONTENTS --> |
|
1237 <div id="toc"> |
|
1238 |
|
1239 <ul> |
|
1240 <li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul> |
|
1241 </div> |
|
1242 </div> |
|
1243 </div><!--closes bd--> |
|
1244 |
|
1245 <div id="ft"> |
|
1246 <p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
1247 <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
1248 <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
1249 <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
1250 <a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
1251 </div> |
|
1252 </div> |
|
1253 <script language="javascript"> |
|
1254 var yuiConfig = {base:"../../build/", timeout: 10000}; |
|
1255 </script> |
|
1256 <script src="../../assets/syntax.js"></script> |
|
1257 <script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
1258 <script language="javascript"> |
|
1259 dp.SyntaxHighlighter.HighlightAll('code'); |
|
1260 </script> |
|
1261 </body> |
|
1262 </html> |