|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
2 <html> |
|
3 <head> |
|
4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
5 <title>YUI 3.x: CSS Grids Units Example</title> |
|
6 <link rel="stylesheet" href="../../build/cssreset/cssreset.css" type="text/css"> |
|
7 <link rel="stylesheet" href="../../build/cssfonts/cssfonts.css" type="text/css"> |
|
8 <link rel="stylesheet" href="../../build/cssgrids/cssgrids.css" type="text/css"> |
|
9 <script src="../../build/yui/yui-min.js"></script> |
|
10 <style> |
|
11 div.yui3-g { |
|
12 text-align:center; |
|
13 vertical-align:middle; |
|
14 } |
|
15 |
|
16 body { |
|
17 margin-left: 10px; /* left gutter */ |
|
18 text-rendering: optimizeLegibility; |
|
19 } |
|
20 |
|
21 .content { |
|
22 position: relative; |
|
23 text-align: center; |
|
24 border:solid #999; |
|
25 border-width:1px; |
|
26 color:#000; |
|
27 margin: 15px 10px 15px 0; /*10px 10px 0 0; "column" gutters */ |
|
28 padding:5px 2px; |
|
29 background: url(../assets/cssgrids/images/grid_text.png) repeat-x #F9F9F4; |
|
30 z-index: 1; |
|
31 } |
|
32 .content label { |
|
33 margin: 0 auto; |
|
34 background-color: #FFFCE7; |
|
35 padding: 1px 6px; |
|
36 font-weight: bold; |
|
37 font-family: courier; |
|
38 -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); |
|
39 -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); |
|
40 z-index: 2; |
|
41 } |
|
42 .snippet { |
|
43 width: 100%; |
|
44 height: 15em; |
|
45 font-family: courier; |
|
46 } |
|
47 .yui3-selected { |
|
48 background-color: #CED8EF; |
|
49 } |
|
50 h3 { |
|
51 font-size: 190%; |
|
52 margin: 0.5em 0; |
|
53 } |
|
54 |
|
55 |
|
56 /**** panel style ****/ |
|
57 .yui3-skin-sam .yui3-panel .yui3-button{ |
|
58 margin: 0.3em 0.6em; |
|
59 } |
|
60 .yui3-skin-sam .yui3-panel .yui3-panel-content .yui3-widget-hd{ |
|
61 font-weight: bold; |
|
62 } |
|
63 .yui3-skin-sam .yui3-panel .yui3-panel-content .yui3-widget-bd{ |
|
64 text-align: center; |
|
65 padding: 1.5em 1em 1.8em; |
|
66 } |
|
67 .yui3-skin-sam .yui3-panel .yui3-panel-content .yui3-widget-ft{ |
|
68 border-radius: 0 0 3px 3px; |
|
69 background-color: #F5F4F1; |
|
70 border-top: solid 1px #EAE6DB; |
|
71 } |
|
72 .yui3-skin-sam .yui3-panel .yui3-panel-content { |
|
73 background: none repeat scroll 0 0 white; |
|
74 border: 1px solid #000; |
|
75 box-shadow: 0 0 15px rgba(0,0,0,0.4); |
|
76 border-radius: 3px; |
|
77 text-align: center; |
|
78 } |
|
79 .yui3-skin-sam .yui3-widget-mask { |
|
80 opacity: 0.3 !important; |
|
81 } |
|
82 |
|
83 |
|
84 |
|
85 </style> |
|
86 |
|
87 </head> |
|
88 <body class="yui3-skin-sam"> |
|
89 <h3>Click on a row to see its code snippet</h3> |
|
90 <div class="yui3-g"> |
|
91 <div class="yui3-u-1-2"> |
|
92 <div class="content"><label>1/2</label></div> |
|
93 </div> |
|
94 <div class="yui3-u-1-2"> |
|
95 <div class="content"><label>1/2</label></div> |
|
96 </div> |
|
97 </div> |
|
98 <div class="yui3-g"> |
|
99 <div class="yui3-u-1-4"> |
|
100 <div class="content"><label>1/4</label></div> |
|
101 </div> |
|
102 <div class="yui3-u-1-4"> |
|
103 <div class="content"><label>1/4</label></div> |
|
104 </div> |
|
105 <div class="yui3-u-1-4"> |
|
106 <div class="content"><label>1/4</label></div> |
|
107 </div> |
|
108 <div class="yui3-u-1-4"> |
|
109 <div class="content"><label>1/4</label></div> |
|
110 </div> |
|
111 </div> |
|
112 <div class="yui3-g"> |
|
113 <div class="yui3-u-3-4"> |
|
114 <div class="content"><label>3/4</label></div> |
|
115 </div> |
|
116 <div class="yui3-u-1-4"> |
|
117 <div class="content"><label>1/4</label></div> |
|
118 </div> |
|
119 </div> |
|
120 <div class="yui3-g"> |
|
121 <div class="yui3-u-1-3"> |
|
122 <div class="content"><label>1/3</label></div> |
|
123 </div> |
|
124 <div class="yui3-u-1-3"> |
|
125 <div class="content"><label>1/3</label></div> |
|
126 </div> |
|
127 <div class="yui3-u-1-3"> |
|
128 <div class="content"><label>1/3</label></div> |
|
129 </div> |
|
130 </div> |
|
131 <div class="yui3-g"> |
|
132 <div class="yui3-u-1-3"> |
|
133 <div class="content"><label>1/3</label></div> |
|
134 </div> |
|
135 <div class="yui3-u-2-3"> |
|
136 <div class="content"><label>2/3</label></div> |
|
137 </div> |
|
138 </div> |
|
139 <div class="yui3-g"> |
|
140 <div class="yui3-u-1-5"> |
|
141 <div class="content"><label>1/5</label></div> |
|
142 </div> |
|
143 <div class="yui3-u-2-5"> |
|
144 <div class="content"><label>2/5</label></div> |
|
145 </div> |
|
146 <div class="yui3-u-2-5"> |
|
147 <div class="content"><label>2/5</label></div> |
|
148 </div> |
|
149 </div> |
|
150 <div class="yui3-g"> |
|
151 <div class="yui3-u-3-5"> |
|
152 <div class="content"><label>3/5</label></div> |
|
153 </div> |
|
154 <div class="yui3-u-2-5"> |
|
155 <div class="content"><label>2/5</label></div> |
|
156 </div> |
|
157 </div> |
|
158 <div class="yui3-g"> |
|
159 <div class="yui3-u-1-6"> |
|
160 <div class="content"><label>1/6</label></div> |
|
161 </div> |
|
162 <div class="yui3-u-1-6"> |
|
163 <div class="content"><label>1/6</label></div> |
|
164 </div> |
|
165 <div class="yui3-u-1-6"> |
|
166 <div class="content"><label>1/6</label></div> |
|
167 </div> |
|
168 <div class="yui3-u-1-6"> |
|
169 <div class="content"><label>1/6</label></div> |
|
170 </div> |
|
171 <div class="yui3-u-1-6"> |
|
172 <div class="content"><label>1/6</label></div> |
|
173 </div> |
|
174 <div class="yui3-u-1-6"> |
|
175 <div class="content"><label>1/6</label></div> |
|
176 </div> |
|
177 </div> |
|
178 <div class="yui3-g"> |
|
179 <div class="yui3-u-1-6"> |
|
180 <div class="content"><label>1/6</label></div> |
|
181 </div> |
|
182 <div class="yui3-u-5-6"> |
|
183 <div class="content"><label>5/6</label></div> |
|
184 </div> |
|
185 </div> |
|
186 <div class="yui3-g"> |
|
187 <div class="yui3-u-1-8"> |
|
188 <div class="content"><label>1/8</label></div> |
|
189 </div> |
|
190 <div class="yui3-u-3-8"> |
|
191 <div class="content"><label>3/8</label></div> |
|
192 </div> |
|
193 <div class="yui3-u-3-8"> |
|
194 <div class="content"><label>3/8</label></div> |
|
195 </div> |
|
196 <div class="yui3-u-1-8"> |
|
197 <div class="content"><label>1/8</label></div> |
|
198 </div> |
|
199 </div> |
|
200 <div class="yui3-g"> |
|
201 <div class="yui3-u-3-8"> |
|
202 <div class="content"><label>3/8</label></div> |
|
203 </div> |
|
204 <div class="yui3-u-5-8"> |
|
205 <div class="content"><label>5/8</label></div> |
|
206 </div> |
|
207 </div> |
|
208 <div class="yui3-g"> |
|
209 <div class="yui3-u-7-8"> |
|
210 <div class="content"><label>7/8</label></div> |
|
211 </div> |
|
212 <div class="yui3-u-1-8"> |
|
213 <div class="content"><label>1/8</label></div> |
|
214 </div> |
|
215 </div> |
|
216 <div class="yui3-g"> |
|
217 <div class="yui3-u-1-4"> |
|
218 <div class="content"><label>1/4</label></div> |
|
219 </div> |
|
220 <div class="yui3-u-1-2"> |
|
221 <div class="content"><label>1/2</label></div> |
|
222 </div> |
|
223 <div class="yui3-u-1-4"> |
|
224 <div class="content"><label>1/4</label></div> |
|
225 </div> |
|
226 </div> |
|
227 <div class="yui3-g"> |
|
228 <div class="yui3-u-1-8"> |
|
229 <div class="content"><label>1/8</label></div> |
|
230 </div> |
|
231 <div class="yui3-u-1-2"> |
|
232 <div class="content"><label>1/2</label></div> |
|
233 </div> |
|
234 <div class="yui3-u-1-8"> |
|
235 <div class="content"><label>1/8</label></div> |
|
236 </div> |
|
237 <div class="yui3-u-1-4"> |
|
238 <div class="content"><label>1/4</label></div> |
|
239 </div> |
|
240 </div> |
|
241 |
|
242 <div class="yui3-g"> |
|
243 <div class="yui3-u-1-12"> |
|
244 <div class="content"><label>1/12</label></div> |
|
245 </div> |
|
246 <div class="yui3-u-5-12"> |
|
247 <div class="content"><label>5/12</label></div> |
|
248 </div> |
|
249 <div class="yui3-u-5-12"> |
|
250 <div class="content"><label>5/12</label></div> |
|
251 </div> |
|
252 <div class="yui3-u-1-12"> |
|
253 <div class="content"><label>1/12</label></div> |
|
254 </div> |
|
255 </div> |
|
256 |
|
257 <div class="yui3-g"> |
|
258 <div class="yui3-u-7-12"> |
|
259 <div class="content"><label>7/12</label></div> |
|
260 </div> |
|
261 <div class="yui3-u-5-12"> |
|
262 <div class="content"><label>5/12</label></div> |
|
263 </div> |
|
264 </div> |
|
265 |
|
266 <div class="yui3-g"> |
|
267 <div class="yui3-u-11-12"> |
|
268 <div class="content"><label>11/12</label></div> |
|
269 </div> |
|
270 <div class="yui3-u-1-12"> |
|
271 <div class="content"><label>1/12</label></div> |
|
272 </div> |
|
273 </div> |
|
274 |
|
275 <div class="yui3-g"> |
|
276 <div class="yui3-u-1-24"> |
|
277 <div class="content"><label>1/24</label></div> |
|
278 </div> |
|
279 <div class="yui3-u-5-24"> |
|
280 <div class="content"><label>5/24</label></div> |
|
281 </div> |
|
282 <div class="yui3-u-7-24"> |
|
283 <div class="content"><label>7/24</label></div> |
|
284 </div> |
|
285 <div class="yui3-u-11-24"> |
|
286 <div class="content"><label>11/24</label></div> |
|
287 </div> |
|
288 </div> |
|
289 |
|
290 <div class="yui3-g"> |
|
291 <div class="yui3-u-17-24"> |
|
292 <div class="content"><label>17/24</label></div> |
|
293 </div> |
|
294 <div class="yui3-u-7-24"> |
|
295 <div class="content"><label>7/24</label></div> |
|
296 </div> |
|
297 </div> |
|
298 <div class="yui3-g"> |
|
299 <div class="yui3-u-19-24"> |
|
300 <div class="content"><label>19/24</label></div> |
|
301 </div> |
|
302 <div class="yui3-u-5-24"> |
|
303 <div class="content"><label>5/24</label></div> |
|
304 </div> |
|
305 </div> |
|
306 <div class="yui3-g"> |
|
307 <div class="yui3-u-23-24"> |
|
308 <div class="content"><label>23/24</label></div> |
|
309 </div> |
|
310 <div class="yui3-u-1-24"> |
|
311 <div class="content"><label>1/24</label></div> |
|
312 </div> |
|
313 </div> |
|
314 </body> |
|
315 <script> |
|
316 YUI().use('node', 'panel', 'dd-plugin', function(Y){ |
|
317 |
|
318 var dialog = new Y.Panel({ |
|
319 headerContent: '<div>Code Snippet</div>', |
|
320 bodyContent: '<textarea class="snippet"></textarea>', |
|
321 width : 500, |
|
322 zIndex : 6, |
|
323 centered : true, |
|
324 modal : true, // uncomment for modal behavior |
|
325 srcNode : '.snippet', |
|
326 render : true, |
|
327 visible : false, |
|
328 plugins : [Y.Plugin.Drag], |
|
329 buttons: [ |
|
330 { |
|
331 value : 'OK', |
|
332 section: Y.WidgetStdMod.FOOTER, |
|
333 action : function (e) { |
|
334 dialog.hide(); |
|
335 } |
|
336 } |
|
337 ] |
|
338 }); |
|
339 |
|
340 var showCode = function(e){ |
|
341 var snippet = Y.one('.snippet'), |
|
342 html = '<div class="yui3-g">' + e.currentTarget.getHTML() + '</div>'; |
|
343 |
|
344 html = html.replace(/<label>|<\/label>/g, ""); |
|
345 snippet.set('value', html); |
|
346 dialog.show(); |
|
347 snippet.select(); |
|
348 Y.all('.yui3-g').removeClass('yui3-selected'); |
|
349 e.currentTarget.addClass('yui3-selected'); |
|
350 } |
|
351 |
|
352 Y.all('.yui3-g').on('click', showCode); |
|
353 |
|
354 }); |
|
355 </script> |
|
356 </html> |
|
357 |
|
358 |
|
359 <script> |
|
360 YUI.Env.Tests = { |
|
361 examples: [], |
|
362 project: '../assets', |
|
363 assets: '../assets/cssgrids', |
|
364 name: 'cssgrids-units', |
|
365 title: 'CSS Grids Units Example', |
|
366 newWindow: '', |
|
367 auto: false |
|
368 }; |
|
369 YUI.Env.Tests.examples.push('cssgrids-units'); |
|
370 YUI.Env.Tests.examples.push('cssgrids-fixed'); |
|
371 YUI.Env.Tests.examples.push('cssgrids-fluid'); |
|
372 YUI.Env.Tests.examples.push('cssgrids-align'); |
|
373 YUI.Env.Tests.examples.push('cssgrids-magazine'); |
|
374 YUI.Env.Tests.examples.push('menunav-leftnav'); |
|
375 YUI.Env.Tests.examples.push('node-menunav-2'); |
|
376 YUI.Env.Tests.examples.push('node-menunav-3'); |
|
377 YUI.Env.Tests.examples.push('node-menunav-4'); |
|
378 YUI.Env.Tests.examples.push('node-menunav-5'); |
|
379 YUI.Env.Tests.examples.push('node-menunav-6'); |
|
380 YUI.Env.Tests.examples.push('node-menunav-7'); |
|
381 |
|
382 </script> |
|
383 <script src="../assets/yui/test-runner.js"></script> |
|
384 |