|
1 |
|
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
3 <html> |
|
4 <head> |
|
5 <meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
6 <title>Skinning via Progressive Enhancement using the Event Utility and the Loader</title> |
|
7 |
|
8 <style type="text/css"> |
|
9 /*margin and padding on body element |
|
10 can introduce errors in determining |
|
11 element position and are not recommended; |
|
12 we turn them off as a foundation for YUI |
|
13 CSS treatments. */ |
|
14 body { |
|
15 margin:0; |
|
16 padding:0; |
|
17 } |
|
18 </style> |
|
19 |
|
20 <link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
21 <script type="text/javascript" src="../../build/yui/yui-min.js"></script> |
|
22 |
|
23 |
|
24 <!--begin custom header content for this example--> |
|
25 <style type="text/css"> |
|
26 |
|
27 .yui-checkboxes-loading #checkboxes { |
|
28 display: none; |
|
29 } |
|
30 |
|
31 </style> |
|
32 |
|
33 <script type="text/javascript"> |
|
34 |
|
35 // Hide the checkboxes if JavaScript is enabled to prevent |
|
36 // the user from seeing a flash of unstyled content while |
|
37 // the JavaScript for the checkboxes is being loaded. |
|
38 document.documentElement.className = "yui-checkboxes-loading"; |
|
39 |
|
40 </script> |
|
41 <!--end custom header content for this example--> |
|
42 |
|
43 </head> |
|
44 |
|
45 <body class=" yui-skin-sam"> |
|
46 |
|
47 <h1>Skinning via Progressive Enhancement using the Event Utility and the Loader</h1> |
|
48 |
|
49 <div class="exampleIntro"> |
|
50 <p> |
|
51 Using Progressive Enhancement to skin checkboxes with the help of the |
|
52 <a href="../../api/Loader.html">Loader</a>, |
|
53 <a href="../../api/module_classnamemanager.html">ClassNameManager Utility</a>, |
|
54 and the Event Utility's <code>focus</code> and <code>blur</code> events and the |
|
55 <code>delegate</code> method. |
|
56 </p> |
|
57 </div> |
|
58 |
|
59 <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
60 |
|
61 <div id="checkboxes"> |
|
62 <div> |
|
63 <label for="field-1">Field 1: </label> |
|
64 <span> |
|
65 <span> |
|
66 <input type="checkbox" id="field-1" name="field-1" value="1"> |
|
67 </span> |
|
68 </span> |
|
69 </div> |
|
70 <div> |
|
71 <label for="field-2">Field 2: </label> |
|
72 <span> |
|
73 <span> |
|
74 <input type="checkbox" id="field-2" name="field-2" value="2"> |
|
75 </span> |
|
76 </span> |
|
77 </div> |
|
78 <div> |
|
79 <label for="field-3">Field 3: </label> |
|
80 <span> |
|
81 <span> |
|
82 <input type="checkbox" id="field-3" name="field-3" value="3"> |
|
83 </span> |
|
84 </span> |
|
85 </div> |
|
86 </div> |
|
87 |
|
88 <script type="text/javascript"> |
|
89 |
|
90 YUI({ |
|
91 |
|
92 base: "../../build/", |
|
93 |
|
94 // Load the stylesheet for the skinned checkboxes via JavaScript, |
|
95 // since without JavaScript skinning of the checkboxes wouldn't |
|
96 // be possible. |
|
97 |
|
98 modules: { |
|
99 |
|
100 "checkboxcss": { |
|
101 type: "css", |
|
102 fullpath: "assets/checkbox.css" |
|
103 }, |
|
104 |
|
105 "checkboxjs": { |
|
106 type: "js", |
|
107 fullpath: "assets/checkbox.js", |
|
108 requires: ["classnamemanager", "event-focus", "node-event-delegate", "checkboxcss"] |
|
109 } |
|
110 |
|
111 } |
|
112 |
|
113 }).use("checkboxjs", function(Y, result) { |
|
114 |
|
115 // The callback supplied to use() will be executed regardless of |
|
116 // whether the operation was successful or not. The second parameter |
|
117 // is a result object that has the status of the operation. We can |
|
118 // use this to try to recover from failures or timeouts. |
|
119 |
|
120 if (!result.success) { |
|
121 |
|
122 Y.log("Load failure: " + result.msg, "warn", "Example"); |
|
123 |
|
124 // Show the checkboxes if the loader failed that way the original |
|
125 // unskinned checkboxes will be visible so that the user can |
|
126 // interact with them either way. |
|
127 |
|
128 document.documentElement.className = ""; |
|
129 |
|
130 } |
|
131 |
|
132 }); |
|
133 |
|
134 </script> |
|
135 |
|
136 <!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
137 |
|
138 </body> |
|
139 </html> |