tests/manual/everything.html

6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright<!DOCTYPE html>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright<html>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright    <head>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <script src='/build/yui/yui-min.js'></script>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <script>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            YUI({
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                base: '/build/',
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                debug: true,
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                combo: false,
00f2b00364b458da2810ab1132f2404b53a31225Derek Gathright                filter: 'raw',
00f2b00364b458da2810ab1132f2404b53a31225Derek Gathright            }).use('button-base', 'button-group', 'cssbutton', 'cssfonts', 'console', function(Y){
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                new Y.Console().render();
9d2b984ddc990a339c99c2ee8ab13348846a0bcbDerek Gathright
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                var ButtonFactory = Y.Plugin.Button.factory;
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                var ToggleFactory = Y.ToggleButton;
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                Y.log('A ninja button called ' + new ButtonFactory({label:'Bruce Lee'}).getContent());
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                /*
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    Just a basic test with a listener
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                */
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                var button = new ButtonFactory({
db1bbf94979caed0f2f215224d52100ba61a42aaDerek Gathright                    srcNode: Y.one('#event')
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                });
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                button.on("click", function(e){
c9871cbdfcd26b5d20932513df38a0f231ddc33fDerek Gathright                    Y.log("click");
b28e90463180540ce576a7941dcade8d95beee76Derek Gathright                });
b28e90463180540ce576a7941dcade8d95beee76Derek Gathright
b28e90463180540ce576a7941dcade8d95beee76Derek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                /*
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    A 'toggle' button listening for the selectedChange event
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                */
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                var button2 = new ToggleFactory({
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    srcNode: Y.one('#toggle'),
c9871cbdfcd26b5d20932513df38a0f231ddc33fDerek Gathright                    on: {
c9871cbdfcd26b5d20932513df38a0f231ddc33fDerek Gathright                        selectedChange:function(){
c9871cbdfcd26b5d20932513df38a0f231ddc33fDerek Gathright                           Y.log('selectedChange');
c9871cbdfcd26b5d20932513df38a0f231ddc33fDerek Gathright                        }
c9871cbdfcd26b5d20932513df38a0f231ddc33fDerek Gathright                    }
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                }).render();
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                /*
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    A 'link' button
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    Preferably, the user would just apply a yui3-button style to an <a> element and not use JS
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                */
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                var button3 = new ButtonFactory({
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    srcNode: Y.one('#link')
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                });
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                /*
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    A disabled button
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                */
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                var button4 = new ButtonFactory({
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    srcNode: Y.one('#disabled'),
b28e90463180540ce576a7941dcade8d95beee76Derek Gathright                    disabled: true
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                });
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                /*
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                    A group of checkbox-like buttons
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                */
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                var buttonGroup2 = new Y.ButtonGroup({
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                    srcNodes: Y.all('.multigroup'),
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                    type: 'checkbox'
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                });
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                buttonGroup2.after('selectionChange', function(e){
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                    var selection = buttonGroup2.getSelectedButtons();
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                    Y.log('buttonGroup2 selected count = ' + selection.length);
db92b84e128cab8bd1aecfa3c38718a339eb501fDerek Gathright                });
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                /*
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                    A group of radio-like buttons
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                */
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                var buttonGroup = new Y.ButtonGroup({
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                    srcNodes: Y.all('.group'),
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                    type: 'radio'
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                });
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                buttonGroup.after('selectionChange', function(e){
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                    Y.log('buttonGroup selection changed');
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                });
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                /*
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    A button generator
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    Y.Buttons adds nothing useful for the gernator buttons, so just add the class and a listener.
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                */
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                Y.all('.generator').addClass('yui3-button').on('click', function(e){
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                    var button, type, config, Factory;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    type = e.target.getAttribute('data-type');
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                    srcNode = Y.Node.create('<button>' + type + '</button>');
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                    Y.one('#generated').append(srcNode);
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    config = {
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                        label: type,
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                        disabled: false,
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                        srcNode: srcNode
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    };
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    if (type === 'disabled') {
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                        Factory = Y.Button;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                        config.disabled = true;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    }
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                    else if (type === 'push') {
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                        Factory = Y.Button;
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                    }
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                    else if (type === 'toggle') {
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                        Factory = Y.ToggleButton;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    }
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                    button = new Factory(config);
d8a453d703387a8f8168c110b3a052dc60e4a794Derek Gathright                    button.render();
bb34581aa2148e0cfe89fbb5473165ae35a87fb5Derek Gathright                });
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            });
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </script>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright    </head>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright    <body class='yui3-skin-sam'>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <div id='yconsole'></div>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <h1>Button prototype</h1>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <hr />
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <h2>Event</h2>
ee35285880f15c21c8e5cd9c624701307eedc46dDerek Gathright        <button id='event' tabindex='3'>Log  <br /> a message</button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <br>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <h2>Toggle w/ event</h2>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <input type='button' id='toggle' value='Toggle'></input>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <br>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <h2>Link</h2>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <a href='http://yahoo.com' id='link'>Go to yahoo.com</a>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <h2>Disabled</h2>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <button id='disabled'>Should be disabled</button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <br>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
f93a86c4a461819a2e403b2e9fc82dbccd1b661aDerek Gathright        <h2>Multi-Group (checkbox)</h2>
f93a86c4a461819a2e403b2e9fc82dbccd1b661aDerek Gathright        <button class='multigroup' id='btn4'>Button 4</button>
ee35285880f15c21c8e5cd9c624701307eedc46dDerek Gathright        <button class='multigroup' id='btn5'>Button <br /> 5</button>
ee35285880f15c21c8e5cd9c624701307eedc46dDerek Gathright        <button class='multigroup' id='btn6'>Button <br /> <br /> 6</button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <br>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
f93a86c4a461819a2e403b2e9fc82dbccd1b661aDerek Gathright        <h2>Group (radio)</h2>
f93a86c4a461819a2e403b2e9fc82dbccd1b661aDerek Gathright        <button class='group' id='btn1'>Button 13</button>
f93a86c4a461819a2e403b2e9fc82dbccd1b661aDerek Gathright        <button class='group' id='btn2'>Button 27</button>
f93a86c4a461819a2e403b2e9fc82dbccd1b661aDerek Gathright        <button class='group' id='btn3'>Button 40</button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <br>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <h2>Generator</h2>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <button class='generator' data-type='push'>Generate Push Button</button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <button class='generator' data-type='toggle'>Generate Toggle Button</button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <button class='generator' data-type='disabled'>Generate Disabled Button</button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <div id='generated' style='border:solid black 1px;'></div>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright    </body>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright</html>