tests/manual/buttons.html

	buttons.html revision 24af57b8ae16a109f012057cf02c11258b6d8b4d
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'
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            }).use('button-group', 'console', function(Y){
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                new Y.Console().render();
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                var groupA = new Y.ButtonGroup({
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright                    srcNode: '#groupA',
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    type: 'radio'
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright                }).render();
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                var groupB = new Y.ButtonGroup({
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright                    srcNode: '#groupB',
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    type: 'radio'
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright                }).render();
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                var groupC = new Y.ButtonGroup({
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright                    srcNode: '#groupC',
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    type: 'checkbox'
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright                }).render();
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>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright        <div id='groupA'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            <input type='button' class='radioGroupA' value='1'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            <input type='button' class='radioGroupA' value='2'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            <input type='button' class='radioGroupA' value='3'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            <input type='button' class='radioGroupA' value='4'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            <input type='button' class='radioGroupA' value='5'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            <input type='button' class='radioGroupA' value='6'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright        </div>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <h2>Radio B</h2>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright        <div id='groupB'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            <input type='button' class='radioGroupB' value='1'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            <input type='button' class='radioGroupB' value='2'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            <input type='button' class='radioGroupB' value='3'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            <input type='button' class='radioGroupB' value='4'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            <input type='button' class='radioGroupB' value='5'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            <input type='button' class='radioGroupB' value='6'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright        </div>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <h2>Checkbox</h2>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright        <div id='groupC'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            <input type='button' class='cbGroup' value='a'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            <input type='button' class='cbGroup' value='b'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            <input type='button' class='cbGroup' value='c'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            <input type='button' class='cbGroup' value='d'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            <input type='button' class='cbGroup' value='e'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            <input type='button' class='cbGroup' value='f'>
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright        </div>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright    </body>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright</html>