tests/manual/buttons.html

	buttons.html revision 08cdb1908c8c2ebede750bd310cba3a96593b21d
<!DOCTYPE html>
<html>
    <head>
        <!-- reset the default browser styles -->
        <style>

            /* Fix this - Shouldn't require body specificity */
            body .yui3-button-selected {
                background-color:#426FD9;
                color:white;
            }

        </style>

        <script src='/build/yui/yui-min.js'></script>

        <script>
            YUI({
                debug: true,
                combo: false,
                filter: 'raw'
            }).use('button', function(Y){

                var groupA = new Y.ButtonGroup({
                    buttons: new Y.Buttons({
                        srcNodes: Y.all('.radioGroupA')
                    }),
                    type: 'radio'
                });

                var groupB = new Y.ButtonGroup({
                    srcNodes: Y.all('.radioGroupB'),
                    type: 'radio'
                });

                var groupC = new Y.ButtonGroup({
                    type: 'checkbox'
                });

                Y.all('.cbGroup').each(function(node){
                    groupC.addButton(new Y.Button({
                        srcNode: node
                    }));
                });

                groupB.on('selectionChange', function(e){
                    console.log('Currently selected: ' + groupB.getSelectedValues());
                    //console.log(groupB.getBar());
                });

                groupC.on('selectionChange', function(e){
                    console.log('Currently selected: ' + groupC.getSelectedValues());
                });

            });
        </script>
    </head>

    <body class='yui3-skin-sam'>

        <h1>Button Example: Groups</h1>

        <hr />

        <h2>Radio</h2>
        <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'>

        <h2>Radio</h2>
        <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'>

        <h2>Checkbox</h2>
        <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'>
    </body>
</html>