tests/manual/generator.html

6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright<!DOCTYPE html>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright<html>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright    <head>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <script src='/build/yui/yui-min.js'></script>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <script>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            YUI({
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                debug: true,
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                combo: false,
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                filter: 'raw'
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright            }).use('button-group', 'console', function(Y){
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                new Y.Console().render();
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                Y.one("#generator").on("click", function(){
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright                    var count, type, group;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    count = Y.one('#count').get('value');
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    type = Y.one('input[name=type]:checked').get('value');
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    Y.one("#container").empty(true);
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright                    for(var i=1; i < count; i++) {
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright                        node = Y.Plugin.Button.createNode({label: i});
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright                        Y.one("#container").append(node);
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    }
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    group = new Y.ButtonGroup({
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright                        srcNode: '#container',
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                        type: type
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright                    }).render();
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    group.on('selectionChange', function(e){
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                        Y.log('Changed');
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    });
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                });
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            });
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </script>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <style>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            .yui3-button-selected {
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                background-color:#426FD9;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                color:white;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            }
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </style>
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 Example: Generator</h1>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <hr />
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        How many buttons would you like? <input type="text" value="100" id="count">
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        Type: <input type='radio' name='type' value='radio' checked='true'> Radio
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright              <input type='radio' name='type' value='checkbox'> Checkbox
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <button id="generator" class="yui3-button">Make buttons!</button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <br><br>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <div id="container"></div>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright    </body>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright</html>