everything.html revision f8a4451ab76c7cf265accab801c3514e64ed2742
4518N/A<!DOCTYPE html>
4518N/A<html>
4518N/A <head>
4518N/A <!-- reset the default browser styles -->
4518N/A <style>
4518N/A
4518N/A /* Fix this - Shouldn't require body specificity */
4518N/A body .yui3-button-selected {
6983N/A background-color:#426FD9;
6983N/A color:white;
4518N/A }
4518N/A
4518N/A </style>
4518N/A
6983N/A <script src='/build/yui/yui-min.js'></script>
6983N/A
6983N/A <script>
6983N/A
4518N/A YUI({
4518N/A base: '/build/',
4518N/A debug: true,
4518N/A combo: false,
4518N/A filter: 'raw'
4518N/A }).use('button', 'cssfonts', 'console', function(Y){
4518N/A
4518N/A new Y.Console().render();
4518N/A
4518N/A /*
4518N/A Just a basic test with a listener
4518N/A */
4518N/A var button = new Y.Button({
4518N/A srcNode: Y.one('#event')
4518N/A });
4518N/A
4518N/A // One way of listening for events
4518N/A button.onClick(function(){
4518N/A button.set('backgroundColor', '#'+Math.floor(Math.random()*16777215).toString(16));
4518N/A });
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A /*
4518N/A A 'toggle' button listening for the selectedChange event
4518N/A */
4518N/A var button2 = new Y.Button({
4518N/A srcNode: Y.one('#toggle'),
4518N/A type: 'toggle'
4518N/A });
4518N/A
4518N/A // An alternative to button.get('srcNode').on('click', ...
4518N/A button2.on('selectedChange', function(){
4518N/A Y.log('toggled');
4518N/A });
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A /*
4518N/A A 'link' button
4518N/A Preferably, the user would just apply a yui3-button style to an <a> element and not use JS
4518N/A */
4518N/A var button3 = new Y.Button({
4518N/A srcNode: Y.one('#link')
4518N/A });
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A /*
4518N/A A disabled button
4518N/A */
4518N/A var button4 = new Y.Button({
4518N/A srcNode: Y.one('#disabled'),
4518N/A disabled: false
4518N/A });
4518N/A button4.set('disabled', true);
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A /*
4518N/A A group of radio-like buttons
4518N/A */
4518N/A var buttonGroup = new Y.ButtonGroup({
4518N/A buttons: new Y.Buttons({
4518N/A srcNodes: Y.all('.group')
4518N/A }),
4518N/A type: 'radio'
4518N/A });
4518N/A
4518N/A buttonGroup.after('selectionChange', function(e){
4518N/A Y.log('buttonGroup selection changed');
4518N/A });
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A /*
4518N/A A group of checkbox-like buttons
4518N/A */
4518N/A var buttonGroup2 = new Y.ButtonGroup({
4518N/A buttons: new Y.Buttons({
4518N/A srcNodes: Y.all('.multigroup')
4518N/A }),
4518N/A type: 'checkbox'
4518N/A });
4518N/A
4518N/A buttonGroup2.after('selectionChange', function(e){
4518N/A var selection = buttonGroup2.get('selection');
4518N/A Y.log('buttonGroup2 selected count = ' + selection.length);
4518N/A });
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A
4518N/A /*
4518N/A A button generator
4518N/A Y.Buttons adds nothing useful for the gernator buttons, so just add the class and a listener.
4518N/A */
4518N/A Y.all('.generator').addClass('yui3-button').on('click', function(e){
4518N/A var button, type, config;
4518N/A
4518N/A type = e.target.getAttribute('data-type');
4518N/A
4518N/A config = {
4518N/A label: type
4518N/A };
4518N/A
4518N/A if (type === 'disabled') {
4518N/A config.type = 'push';
4518N/A config.disabled = true;
4518N/A }
4518N/A else {
4518N/A config.type = type;
4518N/A }
4518N/A
4518N/A button = new Y.ButtonGenerator(config);
4518N/A Y.one('#generated').append(button.getDOMNode());
4518N/A })
4518N/A
4518N/A });
4518N/A </script>
4518N/A </head>
4518N/A
4518N/A <body class='yui3-skin-sam'>
4518N/A
4518N/A <div id='yconsole'></div>
4518N/A
4518N/A <h1>Button prototype</h1>
4518N/A
4518N/A <hr />
4518N/A
4518N/A <h2>Event</h2>
4518N/A <button id='event' tabindex='3'>Change <br /> Color</button>
4518N/A
4518N/A
4518N/A <br>
4518N/A
4518N/A
4518N/A <h2>Toggle w/ event</h2>
4518N/A <input type='button' id='toggle' value='Toggle'></input>
4518N/A
4518N/A
4518N/A <br>
4518N/A
4518N/A
4518N/A <h2>Link</h2>
4518N/A <a href='http://yahoo.com' id='link'>Go to yahoo.com</a>
4518N/A
4518N/A
4518N/A <h2>Disabled</h2>
4518N/A <button id='disabled'>Should be disabled</button>
4518N/A
4518N/A
4518N/A <br>
4518N/A
4518N/A
4518N/A <h2>Group (radio)</h2>
4518N/A <button class='group' id='btn1'>Button 13</button>
4518N/A <button class='group' id='btn2'>Button 27</button>
4518N/A <button class='group' id='btn3'>Button 40</button>
4518N/A
4518N/A
4518N/A <br>
4518N/A
4518N/A
4518N/A <h2>Multi-Group (checkbox)</h2>
4518N/A <button class='multigroup' id='btn4'>Button 4</button>
4518N/A <button class='multigroup' id='btn5'>Button 5</button>
4518N/A <button type='button' class='multigroup' id='btn6'>Button 6</button>
4518N/A
4518N/A
4518N/A <br>
4518N/A
4518N/A
4518N/A <h2>Generator</h2>
4518N/A <button class='generator' data-type='push'>Generate Push Button</button>
4518N/A <button class='generator' data-type='toggle'>Generate Toggle Button</button>
4518N/A <button class='generator' data-type='disabled'>Generate Disabled Button</button>
4518N/A <div id='generated' style='border:solid black 1px;'></div>
4518N/A
4518N/A </body>
4518N/A</html>