buttons.html revision 24af57b8ae16a109f012057cf02c11258b6d8b4d
<!DOCTYPE html>
<html>
<head>
<style>
body .yui3-button-selected {
background-color:#426FD9;
color:white;
}
</style>
<script>
YUI({
debug: true,
combo: false,
filter: 'raw'
}).use('button-group', 'console', function(Y){
new Y.Console().render();
var groupA = new Y.ButtonGroup({
srcNode: '#groupA',
type: 'radio'
}).render();
var groupB = new Y.ButtonGroup({
srcNode: '#groupB',
type: 'radio'
}).render();
var groupC = new Y.ButtonGroup({
srcNode: '#groupC',
type: 'checkbox'
}).render();
groupA.on('selectionChange', function(){
Y.log('groupA - Currently selected: ' + this.getSelectedValues());
//console.log(groupB.getBar());
});
groupB.on('selectionChange', function(){
Y.log('groupB - Currently selected: ' + groupB.getSelectedValues());
//console.log(groupB.getBar());
});
groupC.on('selectionChange', function(){
Y.log('groupC - Currently selected: ' + groupC.getSelectedValues());
});
});
</script>
</head>
<body class='yui3-skin-sam'>
<div id='yconsole'></div>
<h1>Button Example: Groups</h1>
<hr />
<h2>Radio A</h2>
<div id='groupA'>
<input type='button' class='radioGroupA' value='1'>
<input type='button' class='radioGroupA' value='2'>
<input type='button' class='radioGroupA' value='3'>
<input type='button' class='radioGroupA' value='4'>
<input type='button' class='radioGroupA' value='5'>
<input type='button' class='radioGroupA' value='6'>
</div>
<h2>Radio B</h2>
<div id='groupB'>
<input type='button' class='radioGroupB' value='1'>
<input type='button' class='radioGroupB' value='2'>
<input type='button' class='radioGroupB' value='3'>
<input type='button' class='radioGroupB' value='4'>
<input type='button' class='radioGroupB' value='5'>
<input type='button' class='radioGroupB' value='6'>
</div>
<h2>Checkbox</h2>
<div id='groupC'>
<input type='button' class='cbGroup' value='a'>
<input type='button' class='cbGroup' value='b'>
<input type='button' class='cbGroup' value='c'>
<input type='button' class='cbGroup' value='d'>
<input type='button' class='cbGroup' value='e'>
<input type='button' class='cbGroup' value='f'>
</div>
</body>
</html>