tests/manual/basic.html

6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright<!DOCTYPE html>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright<html>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright    <head>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <!-- reset the default browser styles -->
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <style>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            /* Fix this - Shouldn't require body specificity */
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            body .yui3-button-selected {
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                background-color:#426FD9;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                color:white;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            }
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </style>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <script src='/build/yui/yui-min.js'></script>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <script>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            YUI({
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                base: '/build/',
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                debug: true,
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                combo: false,
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                filter: 'raw'
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            }).use('button', 'console', function(Y){
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                new Y.Console().render();
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                var push = new Y.Button({
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    label: 'Click to select',
4679bde12548e75a51abcb9c51cde874e70427a8Derek Gathright                    srcNode: Y.one('#push')
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright                }).render();
4679bde12548e75a51abcb9c51cde874e70427a8Derek Gathright                push.on('click', function(e){
4679bde12548e75a51abcb9c51cde874e70427a8Derek Gathright                    push.set('selected', true);
4679bde12548e75a51abcb9c51cde874e70427a8Derek Gathright                    Y.log('click push')
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                });
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                push.once('selectedChange', function(){
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    push.set('label', 'Click to disable');
4679bde12548e75a51abcb9c51cde874e70427a8Derek Gathright                    push.on('click', function(){
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                        push.set('label', 'Disabled');
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                        push.set('selected', false);
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                        push.set('disabled', true);
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    })
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                })
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright                var toggle = new Y.ToggleButton({
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    label: 'Click to toggle',
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright                    srcNode: '#toggle'
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright                }).render();
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                var disabled = new Y.Button({
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    srcNode: '#disabled',
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    disabled: true
24af57b8ae16a109f012057cf02c11258b6d8b4dDerek Gathright                }).render();
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
4679bde12548e75a51abcb9c51cde874e70427a8Derek Gathright                toggle.on('click', function(e){
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                    Y.log('click toggle')
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 Example: Basic</h1>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <hr />
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <h2>Push w/ event</h2>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <button id='push' tabindex='3'>Button</button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <br>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <h2>Toggle</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>disabled</h2>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <input type='button' id='disabled' value='disabled'></input>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright    </body>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright</html>