tests/manual/everything.html

	everything.html revision b28e90463180540ce576a7941dcade8d95beee76
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith<!DOCTYPE html>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith<html>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith    <head>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <!-- reset the default browser styles -->
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <style>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith            /* Fix this - Shouldn't require body specificity */
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith            body .yui3-button-selected {
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                background-color:#426FD9;
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                color:white;
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith            }
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        </style>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <script src='/build/yui/yui-min.js'></script>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <script>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith            YUI({
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                base: '/build/',
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                debug: true,
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                combo: false,
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                filter: 'raw'
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith            }).use('button', 'cssbuttons', 'cssfonts', 'console', function(Y){
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                new Y.Console().render();
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                /*
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    Just a basic test with a listener
3fad3df12ae2d320c12871d471eb0faf5f187cbdAlex Valavanis                */
5c45bb188ab729e501e48732842cb9de6a9813beAlex Valavanis                var button = new Y.Button({
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    srcNode: Y.one('#event')
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                });
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                // One way of listening for events
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                button.on('click', function(e){
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    console.log("Clicked!");
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                });
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                /*
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    A 'toggle' button listening for the selectedChange event
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                */
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                var button2 = new Y.Button({
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    srcNode: Y.one('#toggle'),
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    type: 'toggle'
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                });
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                // An alternative to button.get('srcNode').on('click', ...
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                button2.on('selectedChange', function(){
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                   Y.log('toggled');
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                });
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                /*
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    A 'link' button
7e417d8610050f933e9d268b04af344cf6ea366aMatthew Petroff                    Preferably, the user would just apply a yui3-button style to an <a> element and not use JS
7e417d8610050f933e9d268b04af344cf6ea366aMatthew Petroff                */
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                var button3 = new Y.Button({
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    srcNode: Y.one('#link')
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                });
7e417d8610050f933e9d268b04af344cf6ea366aMatthew Petroff
7e417d8610050f933e9d268b04af344cf6ea366aMatthew Petroff
7e417d8610050f933e9d268b04af344cf6ea366aMatthew Petroff
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                /*
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    A disabled button
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                */
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                var button4 = new Y.Button({
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    srcNode: Y.one('#disabled'),
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    disabled: true
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                });
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                /*
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    A group of radio-like buttons
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                */
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                var buttonGroup = new Y.ButtonGroup({
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    srcNodes: Y.all('.group'),
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    type: 'radio'
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                });
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                buttonGroup.after('selectionChange', function(e){
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    Y.log('buttonGroup selection changed');
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                });
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                /*
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    A group of checkbox-like buttons
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                */
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                var buttonGroup2 = new Y.ButtonGroup({
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    srcNodes: Y.all('.multigroup'),
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    type: 'checkbox'
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                });
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                buttonGroup2.after('selectionChange', function(e){
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    var selection = buttonGroup2.get('selection');
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    Y.log('buttonGroup2 selected count = ' + selection.length);
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                });
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                /*
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    A button generator
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    Y.Buttons adds nothing useful for the gernator buttons, so just add the class and a listener.
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                */
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                Y.all('.generator').addClass('yui3-button').on('click', function(e){
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    var button, type, config;
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    type = e.target.getAttribute('data-type');
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    config = {
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                        label: type
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    };
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    if (type === 'disabled') {
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                        config.type = 'push';
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                        config.disabled = true;
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    }
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    else {
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                        config.type = type;
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    }
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    config.srcNode = Y.Node.create('<button>' + config.label + '</button>');
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    button = new Y.Button(config);
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                    Y.one('#generated').append(button.getNode());
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith                })
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith            });
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        </script>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith    </head>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith    <body class='yui3-skin-sam'>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <div id='yconsole'></div>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <h1>Button prototype</h1>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <hr />
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <h2>Event</h2>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <button id='event' tabindex='3'>Change <br /> Color</button>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <br>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <h2>Toggle w/ event</h2>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <input type='button' id='toggle' value='Toggle'></input>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <br>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <h2>Link</h2>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <a href='http://yahoo.com' id='link'>Go to yahoo.com</a>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <h2>Disabled</h2>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <button id='disabled'>Should be disabled</button>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <br>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <h2>Group (radio)</h2>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <button class='group' id='btn1'>Button 13</button>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <button class='group' id='btn2'>Button 27</button>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <button class='group' id='btn3'>Button 40</button>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <br>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <h2>Multi-Group (checkbox)</h2>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <button class='multigroup' id='btn4'>Button 4</button>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <button class='multigroup' id='btn5'>Button 5</button>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <button type='button' class='multigroup' id='btn6'>Button 6</button>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <br>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <h2>Generator</h2>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <button class='generator' data-type='push'>Generate Push Button</button>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <button class='generator' data-type='toggle'>Generate Toggle Button</button>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <button class='generator' data-type='disabled'>Generate Disabled Button</button>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith        <div id='generated' style='border:solid black 1px;'></div>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith    </body>
2f5f997e354e7f4a02b6818bdc68fbece5cb237dJohn Smith</html>