← Back to branch summary

~bcsaller/juju-gui/charmFind

« back to all changes in this revision

Viewing changes to lib/yui/docs/button/button-group.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/docs/button/button-group.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Managing groups of buttons with button-group</title>
6
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:400,700">
7
 
    <link rel="stylesheet" href="../../build/cssgrids/grids-min.css">
8
 
    <link rel="stylesheet" href="../assets/css/main.css">
9
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
10
 
    <script src="../../build/yui/yui-min.js"></script>
11
 
</head>
12
 
<body>
13
 
 
14
 
<div id="doc">
15
 
    <h1>Example: Managing groups of buttons with button-group</h1>
16
 
 
17
 
    
18
 
        <a href="#toc" class="jump">Jump to Table of Contents</a>
19
 
    
20
 
 
21
 
    <div class="yui3-g">
22
 
        <div class="yui3-u-3-4">
23
 
            <div id="main">
24
 
                <div class="content"><link rel="stylesheet" href='../../build/cssbutton/cssbutton.css'></link>
25
 
<div class="intro">
26
 
    <p>In this example, we'll look at a few ways to create groups of buttons using the <code>&#x27;button-group&#x27;</code> module.</p>
27
 
</div>
28
 
 
29
 
<div class="example">
30
 
    <div class='yui3-skin-sam'>
31
 
    <div id='checkboxContainer'>
32
 
        <h2 id="checkbox-group">Checkbox Group</h2>
33
 
        <button class='checkbox'>Button 1</button>
34
 
        <button class='checkbox'>Button 2</button>
35
 
        <button class='checkbox'>Button 3</button>
36
 
    </div>
37
 
 
38
 
    <div id='radioContainer'>
39
 
        <h2 id="radio-group">Radio Group</h2>
40
 
        <button class='radio'>Button A</button>
41
 
        <button class='radio'>Button B</button>
42
 
        <button class='radio'>Button C</button>
43
 
    </div>
44
 
</div>
45
 
 
46
 
    <script>
47
 
    YUI().use('button-group', function(Y){
48
 
 
49
 
    // A group of checkbox-like buttons
50
 
    var buttonGroupCB = new Y.ButtonGroup({
51
 
        srcNode: '#checkboxContainer',
52
 
        type: 'checkbox',
53
 
        on: {
54
 
            'selectionChange': function(e){
55
 
                var selection = buttonGroupCB.getSelectedButtons();
56
 
                Y.log('buttonGroup2 selected count = ' + selection.length);
57
 
            }
58
 
        }
59
 
    }).render();
60
 
 
61
 
 
62
 
    // A group of radio-like buttons
63
 
    var buttonGroupRadio = new Y.ButtonGroup({
64
 
        srcNode: '#radioContainer',
65
 
        type: 'radio'
66
 
    })
67
 
    
68
 
    buttonGroupRadio.render();
69
 
 
70
 
    buttonGroupRadio.on('selectionChange', function(e){
71
 
        Y.log('buttonGroup selection changed');
72
 
    });
73
 
 
74
 
});
75
 
    </script>
76
 
</div>
77
 
 
78
 
<h4 id="source-html">Source: HTML</h4>
79
 
<pre class="code prettyprint">&lt;div class=&#x27;yui3-skin-sam&#x27;&gt;
80
 
    &lt;div id=&#x27;checkboxContainer&#x27;&gt;
81
 
        &lt;h2&gt;Checkbox Group&lt;&#x2F;h2&gt;
82
 
        &lt;button class=&#x27;checkbox&#x27;&gt;Button 1&lt;&#x2F;button&gt;
83
 
        &lt;button class=&#x27;checkbox&#x27;&gt;Button 2&lt;&#x2F;button&gt;
84
 
        &lt;button class=&#x27;checkbox&#x27;&gt;Button 3&lt;&#x2F;button&gt;
85
 
    &lt;&#x2F;div&gt;
86
 
 
87
 
    &lt;div id=&#x27;radioContainer&#x27;&gt;
88
 
        &lt;h2&gt;Radio Group&lt;&#x2F;h2&gt;
89
 
        &lt;button class=&#x27;radio&#x27;&gt;Button A&lt;&#x2F;button&gt;
90
 
        &lt;button class=&#x27;radio&#x27;&gt;Button B&lt;&#x2F;button&gt;
91
 
        &lt;button class=&#x27;radio&#x27;&gt;Button C&lt;&#x2F;button&gt;
92
 
    &lt;&#x2F;div&gt;
93
 
&lt;&#x2F;div&gt;</pre>
94
 
 
95
 
<h4 id="source-javascript">Source: JavaScript</h4>
96
 
<pre class="code prettyprint">YUI().use(&#x27;button-group&#x27;, function(Y){
97
 
 
98
 
    &#x2F;&#x2F; A group of checkbox-like buttons
99
 
    var buttonGroupCB = new Y.ButtonGroup({
100
 
        srcNode: &#x27;#checkboxContainer&#x27;,
101
 
        type: &#x27;checkbox&#x27;,
102
 
        on: {
103
 
            &#x27;selectionChange&#x27;: function(e){
104
 
                var selection = buttonGroupCB.getSelectedButtons();
105
 
                Y.log(&#x27;buttonGroup2 selected count = &#x27; + selection.length);
106
 
            }
107
 
        }
108
 
    }).render();
109
 
 
110
 
 
111
 
    &#x2F;&#x2F; A group of radio-like buttons
112
 
    var buttonGroupRadio = new Y.ButtonGroup({
113
 
        srcNode: &#x27;#radioContainer&#x27;,
114
 
        type: &#x27;radio&#x27;
115
 
    })
116
 
    
117
 
    buttonGroupRadio.render();
118
 
 
119
 
    buttonGroupRadio.on(&#x27;selectionChange&#x27;, function(e){
120
 
        Y.log(&#x27;buttonGroup selection changed&#x27;);
121
 
    });
122
 
 
123
 
});</pre>
124
 
 
125
 
</div>
126
 
            </div>
127
 
        </div>
128
 
 
129
 
        <div class="yui3-u-1-4">
130
 
            <div class="sidebar">
131
 
                
132
 
                    <div id="toc" class="sidebox">
133
 
                        <div class="hd">
134
 
                            <h2 class="no-toc">Table of Contents</h2>
135
 
                        </div>
136
 
 
137
 
                        <div class="bd">
138
 
                            <ul class="toc">
139
 
<li>
140
 
<a href="#checkbox-group">Checkbox Group</a>
141
 
</li>
142
 
<li>
143
 
<a href="#radio-group">Radio Group</a>
144
 
<ul class="toc">
145
 
<li>
146
 
<a href="#source-html">Source: HTML</a>
147
 
</li>
148
 
<li>
149
 
<a href="#source-javascript">Source: JavaScript</a>
150
 
</li>
151
 
</ul>
152
 
</li>
153
 
</ul>
154
 
                        </div>
155
 
                    </div>
156
 
                
157
 
 
158
 
                
159
 
                    <div class="sidebox">
160
 
                        <div class="hd">
161
 
                            <h2 class="no-toc">Examples</h2>
162
 
                        </div>
163
 
 
164
 
                        <div class="bd">
165
 
                            <ul class="examples">
166
 
                                
167
 
                                    
168
 
                                        <li data-description="This example shows how you can easily style button and non-button DOM elements to appear as buttons">
169
 
                                            <a href="cssbutton.html">Styling elements with cssbutton</a>
170
 
                                        </li>
171
 
                                    
172
 
                                
173
 
                                    
174
 
                                        <li data-description="This example shows a simple, light solution to enhance &lt;button&gt; nodes">
175
 
                                            <a href="button-plugin.html">Enhancing &lt;button&gt; nodes with button-plugin</a>
176
 
                                        </li>
177
 
                                    
178
 
                                
179
 
                                    
180
 
                                        <li data-description="This example demonstrates how to create button widgets">
181
 
                                            <a href="button.html">Basic button widgets</a>
182
 
                                        </li>
183
 
                                    
184
 
                                
185
 
                                    
186
 
                                        <li data-description="This example demonstrates how to create a widget containing a group of buttons">
187
 
                                            <a href="button-group.html">Managing groups of buttons with button-group</a>
188
 
                                        </li>
189
 
                                    
190
 
                                
191
 
                            </ul>
192
 
                        </div>
193
 
                    </div>
194
 
                
195
 
 
196
 
                
197
 
            </div>
198
 
        </div>
199
 
    </div>
200
 
</div>
201
 
 
202
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
203
 
<script>prettyPrint();</script>
204
 
 
205
 
</body>
206
 
</html>