tests/manual/buttons.html

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