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