tests/manual/everything.html

	everything.html revision 666fb1af175d6536aa882340e6249b6733bf6bf2
0N/A<!DOCTYPE html>
5501N/A<html>
0N/A    <head>
0N/A        <!-- reset the default browser styles -->
0N/A        <style>
0N/A
0N/A            /* Fix this - Shouldn't require body specificity */
0N/A            body .yui3-button-selected {
0N/A                background-color:#426FD9;
0N/A                color:white;
0N/A            }
0N/A
0N/A        </style>
0N/A
0N/A        <script src='/build/yui/yui-min.js'></script>
0N/A
0N/A        <script>
0N/A
2362N/A            YUI({
2362N/A                base: '/build/',
2362N/A                debug: true,
0N/A                combo: false,
0N/A                filter: 'raw'
0N/A            }).use('button', 'button-group', 'cssfonts', function(Y){
0N/A
0N/A
0N/A                /*
0N/A                    Just a basic test with a listener
0N/A                */
0N/A                var button = new Y.Button({
0N/A                    srcNode: Y.one('#event')
0N/A                });
5501N/A
0N/A                // One way of listening for events
0N/A                button.onClick(function(){
0N/A                   button.changeColor('#'+Math.floor(Math.random()*16777215).toString(16));
0N/A                });
0N/A
0N/A
0N/A
0N/A
5501N/A
5501N/A
5501N/A
5501N/A                /*
0N/A                    A 'toggle' button listening for the selectedChange event
0N/A                */
5501N/A                var button2 = new Y.Button({
0N/A                    srcNode: Y.one('#toggle'),
5501N/A                    type: 'toggle'
5501N/A                });
5501N/A
5501N/A                // An alternative to button.get('srcNode').on('click', ...
0N/A                button2.on('selectedChange', function(){
0N/A                   Y.log('toggled');
0N/A                });
0N/A
0N/A
5501N/A
5501N/A
5501N/A
0N/A
0N/A
0N/A
0N/A
0N/A                /*
0N/A                    A 'link' button
0N/A                    Preferably, the user would just apply a yui3-button style to an <a> element and not use JS
0N/A                */
0N/A                var button3 = new Y.Button({
0N/A                    srcNode: Y.one('#link')
0N/A                });
0N/A
0N/A
0N/A
0N/A
0N/A
0N/A
0N/A
0N/A
0N/A
0N/A
0N/A                /*
0N/A                    A disabled button
0N/A                */
0N/A                var button4 = new Y.Button({
0N/A                    srcNode: Y.one('#disabled'),
0N/A                    disabled: false
0N/A                });
0N/A                button4.set('disabled', true);
0N/A
0N/A
0N/A
0N/A
0N/A
0N/A
0N/A


                /*
                    A group of radio-like buttons
                */
                var buttonGroup = new Y.ButtonGroup({
                    buttons: new Y.Buttons({
                        srcNodes: Y.all('.group')
                    }),
                    type: 'radio'
                });

                buttonGroup.after('selectionChange', function(e){
                    Y.log('buttonGroup selection changed');
                });


                /*
                    A group of checkbox-like buttons
                */
                var buttonGroup2 = new Y.ButtonGroup({
                    buttons: new Y.Buttons({
                        srcNodes: Y.all('.multigroup')
                    }),
                    type: 'checkbox'
                });

                buttonGroup2.after('selectionChange', function(e){
                    var selection = buttonGroup2.get('selection');
                    Y.log('buttonGroup2 selected count = ' + selection.length);
                });


                /*
                    A button generator
                    Y.Buttons adds nothing useful for the gernator buttons, so just add the class and a listener.
                */
                Y.all('.generator').addClass('yui3-button').on('click', function(e){
                    var button, type, config;

                    type = e.target.getAttribute('data-type');

                    config = {
                        label: type
                    };

                    if (type === 'disabled') {
                        config.type = 'push';
                        config.disabled = true;
                    }
                    else {
                        config.type = type;
                    }

                    button = new Y.ButtonGenerator(config);
                    Y.one('#generated').append(button.getDOMNode());
                })

            });
        </script>
    </head>

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

        <h1>Button prototype</h1>

        <hr />

        <h2>Event</h2>
        <button id='event' tabindex='3'>Change <br /> Color</button>


        <br>


        <h2>Toggle w/ event</h2>
        <input type='button' id='toggle' value='Toggle'></input>


        <br>


        <h2>Link</h2>
        <a href='http://yahoo.com' id='link'>Go to yahoo.com</a>


        <h2>Disabled</h2>
        <button id='disabled'>Should be disabled</button>


        <br>


        <h2>Group (radio)</h2>
        <button class='group' id='btn1'>Button 13</button>
        <button class='group' id='btn2'>Button 27</button>
        <button class='group' id='btn3'>Button 40</button>


        <br>


        <h2>Multi-Group (checkbox)</h2>
        <button class='multigroup' id='btn4'>Button 4</button>
        <button class='multigroup' id='btn5'>Button 5</button>
        <button type='button' class='multigroup' id='btn6'>Button 6</button>


        <br>


        <h2>Generator</h2>
        <button class='generator' data-type='push'>Generate Push Button</button>
        <button class='generator' data-type='toggle'>Generate Toggle Button</button>
        <button class='generator' data-type='disabled'>Generate Disabled Button</button>
        <div id='generated' style='border:solid black 1px;'></div>

    </body>
</html>