tests/manual/everything.html

	everything.html revision 705f5b98fcc7d5378f007556c762963d75cb1fd2
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont<!DOCTYPE html>
bc6f4c1c4c1b739fd06d2de05b77b9d08c4d8a5aTinderbox User<html>
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont    <head>
0c27b3fe77ac1d5094ba3521e8142d9e7973133fMark Andrews        <script src='/build/yui/yui-min.js'></script>
0c27b3fe77ac1d5094ba3521e8142d9e7973133fMark Andrews
0c27b3fe77ac1d5094ba3521e8142d9e7973133fMark Andrews        <script>
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont
2eeb74d1cf5355dd98f6d507a10086e16bb08c4bTinderbox User            YUI({
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                base: '/build/',
83a28ca274521e15086fc39febde507bcc4e145eMark Andrews                debug: true,
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                combo: false,
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                filter: 'raw'
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt            }).use('button', 'cssfonts', 'console', function(Y){
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                new Y.Console().render();
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                Y.log('A ninja button called ' + new Y.Button({label:'Bruce Lee'}).getNode().getContent());
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                /*
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                    Just a basic test with a listener
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                */
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                var button = new Y.Button({
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                    srcNode: Y.one('#event')
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                });
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                button.getNode().on("click", function(e){
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                    Y.log("click");
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                });
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                /*
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                    A 'toggle' button listening for the selectedChange event
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                */
26d8ffe715e74d1e67d268551449b780fec1b95fAutomatic Updater                var button2 = new Y.Button({
ca4e44ebe8f3b29a426fe047c4192262ca660c6fAutomatic Updater                    srcNode: Y.one('#toggle'),
784a904bd06c7492361ed09a882d10c636b1291bAutomatic Updater                    type: 'toggle',
99d8f5a70440ee8b63ab1745d713b96dde890546Tinderbox User                    on: {
6ea2385360e9e2167e65f9286447da9eea189457Tinderbox User                        selectedChange:function(){
19c7b1a0293498a3e36692c59646ed6e15ffc8d0Tinderbox User                           Y.log('selectedChange');
0c27b3fe77ac1d5094ba3521e8142d9e7973133fMark Andrews                        }
bc6f4c1c4c1b739fd06d2de05b77b9d08c4d8a5aTinderbox User                    }
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                });
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                /*
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                    A 'link' button
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                    Preferably, the user would just apply a yui3-button style to an <a> element and not use JS
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                */
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                var button3 = new Y.Button({
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                    srcNode: Y.one('#link')
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                });
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                /*
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                    A disabled button
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                */
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                var button4 = new Y.Button({
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                    srcNode: Y.one('#disabled'),
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                    disabled: true
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                });
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                /*
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                    A group of radio-like buttons
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                */
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                var buttonGroup = new Y.ButtonGroup({
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                    srcNodes: Y.all('.group'),
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                    type: 'radio'
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                });
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt
30eec077db2bdcb6f2a0dc388a3cdde2ede75ec1Mark Andrews                buttonGroup.after('selectionChange', function(e){
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                    Y.log('buttonGroup selection changed');
a60bf97f9f7dcde6f4ca6e8188245fb0866200dbEvan Hunt                });
a60bf97f9f7dcde6f4ca6e8188245fb0866200dbEvan Hunt
a60bf97f9f7dcde6f4ca6e8188245fb0866200dbEvan Hunt
a60bf97f9f7dcde6f4ca6e8188245fb0866200dbEvan Hunt
a60bf97f9f7dcde6f4ca6e8188245fb0866200dbEvan Hunt
a60bf97f9f7dcde6f4ca6e8188245fb0866200dbEvan Hunt
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont
1f821c10583d9cddbaf3626a96ff8cf10cdb645bFrancis Dupont                /*
1f821c10583d9cddbaf3626a96ff8cf10cdb645bFrancis Dupont                    A group of checkbox-like buttons
1f821c10583d9cddbaf3626a96ff8cf10cdb645bFrancis Dupont                */
1f821c10583d9cddbaf3626a96ff8cf10cdb645bFrancis Dupont                var buttonGroup2 = new Y.ButtonGroup({
1f821c10583d9cddbaf3626a96ff8cf10cdb645bFrancis Dupont                    srcNodes: Y.all('.multigroup'),
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt                    type: 'checkbox'
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                });
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt
30eec077db2bdcb6f2a0dc388a3cdde2ede75ec1Mark Andrews                buttonGroup2.after('selectionChange', function(e){
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                    var selection = buttonGroup2.getSelectedButtons();
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                    Y.log('buttonGroup2 selected count = ' + selection.length);
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                });
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
aaaf8d4f4873d21e55c3ffb4f656203d08339865Mark Andrews
78608b0a454246d0e1e0169f1d671b8427e48199Francis Dupont
6098d364b690cb9dabf96e9664c4689c8559bd2eMark Andrews
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                /*
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                    A button generator
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                    Y.Buttons adds nothing useful for the gernator buttons, so just add the class and a listener.
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                */
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                Y.all('.generator').addClass('yui3-button').on('click', function(e){
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                    var button, type, config;
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                    type = e.target.getAttribute('data-type');
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                    config = {
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                        label: type
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                    };
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                    if (type === 'disabled') {
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                        config.type = 'push';
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont                        config.disabled = true;
d1f39121a69b6afa6c0c9e44eceb60910d1d7f81Evan Hunt                    }
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                    else {
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                        config.type = type;
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                    }
d1f39121a69b6afa6c0c9e44eceb60910d1d7f81Evan Hunt
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                    config.srcNode = Y.Node.create('<button>' + config.label + '</button>');
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                    button = new Y.Button(config);
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                    Y.one('#generated').append(button.getNode());
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews                })
d1f39121a69b6afa6c0c9e44eceb60910d1d7f81Evan Hunt
d1f39121a69b6afa6c0c9e44eceb60910d1d7f81Evan Hunt            });
8b78c993cb475cc94e88560941b28c37684789d9Francis Dupont        </script>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews    </head>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews    <body class='yui3-skin-sam'>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <div id='yconsole'></div>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <h1>Button prototype</h1>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <hr />
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <h2>Event</h2>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <button id='event' tabindex='3'>Log a message</button>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
8b78c993cb475cc94e88560941b28c37684789d9Francis Dupont        <br>
8b78c993cb475cc94e88560941b28c37684789d9Francis Dupont
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <h2>Toggle w/ event</h2>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <input type='button' id='toggle' value='Toggle'></input>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <br>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <h2>Link</h2>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <a href='http://yahoo.com' id='link'>Go to yahoo.com</a>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <h2>Disabled</h2>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <button id='disabled'>Should be disabled</button>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <br>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <h2>Multi-Group (checkbox)</h2>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <button class='multigroup' id='btn4'>Button 4</button>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <button class='multigroup' id='btn5'>Button 5</button>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <button class='multigroup' id='btn6'>Button 6</button>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <br>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <h2>Group (radio)</h2>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <button class='group' id='btn1'>Button 13</button>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <button class='group' id='btn2'>Button 27</button>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <button class='group' id='btn3'>Button 40</button>
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont
2a31bd531072824ef252c18303859d6af7451b00Francis Dupont        <br>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <h2>Generator</h2>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <button class='generator' data-type='push'>Generate Push Button</button>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <button class='generator' data-type='toggle'>Generate Toggle Button</button>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <button class='generator' data-type='disabled'>Generate Disabled Button</button>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews        <div id='generated' style='border:solid black 1px;'></div>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews    </body>
e939674d53a127ddeeaf4b41fd72933f0b493308Mark Andrews</html>