tests/manual/buttons.html

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