|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>Example: Styling elements with cssbutton</title> |
|
6 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
7 <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
8 <link rel="stylesheet" href="../assets/css/main.css"> |
|
9 <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
10 <link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
11 <script src="../../build/yui/yui-min.js"></script> |
|
12 |
|
13 </head> |
|
14 <body> |
|
15 <!-- |
|
16 <a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
17 --> |
|
18 <div id="doc"> |
|
19 <div id="hd"> |
|
20 <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
21 </div> |
|
22 |
|
23 <a href="#toc" class="jump">Jump to Table of Contents</a> |
|
24 |
|
25 |
|
26 <h1>Example: Styling elements with cssbutton</h1> |
|
27 <div class="yui3-g"> |
|
28 <div class="yui3-u-3-4"> |
|
29 <div id="main"> |
|
30 <div class="content"><!-- Include the cssbutton stylesheet --> |
|
31 <link rel="stylesheet" href='../../build/cssbutton/cssbutton.css'> |
|
32 <style>.yui3-button { |
|
33 margin:3px; |
|
34 } |
|
35 |
|
36 .warning{ |
|
37 background-color:#FAF55F; |
|
38 } |
|
39 |
|
40 .success{ |
|
41 background-color:#57A957; |
|
42 color:white; |
|
43 } |
|
44 |
|
45 .error{ |
|
46 background-color:#C43C35; |
|
47 color:white; |
|
48 } |
|
49 |
|
50 .notice{ |
|
51 background-color:#1B7AE0; |
|
52 color:white; |
|
53 } |
|
54 |
|
55 .yui3-button-icon { |
|
56 background-image: url("../assets/button/icon-sprite-dark-and-light-24.png"); |
|
57 background-repeat: no-repeat; |
|
58 display: inline-block; |
|
59 height: 20px; |
|
60 vertical-align: middle; |
|
61 width: 20px; |
|
62 } |
|
63 |
|
64 .yui3-button-icon-bold { |
|
65 background-position: 1px 1px; |
|
66 } |
|
67 |
|
68 .yui3-button-icon-italic { |
|
69 background-position: 1px -35px; |
|
70 } |
|
71 |
|
72 .yui3-button-icon-underline { |
|
73 background-position: 1px -71px; |
|
74 }</style> |
|
75 |
|
76 <div class="intro"> |
|
77 <p>In this example, we'll look at a few ways to use the <code>'cssbutton'</code> module to enhance the look & feel of the default browser buttons.</p> |
|
78 </div> |
|
79 |
|
80 <div class="example"> |
|
81 <h4 id="button-tags">Button Tags</h4> |
|
82 <button class='yui3-button'><button></button> |
|
83 <input type='button' class='yui3-button' value='<input type="button">'> |
|
84 <input type='submit' class='yui3-button' value='<input type="submit">'> |
|
85 |
|
86 <h4 id="other-tags">Other Tags</h4> |
|
87 <div class='yui3-button'><div></div> |
|
88 <span class='yui3-button'><span></span> |
|
89 <a class='yui3-button'><a></a> |
|
90 |
|
91 <h4 id="colors">Colors</h4> |
|
92 <button class='yui3-button success'>.success <br> #57A957</button> |
|
93 <button class='yui3-button warning'>.warning <br> #FAF55F</button> |
|
94 <button class='yui3-button error'>.error <br> #C43C35</button> |
|
95 <button class='yui3-button notice'>.notice <br> #1B7AE0</button> |
|
96 |
|
97 <h4 id="icon-buttons">Icon Buttons</h4> |
|
98 <button class='yui3-button'> |
|
99 <span class='yui3-button-icon yui3-button-icon-bold'></span> |
|
100 </button> |
|
101 |
|
102 <button class='yui3-button'> |
|
103 <span class='yui3-button-icon yui3-button-icon-italic'></span> |
|
104 </button> |
|
105 |
|
106 <button class='yui3-button'> |
|
107 <span class='yui3-button-icon yui3-button-icon-underline'></span> |
|
108 </button> |
|
109 |
|
110 <h4 id="image-button">Image Button</h4> |
|
111 <input type='image' id='imageButton' class='yui3-button' src="../assets/button/yui-logo.png"></input> |
|
112 |
|
113 </div> |
|
114 |
|
115 |
|
116 <p>YUI's Button component was designed with the idea in mind that sometimes you may only want button styles, without the need for any JavaScript functionality. Instead of <code>use('button', ...)</code>, you can just include the <code>cssbutton</code> module. This can be done dynamically with <code>use('cssbutton')</code>, or statically with a <code>link</code> tag.</p> |
|
117 <pre class="code prettyprint"><link rel="stylesheet" href="http://yui.yahooapis.com/3.10.3/build/cssbutton/cssbutton.css"></pre> |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 <h4 id="source-html">Source: HTML</h4> |
|
124 <pre class="code prettyprint"><h4>Button Tags</h4> |
|
125 <button class='yui3-button'>&lt;button&gt;</button> |
|
126 <input type='button' class='yui3-button' value='&lt;input type="button"&gt;'> |
|
127 <input type='submit' class='yui3-button' value='&lt;input type="submit"&gt;'> |
|
128 |
|
129 <h4>Other Tags</h4> |
|
130 <div class='yui3-button'>&lt;div&gt;</div> |
|
131 <span class='yui3-button'>&lt;span&gt;</span> |
|
132 <a class='yui3-button'>&lt;a&gt;</a> |
|
133 |
|
134 <h4>Colors</h4> |
|
135 <button class='yui3-button success'>.success <br> #57A957</button> |
|
136 <button class='yui3-button warning'>.warning <br> #FAF55F</button> |
|
137 <button class='yui3-button error'>.error <br> #C43C35</button> |
|
138 <button class='yui3-button notice'>.notice <br> #1B7AE0</button> |
|
139 |
|
140 <h4>Icon Buttons</h4> |
|
141 <button class='yui3-button'> |
|
142 <span class='yui3-button-icon yui3-button-icon-bold'></span> |
|
143 </button> |
|
144 |
|
145 <button class='yui3-button'> |
|
146 <span class='yui3-button-icon yui3-button-icon-italic'></span> |
|
147 </button> |
|
148 |
|
149 <button class='yui3-button'> |
|
150 <span class='yui3-button-icon yui3-button-icon-underline'></span> |
|
151 </button> |
|
152 |
|
153 <h4>Image Button</h4> |
|
154 <input type='image' id='imageButton' class='yui3-button' src="../assets/button/yui-logo.png"></input></pre> |
|
155 |
|
156 |
|
157 <h4 id="source-css">Source: CSS</h4> |
|
158 <pre class="code prettyprint">.yui3-button { |
|
159 margin:3px; |
|
160 } |
|
161 |
|
162 .warning{ |
|
163 background-color:#FAF55F; |
|
164 } |
|
165 |
|
166 .success{ |
|
167 background-color:#57A957; |
|
168 color:white; |
|
169 } |
|
170 |
|
171 .error{ |
|
172 background-color:#C43C35; |
|
173 color:white; |
|
174 } |
|
175 |
|
176 .notice{ |
|
177 background-color:#1B7AE0; |
|
178 color:white; |
|
179 } |
|
180 |
|
181 .yui3-button-icon { |
|
182 background-image: url("../assets/button/icon-sprite-dark-and-light-24.png"); |
|
183 background-repeat: no-repeat; |
|
184 display: inline-block; |
|
185 height: 20px; |
|
186 vertical-align: middle; |
|
187 width: 20px; |
|
188 } |
|
189 |
|
190 .yui3-button-icon-bold { |
|
191 background-position: 1px 1px; |
|
192 } |
|
193 |
|
194 .yui3-button-icon-italic { |
|
195 background-position: 1px -35px; |
|
196 } |
|
197 |
|
198 .yui3-button-icon-underline { |
|
199 background-position: 1px -71px; |
|
200 }</pre> |
|
201 |
|
202 </div> |
|
203 </div> |
|
204 </div> |
|
205 |
|
206 <div class="yui3-u-1-4"> |
|
207 <div class="sidebar"> |
|
208 |
|
209 <div id="toc" class="sidebox"> |
|
210 <div class="hd"> |
|
211 <h2 class="no-toc">Table of Contents</h2> |
|
212 </div> |
|
213 |
|
214 <div class="bd"> |
|
215 <ul class="toc"> |
|
216 <li> |
|
217 <a href="#button-tags">Button Tags</a> |
|
218 </li> |
|
219 <li> |
|
220 <a href="#other-tags">Other Tags</a> |
|
221 </li> |
|
222 <li> |
|
223 <a href="#colors">Colors</a> |
|
224 </li> |
|
225 <li> |
|
226 <a href="#icon-buttons">Icon Buttons</a> |
|
227 </li> |
|
228 <li> |
|
229 <a href="#image-button">Image Button</a> |
|
230 </li> |
|
231 <li> |
|
232 <a href="#source-html">Source: HTML</a> |
|
233 </li> |
|
234 <li> |
|
235 <a href="#source-css">Source: CSS</a> |
|
236 </li> |
|
237 </ul> |
|
238 </div> |
|
239 </div> |
|
240 |
|
241 |
|
242 |
|
243 <div class="sidebox"> |
|
244 <div class="hd"> |
|
245 <h2 class="no-toc">Examples</h2> |
|
246 </div> |
|
247 |
|
248 <div class="bd"> |
|
249 <ul class="examples"> |
|
250 |
|
251 |
|
252 <li data-description="This example shows how you can easily style button and non-button DOM elements to appear as buttons"> |
|
253 <a href="cssbutton.html">Styling elements with cssbutton</a> |
|
254 </li> |
|
255 |
|
256 |
|
257 |
|
258 <li data-description="This example shows a simple, light solution to enhance <button> nodes"> |
|
259 <a href="button-plugin.html">Enhancing <button> nodes with button-plugin</a> |
|
260 </li> |
|
261 |
|
262 |
|
263 |
|
264 <li data-description="This example demonstrates how to create button widgets"> |
|
265 <a href="button-basic.html">Basic button widgets</a> |
|
266 </li> |
|
267 |
|
268 |
|
269 |
|
270 <li data-description="This example demonstrates how to create a widget containing a group of buttons"> |
|
271 <a href="button-group.html">Managing groups of buttons with button-group</a> |
|
272 </li> |
|
273 |
|
274 |
|
275 </ul> |
|
276 </div> |
|
277 </div> |
|
278 |
|
279 |
|
280 |
|
281 </div> |
|
282 </div> |
|
283 </div> |
|
284 </div> |
|
285 |
|
286 <script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
287 <script>prettyPrint();</script> |
|
288 |
|
289 <script> |
|
290 YUI.Env.Tests = { |
|
291 examples: [], |
|
292 project: '../assets', |
|
293 assets: '../assets/button', |
|
294 name: 'cssbutton', |
|
295 title: 'Styling elements with cssbutton', |
|
296 newWindow: '', |
|
297 auto: false |
|
298 }; |
|
299 YUI.Env.Tests.examples.push('cssbutton'); |
|
300 YUI.Env.Tests.examples.push('button-plugin'); |
|
301 YUI.Env.Tests.examples.push('button-basic'); |
|
302 YUI.Env.Tests.examples.push('button-group'); |
|
303 |
|
304 </script> |
|
305 <script src="../assets/yui/test-runner.js"></script> |
|
306 |
|
307 |
|
308 |
|
309 </body> |
|
310 </html> |