|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>Example: Basic button widgets</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: Basic button widgets</h1> |
|
27 <div class="yui3-g"> |
|
28 <div class="yui3-u-3-4"> |
|
29 <div id="main"> |
|
30 <div class="content"><link rel="stylesheet" href='../../build/cssbutton/cssbutton.css'></link> |
|
31 <div class="intro"> |
|
32 <p>In this example, we'll look at a few ways to create button widgets using the <code>'button'</code> module and listen for events on one to manipulate an attribute of another.</p> |
|
33 </div> |
|
34 |
|
35 <div class="example yui3-skin-sam"> |
|
36 <button id="myPushButton">This push button</button> |
|
37 <p>can toggle the <code>pressed</code> attribute of</p> |
|
38 <button id="myToggleButton">this depressed button :(</button> |
|
39 |
|
40 <style> |
|
41 .example { |
|
42 text-align:center; |
|
43 } |
|
44 .example .yui3-button{ |
|
45 width: 200px; |
|
46 } |
|
47 </style> |
|
48 |
|
49 <script> |
|
50 YUI().use('button', function(Y){ |
|
51 |
|
52 // A toggle button with a state change listener |
|
53 var toggleButton = new Y.ToggleButton({ |
|
54 srcNode:'#myToggleButton', |
|
55 |
|
56 // 'after', because 'on' would trigger before the attribute update |
|
57 after: { |
|
58 'pressedChange': function () { |
|
59 var button = this, |
|
60 pressed = button.get('pressed'), |
|
61 newLabel = 'this ' + (pressed ? 'pressed ' : 'depressed') + ' button :' + (pressed ? ')' : '('); |
|
62 |
|
63 button.set('label', newLabel); |
|
64 } |
|
65 } |
|
66 }).render(); |
|
67 |
|
68 |
|
69 var button = new Y.Button({ |
|
70 srcNode:'#myPushButton', |
|
71 on: { |
|
72 'click': function(){ |
|
73 var pressed = toggleButton.get('pressed'); |
|
74 toggleButton.set('pressed', !pressed); |
|
75 } |
|
76 } |
|
77 }).render(); |
|
78 |
|
79 |
|
80 }); |
|
81 </script> |
|
82 </div> |
|
83 |
|
84 <h4 id="source-html">Source: HTML</h4> |
|
85 <p> |
|
86 <strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
87 page's <code><body></code> element or to a parent element of the widget in order to apply |
|
88 the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
89 </p> |
|
90 <pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre> |
|
91 |
|
92 |
|
93 <pre class="code prettyprint"><button id="myPushButton">This push button</button> |
|
94 <p>can toggle the `pressed` attribute of</p> |
|
95 <button id="myToggleButton">this depressed button :(</button> |
|
96 |
|
97 <style> |
|
98 .example { |
|
99 text-align:center; |
|
100 } |
|
101 .example .yui3-button{ |
|
102 width: 200px; |
|
103 } |
|
104 </style></pre> |
|
105 |
|
106 |
|
107 <h4 id="source-javascript">Source: JavaScript</h4> |
|
108 <pre class="code prettyprint">YUI().use('button', function(Y){ |
|
109 |
|
110 // A toggle button with a state change listener |
|
111 var toggleButton = new Y.ToggleButton({ |
|
112 srcNode:'#myToggleButton', |
|
113 |
|
114 // 'after', because 'on' would trigger before the attribute update |
|
115 after: { |
|
116 'pressedChange': function () { |
|
117 var button = this, |
|
118 pressed = button.get('pressed'), |
|
119 newLabel = 'this ' + (pressed ? 'pressed ' : 'depressed') + ' button :' + (pressed ? ')' : '('); |
|
120 |
|
121 button.set('label', newLabel); |
|
122 } |
|
123 } |
|
124 }).render(); |
|
125 |
|
126 |
|
127 var button = new Y.Button({ |
|
128 srcNode:'#myPushButton', |
|
129 on: { |
|
130 'click': function(){ |
|
131 var pressed = toggleButton.get('pressed'); |
|
132 toggleButton.set('pressed', !pressed); |
|
133 } |
|
134 } |
|
135 }).render(); |
|
136 |
|
137 |
|
138 });</pre> |
|
139 |
|
140 </div> |
|
141 </div> |
|
142 </div> |
|
143 |
|
144 <div class="yui3-u-1-4"> |
|
145 <div class="sidebar"> |
|
146 |
|
147 <div id="toc" class="sidebox"> |
|
148 <div class="hd"> |
|
149 <h2 class="no-toc">Table of Contents</h2> |
|
150 </div> |
|
151 |
|
152 <div class="bd"> |
|
153 <ul class="toc"> |
|
154 <li> |
|
155 <a href="#source-html">Source: HTML</a> |
|
156 </li> |
|
157 <li> |
|
158 <a href="#source-javascript">Source: JavaScript</a> |
|
159 </li> |
|
160 </ul> |
|
161 </div> |
|
162 </div> |
|
163 |
|
164 |
|
165 |
|
166 <div class="sidebox"> |
|
167 <div class="hd"> |
|
168 <h2 class="no-toc">Examples</h2> |
|
169 </div> |
|
170 |
|
171 <div class="bd"> |
|
172 <ul class="examples"> |
|
173 |
|
174 |
|
175 <li data-description="This example shows how you can easily style button and non-button DOM elements to appear as buttons"> |
|
176 <a href="cssbutton.html">Styling elements with cssbutton</a> |
|
177 </li> |
|
178 |
|
179 |
|
180 |
|
181 <li data-description="This example shows a simple, light solution to enhance <button> nodes"> |
|
182 <a href="button-plugin.html">Enhancing <button> nodes with button-plugin</a> |
|
183 </li> |
|
184 |
|
185 |
|
186 |
|
187 <li data-description="This example demonstrates how to create button widgets"> |
|
188 <a href="button-basic.html">Basic button widgets</a> |
|
189 </li> |
|
190 |
|
191 |
|
192 |
|
193 <li data-description="This example demonstrates how to create a widget containing a group of buttons"> |
|
194 <a href="button-group.html">Managing groups of buttons with button-group</a> |
|
195 </li> |
|
196 |
|
197 |
|
198 </ul> |
|
199 </div> |
|
200 </div> |
|
201 |
|
202 |
|
203 |
|
204 </div> |
|
205 </div> |
|
206 </div> |
|
207 </div> |
|
208 |
|
209 <script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
210 <script>prettyPrint();</script> |
|
211 |
|
212 <script> |
|
213 YUI.Env.Tests = { |
|
214 examples: [], |
|
215 project: '../assets', |
|
216 assets: '../assets/button', |
|
217 name: 'button-basic', |
|
218 title: 'Basic button widgets', |
|
219 newWindow: '', |
|
220 auto: false |
|
221 }; |
|
222 YUI.Env.Tests.examples.push('cssbutton'); |
|
223 YUI.Env.Tests.examples.push('button-plugin'); |
|
224 YUI.Env.Tests.examples.push('button-basic'); |
|
225 YUI.Env.Tests.examples.push('button-group'); |
|
226 |
|
227 </script> |
|
228 <script src="../assets/yui/test-runner.js"></script> |
|
229 |
|
230 |
|
231 |
|
232 </body> |
|
233 </html> |