+
+
+In this example, we'll look at a few ways to create groups of buttons using the 'button-group' module.
+
+
+
+
+
+
+
+
+
+ Checkbox Group
+ + + +
+
+Radio Group
+ + + +Source: HTML
+
+Note: be sure to add the yui3-skin-sam classname to the
+page's <body> element or to a parent element of the widget in order to apply
+the default CSS skin. See Understanding Skinning.
+
<div class='yui3-skin-sam'> <!-- You need this skin class --> + <div id='checkboxContainer'> + <h2>Checkbox Group</h2> + <button class='checkbox'>Button 1</button> + <button class='checkbox'>Button 2</button> + <button class='checkbox'>Button 3</button> + </div> + + <div id='radioContainer'> + <h2>Radio Group</h2> + <button class='radio'>Button A</button> + <button class='radio'>Button B</button> + <button class='radio'>Button C</button> + </div> +</div>+ +
Source: JavaScript
+YUI().use('button-group', function(Y){
+
+ // A group of checkbox-like buttons
+ var buttonGroupCB = new Y.ButtonGroup({
+ srcNode: '#checkboxContainer',
+ type: 'checkbox',
+ on: {
+ 'selectionChange': function(e){
+ var selection = buttonGroupCB.getSelectedButtons();
+ Y.log('buttonGroup2 selected count = ' + selection.length);
+ }
+ }
+ }).render();
+
+
+ // A group of radio-like buttons
+ var buttonGroupRadio = new Y.ButtonGroup({
+ srcNode: '#radioContainer',
+ type: 'radio'
+ })
+
+ buttonGroupRadio.render();
+
+ buttonGroupRadio.on('selectionChange', function(e){
+ Y.log('buttonGroup selection changed');
+ });
+
+});
+
+