|
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: Console: Creating a Console for debugging</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 #basic, #add_to_bottom { |
|
21 margin-bottom: 1em; |
|
22 } |
|
23 |
|
24 #demo .yui-console .yui-console-title { |
|
25 border: 0 none; |
|
26 color: #000; |
|
27 font-size: 13px; |
|
28 font-weight: bold; |
|
29 margin: 0; |
|
30 text-transform: none; |
|
31 } |
|
32 #demo .yui-console .yui-console-entry-meta { |
|
33 margin: 0; |
|
34 } |
|
35 </style> |
|
36 |
|
37 </head> |
|
38 <body id="yahoo-com" class=" yui-skin-sam"> |
|
39 <div id="custom-doc" class="yui-t2"> |
|
40 <div id="hd"> |
|
41 <div id="ygunav"> |
|
42 <p> |
|
43 <em> |
|
44 <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
45 </em> |
|
46 </p> |
|
47 <form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
48 <input name="vs" type="hidden" value="developer.yahoo.com"> |
|
49 <input name="vs" type="hidden" value="yuiblog.com"> |
|
50 <div id="sitesearch"> |
|
51 <label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
52 <input type="text" id="searchinput" name="p"> |
|
53 <input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
54 </div> |
|
55 </form> |
|
56 </div> |
|
57 <div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
58 <div id="pagetitle"><h1>YUI Library Examples: Console: Creating a Console for debugging</h1></div> |
|
59 </div> |
|
60 <div id="bd"> |
|
61 |
|
62 |
|
63 <div id="yui-main"> |
|
64 <div class="yui-b"> |
|
65 <div class="yui-ge"> |
|
66 <div class="yui-u first example" id="main"> |
|
67 |
|
68 <h2>Console: Creating a Console for debugging</h2> |
|
69 |
|
70 <div id="example" class="promo"> |
|
71 <div class="example-intro"> |
|
72 <p>This example walks through the basics of setting up and logging messages to a YUI Console instance. Three Console instances are created with slightly different configurations. All calls to <code>Y.log(..)</code> will be broadcast to every Console.</p> |
|
73 </div> |
|
74 |
|
75 <div class="module example-container "> |
|
76 <div class="hd exampleHd"> |
|
77 <p class="newWindowButton yui-skin-sam"> |
|
78 <a href="console_basic_clean.html" target="_blank">View example in new window.</a> |
|
79 </p> |
|
80 </div> <div id="example-canvas" class="bd"> |
|
81 |
|
82 |
|
83 <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
84 |
|
85 <div id="demo"> |
|
86 <h4>Basic Console</h4> |
|
87 <div id="basic"></div> |
|
88 <p> |
|
89 <button type="button" id="toggle_basic">hide console</button> |
|
90 </p> |
|
91 |
|
92 <h4>New messages added to bottom</h4> |
|
93 <div id="add_to_bottom"><div></div></div> |
|
94 <p> |
|
95 <button type="button" id="toggle_atb">show console</button> |
|
96 </p> |
|
97 |
|
98 <h4>Custom strings</h4> |
|
99 <p><em>Rendered in default location (top right)</em></p> |
|
100 <p> |
|
101 <button type="button" id="toggle_cstrings">show console</button> |
|
102 </p> |
|
103 |
|
104 <h4>Log some messages</h4> |
|
105 <p> |
|
106 <input type="text" id="info_text" value="I'm an info message!"> |
|
107 <button type="button" id="info">log info message</button> |
|
108 </p> |
|
109 <p> |
|
110 <input type="text" id="warn_text" value="I'm a warning!"> |
|
111 <button type="button" id="warn">log warning</button> |
|
112 </p> |
|
113 <p> |
|
114 <input type="text" id="error_text" value="I'm an error!"> |
|
115 <button type="button" id="error">log error</button> |
|
116 </p> |
|
117 </div> |
|
118 <script type="text/javascript"> |
|
119 // Create a YUI instance and request the console module and its dependencies |
|
120 YUI({base:"../../build/", timeout: 10000}).use("console", "console-filters", "dd-plugin", function (Y) { |
|
121 |
|
122 // Create and render the three Console instances |
|
123 var basic, newOnBottom, customStrings; |
|
124 |
|
125 basic = new Y.Console({ |
|
126 boundingBox: '#basic', |
|
127 style: 'block' // keeps the Console in the page flow as a block element |
|
128 }).render(); |
|
129 |
|
130 newOnBottom = new Y.Console({ |
|
131 boundingBox: '#add_to_bottom', |
|
132 contentBox: '#add_to_bottom > div', |
|
133 style: 'inline', // keeps the Console in the page flow as an inline element |
|
134 newestOnTop: false, |
|
135 visible: false |
|
136 }).render(); |
|
137 |
|
138 customStrings = new Y.Console({ |
|
139 strings: { |
|
140 title : 'Draggable Console with filters!', |
|
141 pause : 'Wait', |
|
142 clear : 'Flush', |
|
143 collapse : 'Shrink', |
|
144 expand : 'Grow' |
|
145 }, |
|
146 plugins: [ Y.Plugin.Drag, Y.Plugin.ConsoleFilters ], // add some plugins |
|
147 visible: false |
|
148 }).render(); |
|
149 |
|
150 // Set up the button listeners |
|
151 function toggle(e,cnsl) { |
|
152 if (cnsl.get('visible')) { |
|
153 cnsl.hide(); |
|
154 this.set('innerHTML','show console'); |
|
155 } else { |
|
156 cnsl.show(); |
|
157 this.set('innerHTML','hide console'); |
|
158 } |
|
159 } |
|
160 |
|
161 function report(e,type) { |
|
162 Y.log(this.get('value'),type); |
|
163 } |
|
164 |
|
165 // Display a message in the Console for reference |
|
166 Y.log("Click the buttons below to log messages"); |
|
167 |
|
168 // Pass the corresponding Console instance to the handler as a second arg |
|
169 Y.on('click', toggle, '#toggle_basic', null, basic); |
|
170 Y.on('click', toggle, '#toggle_atb', null, newOnBottom); |
|
171 Y.on('click', toggle, '#toggle_cstrings', null, customStrings); |
|
172 |
|
173 // Set the context of the event handler to the input text node |
|
174 // for convenience and pass the message type as a second arg |
|
175 Y.on('click', report, '#info', Y.one('#info_text'), 'info'); |
|
176 Y.on('click', report, '#warn', Y.one('#warn_text'), 'warn'); |
|
177 Y.on('click', report, '#error', Y.one('#error_text'), 'error'); |
|
178 |
|
179 }); |
|
180 </script> |
|
181 |
|
182 <!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
183 |
|
184 |
|
185 </div> |
|
186 </div> |
|
187 </div> |
|
188 |
|
189 <h3>Markup not required</h3> |
|
190 <p>The primary purpose of the Console is to aid in debugging your application. As such, it doesn't make much sense to require your page to include markup for something that is not bound for production.</p> |
|
191 |
|
192 <p><em>However</em>, Console is built on the Widget framework, so for this example, we'll illustrate three ways to place a Console instance on the page:</p> |
|
193 <ol> |
|
194 <li>Providing a <code>boundingBox</code> node reference.</li> |
|
195 <li>Providing both <code>boundingBox</code> and <code>contentBox</code> references.</li> |
|
196 <li>Using the default rendering behavior.</li> |
|
197 </ol> |
|
198 |
|
199 <p>For the first two cases, we need to set up some markup. We'll throw in some placeholder content for the third.</p> |
|
200 |
|
201 <div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">h4</span>></span>Basic Console<span class="sc2"><<span class="sy0">/</span><span class="kw2">h4</span>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"basic"</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">h4</span>></span>New messages added to bottom<span class="sc2"><<span class="sy0">/</span><span class="kw2">h4</span>></span></div></li><li class="li2"><div class="de2"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"add_to_bottom"</span>><<span class="kw2">div</span>><<span class="sy0">/</span><span class="kw2">div</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">h4</span>></span>Custom strings<span class="sc2"><<span class="sy0">/</span><span class="kw2">h4</span>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">p</span>><<span class="kw2">em</span>></span>Rendered in default location (top right)<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">p</span>></span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2"><<span class="kw2">h4</span>></span>Basic Console<span class="sc2"><<span class="sy0">/</span><span class="kw2">h4</span>></span> |
|
202 <span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"basic"</span>><<span class="sy0">/</span><span class="kw2">div</span>></span> |
|
203 |
|
204 <span class="sc2"><<span class="kw2">h4</span>></span>New messages added to bottom<span class="sc2"><<span class="sy0">/</span><span class="kw2">h4</span>></span> |
|
205 <span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"add_to_bottom"</span>><<span class="kw2">div</span>><<span class="sy0">/</span><span class="kw2">div</span>><<span class="sy0">/</span><span class="kw2">div</span>></span> |
|
206 |
|
207 <span class="sc2"><<span class="kw2">h4</span>></span>Custom strings<span class="sc2"><<span class="sy0">/</span><span class="kw2">h4</span>></span> |
|
208 <span class="sc2"><<span class="kw2">p</span>><<span class="kw2">em</span>></span>Rendered in default location (top right)<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">p</span>></span></pre></div><textarea id="syntax1-plain"><h4>Basic Console</h4> |
|
209 <div id="basic"></div> |
|
210 |
|
211 <h4>New messages added to bottom</h4> |
|
212 <div id="add_to_bottom"><div></div></div> |
|
213 |
|
214 <h4>Custom strings</h4> |
|
215 <p><em>Rendered in default location (top right)</em></p></textarea></div> |
|
216 <p>Then instantiate the Console instances.</p> |
|
217 |
|
218 <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">// Create a YUI instance and request the console module and its dependencies</span></div></li><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">{</span>base<span class="sy0">:</span><span class="st0">"../../build/"</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">10000</span><span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"console"</span><span class="sy0">,</span> <span class="st0">"console-filters"</span><span class="sy0">,</span> <span class="st0">"dd-plugin"</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">// Create and render the three Console instances</span></div></li><li class="li2"><div class="de2"><span class="kw2">var</span> basic<span class="sy0">,</span> newOnBottom<span class="sy0">,</span> customStrings<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">basic <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> boundingBox<span class="sy0">:</span> <span class="st0">'#basic'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> style<span class="sy0">:</span> <span class="st0">'block'</span> <span class="co1">// keeps the Console in the page flow as a block element</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span><span class="br0">)</span>.<span class="me1">render</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> <span class="co1">// note the inline render()</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">newOnBottom <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> boundingBox<span class="sy0">:</span> <span class="st0">'#add_to_bottom'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> contentBox<span class="sy0">:</span> <span class="st0">'#add_to_bottom > div'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> style<span class="sy0">:</span> <span class="st0">'inline'</span><span class="sy0">,</span> <span class="co1">// keeps the Console in the page flow as an inline element</span></div></li><li class="li1"><div class="de1"> newestOnTop<span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> visible<span class="sy0">:</span> <span class="kw2">false</span> <span class="co1">// hidden at instantiation</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span>.<span class="me1">render</span><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">customStrings <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> strings<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> title <span class="sy0">:</span> <span class="st0">'Console with custom strings!'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> pause <span class="sy0">:</span> <span class="st0">'Wait'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> clear <span class="sy0">:</span> <span class="st0">'Flush'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> collapse <span class="sy0">:</span> <span class="st0">'Shrink'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> expand <span class="sy0">:</span> <span class="st0">'Grow'</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"> plugins<span class="sy0">:</span> <span class="br0">[</span> Y.<span class="me1">Plugin</span>.<span class="me1">Drag</span><span class="sy0">,</span> Y.<span class="me1">Plugin</span>.<span class="me1">ConsoleFilters</span> <span class="br0">]</span><span class="sy0">,</span> <span class="co1">// add some plugins</span></div></li><li class="li1"><div class="de1"> visible<span class="sy0">:</span> <span class="kw2">false</span> <span class="co1">// hidden at instantiation</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span><span class="br0">)</span>.<span class="me1">render</span><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 and request the console module and its dependencies</span> |
|
219 YUI<span class="br0">(</span><span class="br0">{</span>base<span class="sy0">:</span><span class="st0">"../../build/"</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">10000</span><span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"console"</span><span class="sy0">,</span> <span class="st0">"console-filters"</span><span class="sy0">,</span> <span class="st0">"dd-plugin"</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span> |
|
220 |
|
221 <span class="co1">// Create and render the three Console instances</span> |
|
222 <span class="kw2">var</span> basic<span class="sy0">,</span> newOnBottom<span class="sy0">,</span> customStrings<span class="sy0">;</span> |
|
223 |
|
224 basic <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">(</span><span class="br0">{</span> |
|
225 boundingBox<span class="sy0">:</span> <span class="st0">'#basic'</span><span class="sy0">,</span> |
|
226 style<span class="sy0">:</span> <span class="st0">'block'</span> <span class="co1">// keeps the Console in the page flow as a block element</span> |
|
227 <span class="br0">}</span><span class="br0">)</span>.<span class="me1">render</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> <span class="co1">// note the inline render()</span> |
|
228 |
|
229 newOnBottom <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">(</span><span class="br0">{</span> |
|
230 boundingBox<span class="sy0">:</span> <span class="st0">'#add_to_bottom'</span><span class="sy0">,</span> |
|
231 contentBox<span class="sy0">:</span> <span class="st0">'#add_to_bottom > div'</span><span class="sy0">,</span> |
|
232 style<span class="sy0">:</span> <span class="st0">'inline'</span><span class="sy0">,</span> <span class="co1">// keeps the Console in the page flow as an inline element</span> |
|
233 newestOnTop<span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">,</span> |
|
234 visible<span class="sy0">:</span> <span class="kw2">false</span> <span class="co1">// hidden at instantiation</span> |
|
235 <span class="br0">}</span><span class="br0">)</span>.<span class="me1">render</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
236 |
|
237 customStrings <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">(</span><span class="br0">{</span> |
|
238 strings<span class="sy0">:</span> <span class="br0">{</span> |
|
239 title <span class="sy0">:</span> <span class="st0">'Console with custom strings!'</span><span class="sy0">,</span> |
|
240 pause <span class="sy0">:</span> <span class="st0">'Wait'</span><span class="sy0">,</span> |
|
241 clear <span class="sy0">:</span> <span class="st0">'Flush'</span><span class="sy0">,</span> |
|
242 collapse <span class="sy0">:</span> <span class="st0">'Shrink'</span><span class="sy0">,</span> |
|
243 expand <span class="sy0">:</span> <span class="st0">'Grow'</span> |
|
244 <span class="br0">}</span><span class="sy0">,</span> |
|
245 plugins<span class="sy0">:</span> <span class="br0">[</span> Y.<span class="me1">Plugin</span>.<span class="me1">Drag</span><span class="sy0">,</span> Y.<span class="me1">Plugin</span>.<span class="me1">ConsoleFilters</span> <span class="br0">]</span><span class="sy0">,</span> <span class="co1">// add some plugins</span> |
|
246 visible<span class="sy0">:</span> <span class="kw2">false</span> <span class="co1">// hidden at instantiation</span> |
|
247 <span class="br0">}</span><span class="br0">)</span>.<span class="me1">render</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
248 |
|
249 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax2-plain">// Create a YUI instance and request the console module and its dependencies |
|
250 YUI({base:"../../build/", timeout: 10000}).use("console", "console-filters", "dd-plugin", function (Y) { |
|
251 |
|
252 // Create and render the three Console instances |
|
253 var basic, newOnBottom, customStrings; |
|
254 |
|
255 basic = new Y.Console({ |
|
256 boundingBox: '#basic', |
|
257 style: 'block' // keeps the Console in the page flow as a block element |
|
258 }).render(); // note the inline render() |
|
259 |
|
260 newOnBottom = new Y.Console({ |
|
261 boundingBox: '#add_to_bottom', |
|
262 contentBox: '#add_to_bottom > div', |
|
263 style: 'inline', // keeps the Console in the page flow as an inline element |
|
264 newestOnTop: false, |
|
265 visible: false // hidden at instantiation |
|
266 }).render(); |
|
267 |
|
268 customStrings = new Y.Console({ |
|
269 strings: { |
|
270 title : 'Console with custom strings!', |
|
271 pause : 'Wait', |
|
272 clear : 'Flush', |
|
273 collapse : 'Shrink', |
|
274 expand : 'Grow' |
|
275 }, |
|
276 plugins: [ Y.Plugin.Drag, Y.Plugin.ConsoleFilters ], // add some plugins |
|
277 visible: false // hidden at instantiation |
|
278 }).render(); |
|
279 |
|
280 });</textarea></div> |
|
281 <h3>Log some messages</h3> |
|
282 <p>In your code, inserting calls to <code>Y.log(..)</code> will cause the content of those log messages to be broadcast to every Console instance present in the YUI instance. We'll illustrate this by creating some buttons to log various types of messages.</p> |
|
283 |
|
284 <div id="syntax3" 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 and request the console module and its dependencies</span></div></li><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">{</span>base<span class="sy0">:</span><span class="st0">"../../build/"</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">10000</span><span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"console"</span><span class="sy0">,</span> <span class="st0">"console-filters"</span><span class="sy0">,</span> <span class="st0">"dd-plugin"</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">// Create and render the three Console instances</span></div></li><li class="li2"><div class="de2"><span class="kw2">var</span> basic<span class="sy0">,</span> newOnBottom<span class="sy0">,</span> customStrings<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">...</div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="kw2">function</span> report<span class="br0">(</span>e<span class="sy0">,</span>type<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="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'value'</span><span class="br0">)</span><span class="sy0">,</span>type<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="li1"><div class="de1"><span class="co1">// Set the context of the event handler to the input text node</span></div></li><li class="li1"><div class="de1"><span class="co1">// for convenience and pass the message type as a second arg</span></div></li><li class="li2"><div class="de2">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#info'</span><span class="sy0">,</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">'#info_text'</span><span class="br0">)</span><span class="sy0">,</span> <span class="st0">'info'</span><span class="br0">)</span><span class="sy0">;</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> report<span class="sy0">,</span> <span class="st0">'#warn'</span><span class="sy0">,</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">'#warn_text'</span><span class="br0">)</span><span class="sy0">,</span> <span class="st0">'warn'</span><span class="br0">)</span><span class="sy0">;</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> report<span class="sy0">,</span> <span class="st0">'#error'</span><span class="sy0">,</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">'#error_text'</span><span class="br0">)</span><span class="sy0">,</span> <span class="st0">'error'</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 and request the console module and its dependencies</span> |
|
285 YUI<span class="br0">(</span><span class="br0">{</span>base<span class="sy0">:</span><span class="st0">"../../build/"</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">10000</span><span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"console"</span><span class="sy0">,</span> <span class="st0">"console-filters"</span><span class="sy0">,</span> <span class="st0">"dd-plugin"</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span> |
|
286 |
|
287 <span class="co1">// Create and render the three Console instances</span> |
|
288 <span class="kw2">var</span> basic<span class="sy0">,</span> newOnBottom<span class="sy0">,</span> customStrings<span class="sy0">;</span> |
|
289 |
|
290 ... |
|
291 |
|
292 <span class="kw2">function</span> report<span class="br0">(</span>e<span class="sy0">,</span>type<span class="br0">)</span> <span class="br0">{</span> |
|
293 Y.<span class="me1">log</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'value'</span><span class="br0">)</span><span class="sy0">,</span>type<span class="br0">)</span><span class="sy0">;</span> |
|
294 <span class="br0">}</span> |
|
295 |
|
296 <span class="co1">// Set the context of the event handler to the input text node</span> |
|
297 <span class="co1">// for convenience and pass the message type as a second arg</span> |
|
298 Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#info'</span><span class="sy0">,</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">'#info_text'</span><span class="br0">)</span><span class="sy0">,</span> <span class="st0">'info'</span><span class="br0">)</span><span class="sy0">;</span> |
|
299 Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#warn'</span><span class="sy0">,</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">'#warn_text'</span><span class="br0">)</span><span class="sy0">,</span> <span class="st0">'warn'</span><span class="br0">)</span><span class="sy0">;</span> |
|
300 Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#error'</span><span class="sy0">,</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">'#error_text'</span><span class="br0">)</span><span class="sy0">,</span> <span class="st0">'error'</span><span class="br0">)</span><span class="sy0">;</span> |
|
301 |
|
302 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax3-plain">// Create a YUI instance and request the console module and its dependencies |
|
303 YUI({base:"../../build/", timeout: 10000}).use("console", "console-filters", "dd-plugin", function (Y) { |
|
304 |
|
305 // Create and render the three Console instances |
|
306 var basic, newOnBottom, customStrings; |
|
307 |
|
308 ... |
|
309 |
|
310 function report(e,type) { |
|
311 Y.log(this.get('value'),type); |
|
312 } |
|
313 |
|
314 // Set the context of the event handler to the input text node |
|
315 // for convenience and pass the message type as a second arg |
|
316 Y.on('click', report, '#info', Y.one('#info_text'), 'info'); |
|
317 Y.on('click', report, '#warn', Y.one('#warn_text'), 'warn'); |
|
318 Y.on('click', report, '#error', Y.one('#error_text'), 'error'); |
|
319 |
|
320 });</textarea></div> |
|
321 <h3 id="full_code_listing">Full Code Listing</h3> |
|
322 |
|
323 <h4>Markup</h4> |
|
324 |
|
325 <div id="syntax4" class="yui-syntax-highlight yui-syntax-highlight-linenumbers"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"demo"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">h4</span>></span>Basic Console<span class="sc2"><<span class="sy0">/</span><span class="kw2">h4</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"basic"</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">p</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"toggle_basic"</span>></span>hide console<span class="sc2"><<span class="sy0">/</span><span class="kw2">button</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">h4</span>></span>New messages added to bottom<span class="sc2"><<span class="sy0">/</span><span class="kw2">h4</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"add_to_bottom"</span>><<span class="kw2">div</span>><<span class="sy0">/</span><span class="kw2">div</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">p</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"toggle_atb"</span>></span>show console<span class="sc2"><<span class="sy0">/</span><span class="kw2">button</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">h4</span>></span>Custom strings<span class="sc2"><<span class="sy0">/</span><span class="kw2">h4</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">p</span>><<span class="kw2">em</span>></span>Rendered in default location (top right)<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">p</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">p</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"toggle_cstrings"</span>></span>show console<span class="sc2"><<span class="sy0">/</span><span class="kw2">button</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">h4</span>></span>Log some messages<span class="sc2"><<span class="sy0">/</span><span class="kw2">h4</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">p</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"info_text"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"I'm an info message!"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"info"</span>></span>log info message<span class="sc2"><<span class="sy0">/</span><span class="kw2">button</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">p</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"warn_text"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"I'm a warning!"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"warn"</span>></span>log warning<span class="sc2"><<span class="sy0">/</span><span class="kw2">button</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">p</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"error_text"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"I'm an error!"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"error"</span>></span>log error<span class="sc2"><<span class="sy0">/</span><span class="kw2">button</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"demo"</span>></span> |
|
326 <span class="sc2"><<span class="kw2">h4</span>></span>Basic Console<span class="sc2"><<span class="sy0">/</span><span class="kw2">h4</span>></span> |
|
327 <span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"basic"</span>><<span class="sy0">/</span><span class="kw2">div</span>></span> |
|
328 <span class="sc2"><<span class="kw2">p</span>></span> |
|
329 <span class="sc2"><<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"toggle_basic"</span>></span>hide console<span class="sc2"><<span class="sy0">/</span><span class="kw2">button</span>></span> |
|
330 <span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span> |
|
331 |
|
332 <span class="sc2"><<span class="kw2">h4</span>></span>New messages added to bottom<span class="sc2"><<span class="sy0">/</span><span class="kw2">h4</span>></span> |
|
333 <span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"add_to_bottom"</span>><<span class="kw2">div</span>><<span class="sy0">/</span><span class="kw2">div</span>><<span class="sy0">/</span><span class="kw2">div</span>></span> |
|
334 <span class="sc2"><<span class="kw2">p</span>></span> |
|
335 <span class="sc2"><<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"toggle_atb"</span>></span>show console<span class="sc2"><<span class="sy0">/</span><span class="kw2">button</span>></span> |
|
336 <span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span> |
|
337 |
|
338 <span class="sc2"><<span class="kw2">h4</span>></span>Custom strings<span class="sc2"><<span class="sy0">/</span><span class="kw2">h4</span>></span> |
|
339 <span class="sc2"><<span class="kw2">p</span>><<span class="kw2">em</span>></span>Rendered in default location (top right)<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">p</span>></span> |
|
340 <span class="sc2"><<span class="kw2">p</span>></span> |
|
341 <span class="sc2"><<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"toggle_cstrings"</span>></span>show console<span class="sc2"><<span class="sy0">/</span><span class="kw2">button</span>></span> |
|
342 <span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span> |
|
343 |
|
344 <span class="sc2"><<span class="kw2">h4</span>></span>Log some messages<span class="sc2"><<span class="sy0">/</span><span class="kw2">h4</span>></span> |
|
345 <span class="sc2"><<span class="kw2">p</span>></span> |
|
346 <span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"info_text"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"I'm an info message!"</span>></span> |
|
347 <span class="sc2"><<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"info"</span>></span>log info message<span class="sc2"><<span class="sy0">/</span><span class="kw2">button</span>></span> |
|
348 <span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span> |
|
349 <span class="sc2"><<span class="kw2">p</span>></span> |
|
350 <span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"warn_text"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"I'm a warning!"</span>></span> |
|
351 <span class="sc2"><<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"warn"</span>></span>log warning<span class="sc2"><<span class="sy0">/</span><span class="kw2">button</span>></span> |
|
352 <span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span> |
|
353 <span class="sc2"><<span class="kw2">p</span>></span> |
|
354 <span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"error_text"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"I'm an error!"</span>></span> |
|
355 <span class="sc2"><<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"error"</span>></span>log error<span class="sc2"><<span class="sy0">/</span><span class="kw2">button</span>></span> |
|
356 <span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span> |
|
357 <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></pre></div><textarea id="syntax4-plain"><div id="demo"> |
|
358 <h4>Basic Console</h4> |
|
359 <div id="basic"></div> |
|
360 <p> |
|
361 <button type="button" id="toggle_basic">hide console</button> |
|
362 </p> |
|
363 |
|
364 <h4>New messages added to bottom</h4> |
|
365 <div id="add_to_bottom"><div></div></div> |
|
366 <p> |
|
367 <button type="button" id="toggle_atb">show console</button> |
|
368 </p> |
|
369 |
|
370 <h4>Custom strings</h4> |
|
371 <p><em>Rendered in default location (top right)</em></p> |
|
372 <p> |
|
373 <button type="button" id="toggle_cstrings">show console</button> |
|
374 </p> |
|
375 |
|
376 <h4>Log some messages</h4> |
|
377 <p> |
|
378 <input type="text" id="info_text" value="I'm an info message!"> |
|
379 <button type="button" id="info">log info message</button> |
|
380 </p> |
|
381 <p> |
|
382 <input type="text" id="warn_text" value="I'm a warning!"> |
|
383 <button type="button" id="warn">log warning</button> |
|
384 </p> |
|
385 <p> |
|
386 <input type="text" id="error_text" value="I'm an error!"> |
|
387 <button type="button" id="error">log error</button> |
|
388 </p> |
|
389 </div></textarea></div> |
|
390 <h4>JavaScript</h4> |
|
391 |
|
392 <div id="syntax5" class="yui-syntax-highlight yui-syntax-highlight-linenumbers"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Create a YUI instance and request the console module and its dependencies</span></div></li><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">{</span>base<span class="sy0">:</span><span class="st0">"../../build/"</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">10000</span><span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"console"</span><span class="sy0">,</span> <span class="st0">"console-filters"</span><span class="sy0">,</span> <span class="st0">"dd-plugin"</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">// Create and render the three Console instances</span></div></li><li class="li2"><div class="de2"><span class="kw2">var</span> basic<span class="sy0">,</span> newOnBottom<span class="sy0">,</span> customStrings<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">basic <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> boundingBox<span class="sy0">:</span> <span class="st0">'#basic'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> style<span class="sy0">:</span> <span class="st0">'block'</span> <span class="co1">// keeps the Console in the page flow as a block element</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span><span class="br0">)</span>.<span class="me1">render</span><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">newOnBottom <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> boundingBox<span class="sy0">:</span> <span class="st0">'#add_to_bottom'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> contentBox<span class="sy0">:</span> <span class="st0">'#add_to_bottom > div'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> style<span class="sy0">:</span> <span class="st0">'inline'</span><span class="sy0">,</span> <span class="co1">// keeps the Console in the page flow as an inline element</span></div></li><li class="li1"><div class="de1"> newestOnTop<span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> visible<span class="sy0">:</span> <span class="kw2">false</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span>.<span class="me1">render</span><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">customStrings <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> strings<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> title <span class="sy0">:</span> <span class="st0">'Draggable Console with filters!'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> pause <span class="sy0">:</span> <span class="st0">'Wait'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> clear <span class="sy0">:</span> <span class="st0">'Flush'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> collapse <span class="sy0">:</span> <span class="st0">'Shrink'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> expand <span class="sy0">:</span> <span class="st0">'Grow'</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"> plugins<span class="sy0">:</span> <span class="br0">[</span> Y.<span class="me1">Plugin</span>.<span class="me1">Drag</span><span class="sy0">,</span> Y.<span class="me1">Plugin</span>.<span class="me1">ConsoleFilters</span> <span class="br0">]</span><span class="sy0">,</span> <span class="co1">// add some plugins</span></div></li><li class="li1"><div class="de1"> visible<span class="sy0">:</span> <span class="kw2">false</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span><span class="br0">)</span>.<span class="me1">render</span><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">// Set up the button listeners</span></div></li><li class="li1"><div class="de1"><span class="kw2">function</span> toggle<span class="br0">(</span>e<span class="sy0">,</span>cnsl<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>cnsl.<span class="me1">get</span><span class="br0">(</span><span class="st0">'visible'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> cnsl.<span class="me1">hide</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">set</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="sy0">,</span><span class="st0">'show console'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> cnsl.<span class="me1">show</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">set</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="sy0">,</span><span class="st0">'hide console'</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><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="kw2">function</span> report<span class="br0">(</span>e<span class="sy0">,</span>type<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="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'value'</span><span class="br0">)</span><span class="sy0">,</span>type<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="co1">// Display a message in the Console for reference</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Click the buttons below to log messages"</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">// Pass the corresponding Console instance to the handler as a second arg</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> toggle<span class="sy0">,</span> <span class="st0">'#toggle_basic'</span><span class="sy0">,</span> <span class="kw2">null</span><span class="sy0">,</span> basic<span class="br0">)</span><span class="sy0">;</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> toggle<span class="sy0">,</span> <span class="st0">'#toggle_atb'</span><span class="sy0">,</span> <span class="kw2">null</span><span class="sy0">,</span> newOnBottom<span class="br0">)</span><span class="sy0">;</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> toggle<span class="sy0">,</span> <span class="st0">'#toggle_cstrings'</span><span class="sy0">,</span> <span class="kw2">null</span><span class="sy0">,</span> customStrings<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">// Set the context of the event handler to the input text node</span></div></li><li class="li1"><div class="de1"><span class="co1">// for convenience and pass the message type as a second arg</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> report<span class="sy0">,</span> <span class="st0">'#info'</span><span class="sy0">,</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">'#info_text'</span><span class="br0">)</span><span class="sy0">,</span> <span class="st0">'info'</span><span class="br0">)</span><span class="sy0">;</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> report<span class="sy0">,</span> <span class="st0">'#warn'</span><span class="sy0">,</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">'#warn_text'</span><span class="br0">)</span><span class="sy0">,</span> <span class="st0">'warn'</span><span class="br0">)</span><span class="sy0">;</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> report<span class="sy0">,</span> <span class="st0">'#error'</span><span class="sy0">,</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">'#error_text'</span><span class="br0">)</span><span class="sy0">,</span> <span class="st0">'error'</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="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 and request the console module and its dependencies</span> |
|
393 YUI<span class="br0">(</span><span class="br0">{</span>base<span class="sy0">:</span><span class="st0">"../../build/"</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">10000</span><span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"console"</span><span class="sy0">,</span> <span class="st0">"console-filters"</span><span class="sy0">,</span> <span class="st0">"dd-plugin"</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span> |
|
394 |
|
395 <span class="co1">// Create and render the three Console instances</span> |
|
396 <span class="kw2">var</span> basic<span class="sy0">,</span> newOnBottom<span class="sy0">,</span> customStrings<span class="sy0">;</span> |
|
397 |
|
398 basic <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">(</span><span class="br0">{</span> |
|
399 boundingBox<span class="sy0">:</span> <span class="st0">'#basic'</span><span class="sy0">,</span> |
|
400 style<span class="sy0">:</span> <span class="st0">'block'</span> <span class="co1">// keeps the Console in the page flow as a block element</span> |
|
401 <span class="br0">}</span><span class="br0">)</span>.<span class="me1">render</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
402 |
|
403 newOnBottom <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">(</span><span class="br0">{</span> |
|
404 boundingBox<span class="sy0">:</span> <span class="st0">'#add_to_bottom'</span><span class="sy0">,</span> |
|
405 contentBox<span class="sy0">:</span> <span class="st0">'#add_to_bottom > div'</span><span class="sy0">,</span> |
|
406 style<span class="sy0">:</span> <span class="st0">'inline'</span><span class="sy0">,</span> <span class="co1">// keeps the Console in the page flow as an inline element</span> |
|
407 newestOnTop<span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">,</span> |
|
408 visible<span class="sy0">:</span> <span class="kw2">false</span> |
|
409 <span class="br0">}</span><span class="br0">)</span>.<span class="me1">render</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
410 |
|
411 customStrings <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">(</span><span class="br0">{</span> |
|
412 strings<span class="sy0">:</span> <span class="br0">{</span> |
|
413 title <span class="sy0">:</span> <span class="st0">'Draggable Console with filters!'</span><span class="sy0">,</span> |
|
414 pause <span class="sy0">:</span> <span class="st0">'Wait'</span><span class="sy0">,</span> |
|
415 clear <span class="sy0">:</span> <span class="st0">'Flush'</span><span class="sy0">,</span> |
|
416 collapse <span class="sy0">:</span> <span class="st0">'Shrink'</span><span class="sy0">,</span> |
|
417 expand <span class="sy0">:</span> <span class="st0">'Grow'</span> |
|
418 <span class="br0">}</span><span class="sy0">,</span> |
|
419 plugins<span class="sy0">:</span> <span class="br0">[</span> Y.<span class="me1">Plugin</span>.<span class="me1">Drag</span><span class="sy0">,</span> Y.<span class="me1">Plugin</span>.<span class="me1">ConsoleFilters</span> <span class="br0">]</span><span class="sy0">,</span> <span class="co1">// add some plugins</span> |
|
420 visible<span class="sy0">:</span> <span class="kw2">false</span> |
|
421 <span class="br0">}</span><span class="br0">)</span>.<span class="me1">render</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
422 |
|
423 <span class="co1">// Set up the button listeners</span> |
|
424 <span class="kw2">function</span> toggle<span class="br0">(</span>e<span class="sy0">,</span>cnsl<span class="br0">)</span> <span class="br0">{</span> |
|
425 <span class="kw1">if</span> <span class="br0">(</span>cnsl.<span class="me1">get</span><span class="br0">(</span><span class="st0">'visible'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span> |
|
426 cnsl.<span class="me1">hide</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
427 <span class="kw1">this</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="sy0">,</span><span class="st0">'show console'</span><span class="br0">)</span><span class="sy0">;</span> |
|
428 <span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span> |
|
429 cnsl.<span class="me1">show</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
430 <span class="kw1">this</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="sy0">,</span><span class="st0">'hide console'</span><span class="br0">)</span><span class="sy0">;</span> |
|
431 <span class="br0">}</span> |
|
432 <span class="br0">}</span> |
|
433 |
|
434 <span class="kw2">function</span> report<span class="br0">(</span>e<span class="sy0">,</span>type<span class="br0">)</span> <span class="br0">{</span> |
|
435 Y.<span class="me1">log</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'value'</span><span class="br0">)</span><span class="sy0">,</span>type<span class="br0">)</span><span class="sy0">;</span> |
|
436 <span class="br0">}</span> |
|
437 |
|
438 <span class="co1">// Display a message in the Console for reference</span> |
|
439 Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Click the buttons below to log messages"</span><span class="br0">)</span><span class="sy0">;</span> |
|
440 |
|
441 <span class="co1">// Pass the corresponding Console instance to the handler as a second arg</span> |
|
442 Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span> toggle<span class="sy0">,</span> <span class="st0">'#toggle_basic'</span><span class="sy0">,</span> <span class="kw2">null</span><span class="sy0">,</span> basic<span class="br0">)</span><span class="sy0">;</span> |
|
443 Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span> toggle<span class="sy0">,</span> <span class="st0">'#toggle_atb'</span><span class="sy0">,</span> <span class="kw2">null</span><span class="sy0">,</span> newOnBottom<span class="br0">)</span><span class="sy0">;</span> |
|
444 Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span> toggle<span class="sy0">,</span> <span class="st0">'#toggle_cstrings'</span><span class="sy0">,</span> <span class="kw2">null</span><span class="sy0">,</span> customStrings<span class="br0">)</span><span class="sy0">;</span> |
|
445 |
|
446 <span class="co1">// Set the context of the event handler to the input text node</span> |
|
447 <span class="co1">// for convenience and pass the message type as a second arg</span> |
|
448 Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#info'</span><span class="sy0">,</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">'#info_text'</span><span class="br0">)</span><span class="sy0">,</span> <span class="st0">'info'</span><span class="br0">)</span><span class="sy0">;</span> |
|
449 Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#warn'</span><span class="sy0">,</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">'#warn_text'</span><span class="br0">)</span><span class="sy0">,</span> <span class="st0">'warn'</span><span class="br0">)</span><span class="sy0">;</span> |
|
450 Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#error'</span><span class="sy0">,</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">'#error_text'</span><span class="br0">)</span><span class="sy0">,</span> <span class="st0">'error'</span><span class="br0">)</span><span class="sy0">;</span> |
|
451 |
|
452 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax5-plain">// Create a YUI instance and request the console module and its dependencies |
|
453 YUI({base:"../../build/", timeout: 10000}).use("console", "console-filters", "dd-plugin", function (Y) { |
|
454 |
|
455 // Create and render the three Console instances |
|
456 var basic, newOnBottom, customStrings; |
|
457 |
|
458 basic = new Y.Console({ |
|
459 boundingBox: '#basic', |
|
460 style: 'block' // keeps the Console in the page flow as a block element |
|
461 }).render(); |
|
462 |
|
463 newOnBottom = new Y.Console({ |
|
464 boundingBox: '#add_to_bottom', |
|
465 contentBox: '#add_to_bottom > div', |
|
466 style: 'inline', // keeps the Console in the page flow as an inline element |
|
467 newestOnTop: false, |
|
468 visible: false |
|
469 }).render(); |
|
470 |
|
471 customStrings = new Y.Console({ |
|
472 strings: { |
|
473 title : 'Draggable Console with filters!', |
|
474 pause : 'Wait', |
|
475 clear : 'Flush', |
|
476 collapse : 'Shrink', |
|
477 expand : 'Grow' |
|
478 }, |
|
479 plugins: [ Y.Plugin.Drag, Y.Plugin.ConsoleFilters ], // add some plugins |
|
480 visible: false |
|
481 }).render(); |
|
482 |
|
483 // Set up the button listeners |
|
484 function toggle(e,cnsl) { |
|
485 if (cnsl.get('visible')) { |
|
486 cnsl.hide(); |
|
487 this.set('innerHTML','show console'); |
|
488 } else { |
|
489 cnsl.show(); |
|
490 this.set('innerHTML','hide console'); |
|
491 } |
|
492 } |
|
493 |
|
494 function report(e,type) { |
|
495 Y.log(this.get('value'),type); |
|
496 } |
|
497 |
|
498 // Display a message in the Console for reference |
|
499 Y.log("Click the buttons below to log messages"); |
|
500 |
|
501 // Pass the corresponding Console instance to the handler as a second arg |
|
502 Y.on('click', toggle, '#toggle_basic', null, basic); |
|
503 Y.on('click', toggle, '#toggle_atb', null, newOnBottom); |
|
504 Y.on('click', toggle, '#toggle_cstrings', null, customStrings); |
|
505 |
|
506 // Set the context of the event handler to the input text node |
|
507 // for convenience and pass the message type as a second arg |
|
508 Y.on('click', report, '#info', Y.one('#info_text'), 'info'); |
|
509 Y.on('click', report, '#warn', Y.one('#warn_text'), 'warn'); |
|
510 Y.on('click', report, '#error', Y.one('#error_text'), 'error'); |
|
511 |
|
512 });</textarea></div> |
|
513 <h4>CSS</h4> |
|
514 |
|
515 <div id="syntax6" class="yui-syntax-highlight yui-syntax-highlight-linenumbers"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* Override default positioning for two of the example Consoles */</span></div></li><li class="li1"><div class="de1"><span class="re0">#basic</span><span class="sy0">,</span> <span class="re0">#add_to_bottom</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">margin-bottom</span><span class="sy0">:</span> <span class="re3">1em</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"> </div></li><li class="li1"><div class="de1"><span class="coMULTI">/* Reapply some style settings that were overridden by the page chrome */</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.yui-console</span> <span class="re1">.yui-console-title</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">border</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="kw2">none</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#000</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">13px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">font-weight</span><span class="sy0">:</span> <span class="kw2">bold</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">text-transform</span><span class="sy0">:</span> <span class="kw2">none</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="re0">#demo</span> <span class="re1">.yui-console</span> <span class="re1">.yui-console-entry-meta</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</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="css" style="font-family:monospace;"><span class="coMULTI">/* Override default positioning for two of the example Consoles */</span> |
|
516 <span class="re0">#basic</span><span class="sy0">,</span> <span class="re0">#add_to_bottom</span> <span class="br0">{</span> |
|
517 <span class="kw1">margin-bottom</span><span class="sy0">:</span> <span class="re3">1em</span><span class="sy0">;</span> |
|
518 <span class="br0">}</span> |
|
519 |
|
520 <span class="coMULTI">/* Reapply some style settings that were overridden by the page chrome */</span> |
|
521 <span class="re0">#demo</span> <span class="re1">.yui-console</span> <span class="re1">.yui-console-title</span> <span class="br0">{</span> |
|
522 <span class="kw1">border</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="kw2">none</span><span class="sy0">;</span> |
|
523 <span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#000</span><span class="sy0">;</span> |
|
524 <span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">13px</span><span class="sy0">;</span> |
|
525 <span class="kw1">font-weight</span><span class="sy0">:</span> <span class="kw2">bold</span><span class="sy0">;</span> |
|
526 <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> |
|
527 <span class="kw1">text-transform</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span> |
|
528 <span class="br0">}</span> |
|
529 <span class="re0">#demo</span> <span class="re1">.yui-console</span> <span class="re1">.yui-console-entry-meta</span> <span class="br0">{</span> |
|
530 <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> |
|
531 <span class="br0">}</span></pre></div><textarea id="syntax6-plain">/* Override default positioning for two of the example Consoles */ |
|
532 #basic, #add_to_bottom { |
|
533 margin-bottom: 1em; |
|
534 } |
|
535 |
|
536 /* Reapply some style settings that were overridden by the page chrome */ |
|
537 #demo .yui-console .yui-console-title { |
|
538 border: 0 none; |
|
539 color: #000; |
|
540 font-size: 13px; |
|
541 font-weight: bold; |
|
542 margin: 0; |
|
543 text-transform: none; |
|
544 } |
|
545 #demo .yui-console .yui-console-entry-meta { |
|
546 margin: 0; |
|
547 }</textarea></div> </div> |
|
548 <div class="yui-u sidebar"> |
|
549 |
|
550 |
|
551 <div id="examples" class="mod box4"> |
|
552 <div class="hd"> |
|
553 <h4> |
|
554 Console Examples:</h4> |
|
555 </div> |
|
556 <div class="bd"> |
|
557 <ul> |
|
558 <li class='selected'><a href='../console/console_basic.html'>Creating a Console for debugging</a></li><li><a href='../console/console_yui_config.html'>YUI configuration to filter log messages</a></li><li><a href='../console/console_global.html'>Creating a universal Console</a></li><li><a href='../console-filters/console-filters_intro.html'>Using the ConsoleFilters plugin (included with examples for Plugin.ConsoleFilters)</a></li> </ul> |
|
559 </div> |
|
560 </div> |
|
561 |
|
562 <div class="mod box4"> |
|
563 <div class="hd"> |
|
564 <h4>More Console Resources:</h4> |
|
565 </div> |
|
566 <div class="bd"> |
|
567 <ul> |
|
568 <!-- <li><a href="http://developer.yahoo.com/yui/console/">User's Guide</a> (external)</li> --> |
|
569 <li><a href="../../api/module_console.html">API Documentation</a></li></ul> |
|
570 </div> |
|
571 </div> |
|
572 </div> |
|
573 </div> |
|
574 |
|
575 </div> |
|
576 </div> |
|
577 |
|
578 |
|
579 <div class="yui-b toc3" id="tocWrapper"> |
|
580 <!-- TABLE OF CONTENTS --> |
|
581 <div id="toc"> |
|
582 |
|
583 <ul> |
|
584 <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="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="selected "><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> |
|
585 </div> |
|
586 </div> |
|
587 </div><!--closes bd--> |
|
588 |
|
589 <div id="ft"> |
|
590 <p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
591 <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
592 <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
593 <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
594 <a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
595 </div> |
|
596 </div> |
|
597 <script language="javascript"> |
|
598 var yuiConfig = {base:"../../build/", timeout: 10000}; |
|
599 </script> |
|
600 <script src="../../assets/syntax.js"></script> |
|
601 <script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
602 <script language="javascript"> |
|
603 dp.SyntaxHighlighter.HighlightAll('code'); |
|
604 </script> |
|
605 </body> |
|
606 </html> |