tests/manual/many.html

	many.html revision e3897aaf02ecc29a0c916fa04106d1aead646e10
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass<!DOCTYPE html>
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass<html>
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass    <head>
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass        <!-- reset the default browser styles -->
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass        <style>
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass            /* Fix this - Shouldn't require body specificity */
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass            body .yui3-button-selected {
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                background-color:#426FD9;
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                color:white;
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass            }
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass        </style>
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass        <script src='/build/yui/yui-min.js'></script>
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass        <script>
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass            YUI.add('buttons', function(Y){
5df7096bb0f6c5de5af1a19f6ee87d0458028726Dav Glass
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                var Buttons = function(config){
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                    var buttons = [];
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                    config.srcNodes.each(function(node){
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                        var button = new Y.Button({
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                            type: config.type,
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                            srcNode: node
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                        });
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                        buttons.push(button);
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                    });
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                    return buttons;
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                }
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                Y.Buttons = Buttons;
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass            });
5df7096bb0f6c5de5af1a19f6ee87d0458028726Dav Glass
5df7096bb0f6c5de5af1a19f6ee87d0458028726Dav Glass            YUI({
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                debug: true,
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                combo: false,
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                filter: 'raw'
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass            }).use('button', 'buttons', 'button-group', function(Y){
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                Y.one("#generator").on("click", function(){
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass                    var count, button, buttons = [];
b0fb3f7185bd8c3423ff3f5e7d62d0a396919582Dav Glass
                    count = Y.one('#count').get('value');

                    Y.one("#container").empty(true);

                    for(var i=0; i < count; i++) {
                        button = new Y.ButtonGenerator( {label: i} );
                        Y.one("#container").append(button.get('srcNode'));
                        buttons.push(button);
                    }

                    new Y.ButtonGroup({
                        buttons: buttons,
                        type: 'radio'
                    });
                });

            });
        </script>
    </head>

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

        <h1>Buttonpalooza</h1>
        How many buttons would you like? <input type="text" value="100" id="count">
        <button id="generator" class="yui3-button">Make buttons!</button>
        <hr />
        <div id="container"></div>
    </body>
</html>