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
<div class='yui3-skin-sam'>
<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');
});
});