|
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: Event: Using Custom Events</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 #fire {margin:1em;} |
|
21 #log { |
|
22 border:1px dotted #999999; background-color:#FFFFFF; |
|
23 } |
|
24 #log li {padding:5px;} |
|
25 #log li highlight {color:#993300;} |
|
26 </style> |
|
27 </head> |
|
28 <body id="yahoo-com" class=" yui-skin-sam"> |
|
29 <div id="custom-doc" class="yui-t2"> |
|
30 <div id="hd"> |
|
31 <div id="ygunav"> |
|
32 <p> |
|
33 <em> |
|
34 <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
35 </em> |
|
36 </p> |
|
37 <form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
38 <input name="vs" type="hidden" value="developer.yahoo.com"> |
|
39 <input name="vs" type="hidden" value="yuiblog.com"> |
|
40 <div id="sitesearch"> |
|
41 <label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
42 <input type="text" id="searchinput" name="p"> |
|
43 <input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
44 </div> |
|
45 </form> |
|
46 </div> |
|
47 <div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
48 <div id="pagetitle"><h1>YUI Library Examples: Event: Using Custom Events</h1></div> |
|
49 </div> |
|
50 <div id="bd"> |
|
51 |
|
52 |
|
53 <div id="yui-main"> |
|
54 <div class="yui-b"> |
|
55 <div class="yui-ge"> |
|
56 <div class="yui-u first example" id="main"> |
|
57 |
|
58 <h2>Event: Using Custom Events</h2> |
|
59 |
|
60 <div id="example" class="promo"> |
|
61 <div class="example-intro"> |
|
62 <p>The Custom Event framework is one of the principle communication mechanisms |
|
63 in YUI. An object can be augmented with <code>EventTarget</code>, enabling it |
|
64 to be both a host and a target for Custom Events. Custom Events fire from |
|
65 their host and optionally bubble up to one or more targets. This allows you to |
|
66 make the interesting moments of your applications broadly available within a |
|
67 module, within a set of modules, or throughout a complex interface populated |
|
68 with rich elements.</p> |
|
69 |
|
70 <p>In this example, a simple Custom Event is illustrated: |
|
71 <code>testEvent</code>. This Custom Event is hosted on a Publisher object and |
|
72 bubbles up to a BubbleTarget object.</p> |
|
73 |
|
74 <p><img src="assets/ce-example.gif" alt="An |
|
75 illustration of the relationship between the Custom Event, its host, and its |
|
76 Bubble Target."></p> |
|
77 |
|
78 <p>Custom Events, like DOM events, can be stopped |
|
79 (<code>stopPropagation</code>) and their default behavior can be suppressed |
|
80 (<code>preventDefault</code>).</p> |
|
81 </div> |
|
82 |
|
83 <div class="module example-container "> |
|
84 <div class="hd exampleHd"> |
|
85 <p class="newWindowButton yui-skin-sam"> |
|
86 <a href="event-ce_clean.html" target="_blank">View example in new window.</a> |
|
87 </p> |
|
88 </div> <div id="example-canvas" class="bd"> |
|
89 |
|
90 |
|
91 <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
92 |
|
93 <button id="fire" value="Fire">Fire publisher:testEvent</button> <br /> |
|
94 <input type="checkbox" id="stopPropagation"> <label for="stopPropagation">Stop Propagation (testEvent won't bubble to the BubbleTarget.)</label><br /> |
|
95 <input type="checkbox" id="preventDefault"> <label for="preventDefault">Prevent Default (testEvent's defaultFn won't fire.)</label> |
|
96 |
|
97 <ol id="log"> |
|
98 <li>Custom Event log messages will appear here.</li> |
|
99 </ol> |
|
100 |
|
101 <script language="javascript"> |
|
102 |
|
103 //Create a YUI instance: |
|
104 YUI({base:"../../build/", timeout: 10000}).use("node", "event-custom-complex", |
|
105 |
|
106 function(Y) { |
|
107 |
|
108 //Shortcut for our logging div: |
|
109 var logger = Y.one("#log"); |
|
110 |
|
111 //Our BubbleTarget object is an object to which our Custom Event |
|
112 //will be allowed to bubble. It needs itself to be an EventTarget, |
|
113 //so we'll use augment to make it an EventTarget: |
|
114 var BubbleTarget = function() { |
|
115 Y.log("Host constructor executed.", "info", "example"); |
|
116 } |
|
117 //Augment BubbleTarget to make it an EventTarget: |
|
118 Y.augment(BubbleTarget, Y.EventTarget); |
|
119 |
|
120 //Create an instance of BubbleTarget: |
|
121 var bubbleTarget = new BubbleTarget(); |
|
122 |
|
123 //Now we'll subscribe to the "publisher:testEvent" -- note |
|
124 //that we can do this even before this event is published: |
|
125 bubbleTarget.subscribe("publisher:testEvent", function(e) { |
|
126 Y.log("publisher:testEvent fired on the BubbleTarget object.", "info", "example"); |
|
127 }); |
|
128 |
|
129 //Now we'll create the constructor for the Publisher, which |
|
130 //is the direct host of our Custom Event. It will also be an |
|
131 //EventTarget, so we'll extend it as well: |
|
132 var Publisher = function(bubbleTarget) { |
|
133 |
|
134 //We'll specify now that Custom Events hosted by Publisher |
|
135 //should bubble to the bubbleTarget instance passed into the |
|
136 //the Publisher's constructor: |
|
137 this.addTarget(bubbleTarget); |
|
138 |
|
139 //Here we publish the Custom Event. Note that it's not |
|
140 //necessary to publish the event at all if you don't have |
|
141 //options you wish to configure -- firing the event or |
|
142 //subscribing to it will create it on the fly if necessary: |
|
143 this.publish("publisher:testEvent", |
|
144 { |
|
145 emitFacade: true, |
|
146 //the defaultFn is what you want to have happen |
|
147 //by default when no subscriber calls preventDefault: |
|
148 defaultFn: function() { |
|
149 Y.log("defaultFn: publisher:testEvent's defaultFn executed.", "info", "example"); |
|
150 }, |
|
151 //You can prevent the default function from firing by |
|
152 //calling preventDefault from a listener (if the Custom |
|
153 //Event's preventable option is set to true, as it is by |
|
154 //default). If the default is prevented, the preventedFn |
|
155 //is called, allowing you to respond if necessary. |
|
156 preventedFn: function() { |
|
157 Y.log("preventedFn: A subscriber to publisher:testEvent called preventDefault().", "info", "example"); |
|
158 }, |
|
159 //The stoppedFn is called if a subscriber calls stopPropagation or |
|
160 //stopImmediatePropagation: |
|
161 stoppedFn: function() { |
|
162 Y.log("stoppedFn: A subscriber to publisher:testEvent called stopPropagation().", "info", "example"); |
|
163 } |
|
164 } |
|
165 ); |
|
166 Y.log("Publisher constructor executed."); |
|
167 } |
|
168 //Augment Publisher to make it an EventTarget: |
|
169 Y.augment(Publisher, Y.EventTarget); |
|
170 |
|
171 //Create a Publisher instance: |
|
172 var p = new Publisher(bubbleTarget); |
|
173 |
|
174 //We've already subscribed to the event on the bubbleTarget, but |
|
175 //we can also subscribe to it here on the Publisher instance. |
|
176 //We'll see the event fire here before it bubbles up to the |
|
177 //bubbleTarget: |
|
178 p.on("publisher:testEvent", function(e) { |
|
179 Y.log("publisher:testEvent subscriber fired on the publisher object.", "info", "example"); |
|
180 if(Y.one("#stopPropagation").get("checked")) { |
|
181 //we will stopPropagation on the Custom Event, preventing |
|
182 //it from bubbling to the bubbleTarget: |
|
183 e.stopPropagation(); |
|
184 } |
|
185 |
|
186 if(Y.one("#preventDefault").get("checked")) { |
|
187 //we will preventDefault on the Custom Event, preventing |
|
188 //the testEvent's defaultFn from firing: |
|
189 e.preventDefault(); |
|
190 } |
|
191 }); |
|
192 |
|
193 //We can tie our testEvent to an interface gesture -- the click of a |
|
194 //button, for example. |
|
195 Y.on("click", function(e) { |
|
196 //clear out the logger: |
|
197 logger.set("innerHTML", ""); |
|
198 p.fire("publisher:testEvent"); |
|
199 }, "#fire"); |
|
200 |
|
201 //write out log messages to the page: |
|
202 Y.on("yui:log", function(e) { |
|
203 var s = logger.get("innerHTML"); |
|
204 logger.set("innerHTML", s + "<li>" + e.msg + "</li>"); |
|
205 }); |
|
206 |
|
207 }); |
|
208 </script> |
|
209 |
|
210 <!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
211 |
|
212 |
|
213 </div> |
|
214 </div> |
|
215 </div> |
|
216 |
|
217 <h2>Source Code</h2> |
|
218 |
|
219 <p>The full source code for this example follows. Read through the comments and code to get an understanding of how you can make use of Custom Events in your own application development.</p> |
|
220 |
|
221 <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="co1">//Create a YUI instance:</span></div></li><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">'node'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<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="co1">//Shortcut for our logging div:</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> logger <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#log"</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="co1">//Our BubbleTarget object is an object to which our Custom Event</span></div></li><li class="li1"><div class="de1"> <span class="co1">//will be allowed to bubble. It needs itself to be an EventTarget,</span></div></li><li class="li1"><div class="de1"> <span class="co1">//so we'll use augment to make it an EventTarget:</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> BubbleTarget <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"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Host constructor executed."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</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="co1">//Augment BubbleTarget to make it an EventTarget:</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">augment</span><span class="br0">(</span>BubbleTarget<span class="sy0">,</span> Y.<span class="me1">EventTarget</span><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="co1">//Create an instance of BubbleTarget:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> bubbleTarget <span class="sy0">=</span> <span class="kw2">new</span> BubbleTarget<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="co1">//Now we'll subscribe to the "publisher:testEvent" -- note</span></div></li><li class="li2"><div class="de2"> <span class="co1">//that we can do this even before this event is published:</span></div></li><li class="li1"><div class="de1"> bubbleTarget.<span class="me1">on</span><span class="br0">(</span><span class="st0">"publisher:testEvent"</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"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"publisher:testEvent fired on the BubbleTarget object."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</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="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">//Now we'll create the constructor for the Publisher, which </span></div></li><li class="li1"><div class="de1"> <span class="co1">//is the direct host of our Custom Event. It will also be an</span></div></li><li class="li1"><div class="de1"> <span class="co1">//EventTarget, so we'll extend it as well:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> Publisher <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>bubbleTarget<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">//We'll specify now that Custom Events hosted by Publisher</span></div></li><li class="li1"><div class="de1"> <span class="co1">//should bubble to the bubbleTarget instance passed into the</span></div></li><li class="li1"><div class="de1"> <span class="co1">//the Publisher's constructor:</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">addTarget</span><span class="br0">(</span>bubbleTarget<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">//Here we publish the Custom Event. Note that it's not</span></div></li><li class="li1"><div class="de1"> <span class="co1">//necessary to publish the event at all if you don't have</span></div></li><li class="li1"><div class="de1"> <span class="co1">//options you wish to configure -- firing the event or </span></div></li><li class="li1"><div class="de1"> <span class="co1">//subscribing to it will create it on the fly if necessary:</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">"publisher:testEvent"</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"> emitFacade<span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="co1">//the defaultFn is what you want to have happen</span></div></li><li class="li1"><div class="de1"> <span class="co1">//by default when no subscriber calls preventDefault:</span></div></li><li class="li1"><div class="de1"> defaultFn<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="li2"><div class="de2"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"defaultFn: publisher:testEvent's defaultFn executed."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</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"> <span class="co1">//You can prevent the default function from firing by</span></div></li><li class="li1"><div class="de1"> <span class="co1">//calling preventDefault from a listener (if the Custom</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Event's preventable option is set to true, as it is by</span></div></li><li class="li2"><div class="de2"> <span class="co1">//default). If the default is prevented, the preventedFn</span></div></li><li class="li1"><div class="de1"> <span class="co1">//is called, allowing you to respond if necessary.</span></div></li><li class="li1"><div class="de1"> preventedFn<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"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"preventedFn: A subscriber to publisher:testEvent called preventDefault()."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</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="li2"><div class="de2"> <span class="co1">//The stoppedFn is called if a subscriber calls stopPropagation or</span></div></li><li class="li1"><div class="de1"> <span class="co1">//stopImmediatePropagation:</span></div></li><li class="li1"><div class="de1"> stoppedFn<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"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"stoppedFn: A subscriber to publisher:testEvent called stopPropagation()."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</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="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"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Publisher constructor executed."</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="co1">//Augment Publisher to make it an EventTarget:</span></div></li><li class="li2"><div class="de2"> Y.<span class="me1">augment</span><span class="br0">(</span>Publisher<span class="sy0">,</span> Y.<span class="me1">EventTarget</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="co1">//Create a Publisher instance:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> p <span class="sy0">=</span> <span class="kw2">new</span> Publisher<span class="br0">(</span>bubbleTarget<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">//We've already subscribed to the event on the bubbleTarget, but</span></div></li><li class="li1"><div class="de1"> <span class="co1">//we can also subscribe to it here on the Publisher instance.</span></div></li><li class="li1"><div class="de1"> <span class="co1">//We'll see the event fire here before it bubbles up to the </span></div></li><li class="li1"><div class="de1"> <span class="co1">//bubbleTarget:</span></div></li><li class="li1"><div class="de1"> p.<span class="me1">on</span><span class="br0">(</span><span class="st0">"publisher:testEvent"</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="li2"><div class="de2"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"publisher:testEvent subscriber fired on the publisher object."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</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>Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#stopPropagation"</span><span class="br0">)</span>.<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="li1"><div class="de1"> <span class="co1">//we will stopPropagation on the Custom Event, preventing</span></div></li><li class="li1"><div class="de1"> <span class="co1">//it from bubbling to the bubbleTarget:</span></div></li><li class="li1"><div class="de1"> e.<span class="me1">stopPropagation</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><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span><span class="br0">(</span>Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#preventDefault"</span><span class="br0">)</span>.<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="li1"><div class="de1"> <span class="co1">//we will preventDefault on the Custom Event, preventing</span></div></li><li class="li1"><div class="de1"> <span class="co1">//the testEvent's defaultFn from firing:</span></div></li><li class="li2"><div class="de2"> 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><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">//We can tie our testEvent to an interface gesture -- the click of a</span></div></li><li class="li2"><div class="de2"> <span class="co1">//button, for example.</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</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="co1">//clear out the logger:</span></div></li><li class="li1"><div class="de1"> logger.<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"> p.<span class="me1">fire</span><span class="br0">(</span><span class="st0">"publisher:testEvent"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#fire"</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="co1">//write out log messages to the page:</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"yui:log"</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> s <span class="sy0">=</span> logger.<span class="me1">get</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> logger.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> s <span class="sy0">+</span> <span class="st0">"<li>"</span> <span class="sy0">+</span> e.<span class="me1">msg</span> <span class="sy0">+</span> <span class="st0">"</li>"</span><span class="br0">)</span><span class="sy0">;</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="li1"><div class="de1"> </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="co1">//Create a YUI instance:</span> |
|
222 YUI<span class="br0">(</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">'node'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span> |
|
223 |
|
224 <span class="co1">//Shortcut for our logging div:</span> |
|
225 <span class="kw2">var</span> logger <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#log"</span><span class="br0">)</span><span class="sy0">;</span> |
|
226 |
|
227 <span class="co1">//Our BubbleTarget object is an object to which our Custom Event</span> |
|
228 <span class="co1">//will be allowed to bubble. It needs itself to be an EventTarget,</span> |
|
229 <span class="co1">//so we'll use augment to make it an EventTarget:</span> |
|
230 <span class="kw2">var</span> BubbleTarget <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
231 Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Host constructor executed."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span> |
|
232 <span class="br0">}</span> |
|
233 <span class="co1">//Augment BubbleTarget to make it an EventTarget:</span> |
|
234 Y.<span class="me1">augment</span><span class="br0">(</span>BubbleTarget<span class="sy0">,</span> Y.<span class="me1">EventTarget</span><span class="br0">)</span><span class="sy0">;</span> |
|
235 |
|
236 <span class="co1">//Create an instance of BubbleTarget:</span> |
|
237 <span class="kw2">var</span> bubbleTarget <span class="sy0">=</span> <span class="kw2">new</span> BubbleTarget<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
238 |
|
239 <span class="co1">//Now we'll subscribe to the "publisher:testEvent" -- note</span> |
|
240 <span class="co1">//that we can do this even before this event is published:</span> |
|
241 bubbleTarget.<span class="me1">on</span><span class="br0">(</span><span class="st0">"publisher:testEvent"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
242 Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"publisher:testEvent fired on the BubbleTarget object."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span> |
|
243 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
244 |
|
245 <span class="co1">//Now we'll create the constructor for the Publisher, which </span> |
|
246 <span class="co1">//is the direct host of our Custom Event. It will also be an</span> |
|
247 <span class="co1">//EventTarget, so we'll extend it as well:</span> |
|
248 <span class="kw2">var</span> Publisher <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>bubbleTarget<span class="br0">)</span> <span class="br0">{</span> |
|
249 |
|
250 <span class="co1">//We'll specify now that Custom Events hosted by Publisher</span> |
|
251 <span class="co1">//should bubble to the bubbleTarget instance passed into the</span> |
|
252 <span class="co1">//the Publisher's constructor:</span> |
|
253 <span class="kw1">this</span>.<span class="me1">addTarget</span><span class="br0">(</span>bubbleTarget<span class="br0">)</span><span class="sy0">;</span> |
|
254 |
|
255 <span class="co1">//Here we publish the Custom Event. Note that it's not</span> |
|
256 <span class="co1">//necessary to publish the event at all if you don't have</span> |
|
257 <span class="co1">//options you wish to configure -- firing the event or </span> |
|
258 <span class="co1">//subscribing to it will create it on the fly if necessary:</span> |
|
259 <span class="kw1">this</span>.<span class="me1">publish</span><span class="br0">(</span><span class="st0">"publisher:testEvent"</span><span class="sy0">,</span> |
|
260 <span class="br0">{</span> |
|
261 emitFacade<span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span> |
|
262 <span class="co1">//the defaultFn is what you want to have happen</span> |
|
263 <span class="co1">//by default when no subscriber calls preventDefault:</span> |
|
264 defaultFn<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
265 Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"defaultFn: publisher:testEvent's defaultFn executed."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span> |
|
266 <span class="br0">}</span><span class="sy0">,</span> |
|
267 <span class="co1">//You can prevent the default function from firing by</span> |
|
268 <span class="co1">//calling preventDefault from a listener (if the Custom</span> |
|
269 <span class="co1">//Event's preventable option is set to true, as it is by</span> |
|
270 <span class="co1">//default). If the default is prevented, the preventedFn</span> |
|
271 <span class="co1">//is called, allowing you to respond if necessary.</span> |
|
272 preventedFn<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
273 Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"preventedFn: A subscriber to publisher:testEvent called preventDefault()."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span> |
|
274 <span class="br0">}</span><span class="sy0">,</span> |
|
275 <span class="co1">//The stoppedFn is called if a subscriber calls stopPropagation or</span> |
|
276 <span class="co1">//stopImmediatePropagation:</span> |
|
277 stoppedFn<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
278 Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"stoppedFn: A subscriber to publisher:testEvent called stopPropagation()."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span> |
|
279 <span class="br0">}</span> |
|
280 <span class="br0">}</span> |
|
281 <span class="br0">)</span><span class="sy0">;</span> |
|
282 Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Publisher constructor executed."</span><span class="br0">)</span><span class="sy0">;</span> |
|
283 <span class="br0">}</span> |
|
284 <span class="co1">//Augment Publisher to make it an EventTarget:</span> |
|
285 Y.<span class="me1">augment</span><span class="br0">(</span>Publisher<span class="sy0">,</span> Y.<span class="me1">EventTarget</span><span class="br0">)</span><span class="sy0">;</span> |
|
286 |
|
287 <span class="co1">//Create a Publisher instance:</span> |
|
288 <span class="kw2">var</span> p <span class="sy0">=</span> <span class="kw2">new</span> Publisher<span class="br0">(</span>bubbleTarget<span class="br0">)</span><span class="sy0">;</span> |
|
289 |
|
290 <span class="co1">//We've already subscribed to the event on the bubbleTarget, but</span> |
|
291 <span class="co1">//we can also subscribe to it here on the Publisher instance.</span> |
|
292 <span class="co1">//We'll see the event fire here before it bubbles up to the </span> |
|
293 <span class="co1">//bubbleTarget:</span> |
|
294 p.<span class="me1">on</span><span class="br0">(</span><span class="st0">"publisher:testEvent"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
295 Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"publisher:testEvent subscriber fired on the publisher object."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span> |
|
296 <span class="kw1">if</span><span class="br0">(</span>Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#stopPropagation"</span><span class="br0">)</span>.<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> |
|
297 <span class="co1">//we will stopPropagation on the Custom Event, preventing</span> |
|
298 <span class="co1">//it from bubbling to the bubbleTarget:</span> |
|
299 e.<span class="me1">stopPropagation</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
300 <span class="br0">}</span> |
|
301 |
|
302 <span class="kw1">if</span><span class="br0">(</span>Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#preventDefault"</span><span class="br0">)</span>.<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> |
|
303 <span class="co1">//we will preventDefault on the Custom Event, preventing</span> |
|
304 <span class="co1">//the testEvent's defaultFn from firing:</span> |
|
305 e.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
306 <span class="br0">}</span> |
|
307 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
308 |
|
309 <span class="co1">//We can tie our testEvent to an interface gesture -- the click of a</span> |
|
310 <span class="co1">//button, for example.</span> |
|
311 Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
312 <span class="co1">//clear out the logger:</span> |
|
313 logger.<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> |
|
314 p.<span class="me1">fire</span><span class="br0">(</span><span class="st0">"publisher:testEvent"</span><span class="br0">)</span><span class="sy0">;</span> |
|
315 <span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#fire"</span><span class="br0">)</span><span class="sy0">;</span> |
|
316 |
|
317 <span class="co1">//write out log messages to the page:</span> |
|
318 Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"yui:log"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
319 <span class="kw2">var</span> s <span class="sy0">=</span> logger.<span class="me1">get</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="br0">)</span><span class="sy0">;</span> |
|
320 logger.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> s <span class="sy0">+</span> <span class="st0">"<li>"</span> <span class="sy0">+</span> e.<span class="me1">msg</span> <span class="sy0">+</span> <span class="st0">"</li>"</span><span class="br0">)</span><span class="sy0">;</span> |
|
321 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
322 |
|
323 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax1-plain">//Create a YUI instance: |
|
324 YUI().use('node', function(Y) { |
|
325 |
|
326 //Shortcut for our logging div: |
|
327 var logger = Y.one("#log"); |
|
328 |
|
329 //Our BubbleTarget object is an object to which our Custom Event |
|
330 //will be allowed to bubble. It needs itself to be an EventTarget, |
|
331 //so we'll use augment to make it an EventTarget: |
|
332 var BubbleTarget = function() { |
|
333 Y.log("Host constructor executed.", "info", "example"); |
|
334 } |
|
335 //Augment BubbleTarget to make it an EventTarget: |
|
336 Y.augment(BubbleTarget, Y.EventTarget); |
|
337 |
|
338 //Create an instance of BubbleTarget: |
|
339 var bubbleTarget = new BubbleTarget(); |
|
340 |
|
341 //Now we'll subscribe to the "publisher:testEvent" -- note |
|
342 //that we can do this even before this event is published: |
|
343 bubbleTarget.on("publisher:testEvent", function(e) { |
|
344 Y.log("publisher:testEvent fired on the BubbleTarget object.", "info", "example"); |
|
345 }); |
|
346 |
|
347 //Now we'll create the constructor for the Publisher, which |
|
348 //is the direct host of our Custom Event. It will also be an |
|
349 //EventTarget, so we'll extend it as well: |
|
350 var Publisher = function(bubbleTarget) { |
|
351 |
|
352 //We'll specify now that Custom Events hosted by Publisher |
|
353 //should bubble to the bubbleTarget instance passed into the |
|
354 //the Publisher's constructor: |
|
355 this.addTarget(bubbleTarget); |
|
356 |
|
357 //Here we publish the Custom Event. Note that it's not |
|
358 //necessary to publish the event at all if you don't have |
|
359 //options you wish to configure -- firing the event or |
|
360 //subscribing to it will create it on the fly if necessary: |
|
361 this.publish("publisher:testEvent", |
|
362 { |
|
363 emitFacade: true, |
|
364 //the defaultFn is what you want to have happen |
|
365 //by default when no subscriber calls preventDefault: |
|
366 defaultFn: function() { |
|
367 Y.log("defaultFn: publisher:testEvent's defaultFn executed.", "info", "example"); |
|
368 }, |
|
369 //You can prevent the default function from firing by |
|
370 //calling preventDefault from a listener (if the Custom |
|
371 //Event's preventable option is set to true, as it is by |
|
372 //default). If the default is prevented, the preventedFn |
|
373 //is called, allowing you to respond if necessary. |
|
374 preventedFn: function() { |
|
375 Y.log("preventedFn: A subscriber to publisher:testEvent called preventDefault().", "info", "example"); |
|
376 }, |
|
377 //The stoppedFn is called if a subscriber calls stopPropagation or |
|
378 //stopImmediatePropagation: |
|
379 stoppedFn: function() { |
|
380 Y.log("stoppedFn: A subscriber to publisher:testEvent called stopPropagation().", "info", "example"); |
|
381 } |
|
382 } |
|
383 ); |
|
384 Y.log("Publisher constructor executed."); |
|
385 } |
|
386 //Augment Publisher to make it an EventTarget: |
|
387 Y.augment(Publisher, Y.EventTarget); |
|
388 |
|
389 //Create a Publisher instance: |
|
390 var p = new Publisher(bubbleTarget); |
|
391 |
|
392 //We've already subscribed to the event on the bubbleTarget, but |
|
393 //we can also subscribe to it here on the Publisher instance. |
|
394 //We'll see the event fire here before it bubbles up to the |
|
395 //bubbleTarget: |
|
396 p.on("publisher:testEvent", function(e) { |
|
397 Y.log("publisher:testEvent subscriber fired on the publisher object.", "info", "example"); |
|
398 if(Y.one("#stopPropagation").get("checked")) { |
|
399 //we will stopPropagation on the Custom Event, preventing |
|
400 //it from bubbling to the bubbleTarget: |
|
401 e.stopPropagation(); |
|
402 } |
|
403 |
|
404 if(Y.one("#preventDefault").get("checked")) { |
|
405 //we will preventDefault on the Custom Event, preventing |
|
406 //the testEvent's defaultFn from firing: |
|
407 e.preventDefault(); |
|
408 } |
|
409 }); |
|
410 |
|
411 //We can tie our testEvent to an interface gesture -- the click of a |
|
412 //button, for example. |
|
413 Y.on("click", function(e) { |
|
414 //clear out the logger: |
|
415 logger.set("innerHTML", ""); |
|
416 p.fire("publisher:testEvent"); |
|
417 }, "#fire"); |
|
418 |
|
419 //write out log messages to the page: |
|
420 Y.on("yui:log", function(e) { |
|
421 var s = logger.get("innerHTML"); |
|
422 logger.set("innerHTML", s + "<li>" + e.msg + "</li>"); |
|
423 }); |
|
424 |
|
425 });</textarea></div> </div> |
|
426 <div class="yui-u sidebar"> |
|
427 |
|
428 |
|
429 <div id="examples" class="mod box4"> |
|
430 <div class="hd"> |
|
431 <h4> |
|
432 Event Examples:</h4> |
|
433 </div> |
|
434 <div class="bd"> |
|
435 <ul> |
|
436 <li><a href='../event/event-simple.html'>Simple DOM Events</a></li><li><a href='../event/event-timing.html'>Using 'available', 'contentready', and 'domready'</a></li><li class='selected'><a href='../event/event-ce.html'>Using Custom Events</a></li><li><a href='../event/event-focus-blur.html'>Skinning via Progressive Enhancement using the Event Utility and the Loader</a></li><li><a href='../yui/yui-augment.html'>Compose Classes of Objects with <code>augment</code> (included with examples for The YUI Global Object)</a></li><li><a href='../node-focusmanager/node-focusmanager-3.html'>Accessible Menu Button (included with examples for Focus Manager Node Plugin)</a></li><li><a href='../node-focusmanager/node-focusmanager-2.html'>Accessible TabView (included with examples for Focus Manager Node Plugin)</a></li><li><a href='../attribute/attribute-event.html'>Attribute Change Events (included with examples for Attribute)</a></li><li><a href='../attribute/attribute-event-speeddate.html'>Attribute Event Based Speed Dating (included with examples for Attribute)</a></li><li><a href='../attribute/attribute-getset.html'>Attribute Getters, Setters and Validators (included with examples for Attribute)</a></li><li><a href='../widget/widget-extend.html'>Extending the base widget class (included with examples for Widget)</a></li><li><a href='../dd/photo-browser.html'>Photo Browser (included with examples for Drag & Drop)</a></li> </ul> |
|
437 </div> |
|
438 </div> |
|
439 |
|
440 <div class="mod box4"> |
|
441 <div class="hd"> |
|
442 <h4>More Event Resources:</h4> |
|
443 </div> |
|
444 <div class="bd"> |
|
445 <ul> |
|
446 <!-- <li><a href="http://developer.yahoo.com/yui/event/">User's Guide</a> (external)</li> --> |
|
447 <li><a href="../../api/module_event.html">API Documentation</a></li></ul> |
|
448 </div> |
|
449 </div> |
|
450 </div> |
|
451 </div> |
|
452 |
|
453 </div> |
|
454 </div> |
|
455 |
|
456 |
|
457 <div class="yui-b toc3" id="tocWrapper"> |
|
458 <!-- TABLE OF CONTENTS --> |
|
459 <div id="toc"> |
|
460 |
|
461 <ul> |
|
462 <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="selected "><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="item"><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> |
|
463 </div> |
|
464 </div> |
|
465 </div><!--closes bd--> |
|
466 |
|
467 <div id="ft"> |
|
468 <p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
469 <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
470 <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
471 <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
472 <a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
473 </div> |
|
474 </div> |
|
475 <script language="javascript"> |
|
476 var yuiConfig = {base:"../../build/", timeout: 10000}; |
|
477 </script> |
|
478 <script src="../../assets/syntax.js"></script> |
|
479 <script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
480 <script language="javascript"> |
|
481 dp.SyntaxHighlighter.HighlightAll('code'); |
|
482 </script> |
|
483 </body> |
|
484 </html> |