everything.html revision f32e892f6d83db718fac81598b6cda68906ccd74
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh<!DOCTYPE html>
5cff782560a1c3cf913ba5574a5123a299f3315emh<html>
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh <head>
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh <!-- reset the default browser styles -->
5cff782560a1c3cf913ba5574a5123a299f3315emh <style>
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh body .yui3-button-selected {
5cff782560a1c3cf913ba5574a5123a299f3315emh background-color:#426FD9;
5cff782560a1c3cf913ba5574a5123a299f3315emh color:white;
5cff782560a1c3cf913ba5574a5123a299f3315emh }
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh </style>
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh <script src='/build/yui/yui-min.js'></script>
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh <script>
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh YUI({
5cff782560a1c3cf913ba5574a5123a299f3315emh base: '/build/',
5cff782560a1c3cf913ba5574a5123a299f3315emh debug: true,
5cff782560a1c3cf913ba5574a5123a299f3315emh combo: false,
5cff782560a1c3cf913ba5574a5123a299f3315emh filter: 'raw'
5cff782560a1c3cf913ba5574a5123a299f3315emh }).use('button', function(Y){
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh var button = new Y.Button({
5cff782560a1c3cf913ba5574a5123a299f3315emh srcNode: Y.one('#event')
5cff782560a1c3cf913ba5574a5123a299f3315emh });
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh button.get('srcNode').on('mousedown', function(){
5cff782560a1c3cf913ba5574a5123a299f3315emh button.changeColor('#'+Math.floor(Math.random()*16777215).toString(16));
5cff782560a1c3cf913ba5574a5123a299f3315emh });
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh var button2 = new Y.Button({
5cff782560a1c3cf913ba5574a5123a299f3315emh srcNode: Y.one('#toggle'),
5cff782560a1c3cf913ba5574a5123a299f3315emh type: 'toggle'
5cff782560a1c3cf913ba5574a5123a299f3315emh });
5cff782560a1c3cf913ba5574a5123a299f3315emh button2.on('selectedChange', function(){
5cff782560a1c3cf913ba5574a5123a299f3315emh console.log('toggled');
5cff782560a1c3cf913ba5574a5123a299f3315emh });
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh var buttonGroup = new Y.ButtonGroup({
5cff782560a1c3cf913ba5574a5123a299f3315emh srcNodes: '.group',
5cff782560a1c3cf913ba5574a5123a299f3315emh type: 'radio',
5cff782560a1c3cf913ba5574a5123a299f3315emh decorate: true
5cff782560a1c3cf913ba5574a5123a299f3315emh });
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh buttonGroup.after('selectionChange', function(e){
5cff782560a1c3cf913ba5574a5123a299f3315emh console.log('buttonGroup selected = ' + buttonGroup.get('selection').length);
5cff782560a1c3cf913ba5574a5123a299f3315emh });
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh var buttonGroup2 = new Y.ButtonGroup({
5cff782560a1c3cf913ba5574a5123a299f3315emh srcNodes: '.multigroup',
5cff782560a1c3cf913ba5574a5123a299f3315emh type: 'checkbox'
5cff782560a1c3cf913ba5574a5123a299f3315emh });
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh buttonGroup2.after('selectionChange', function(e){
5cff782560a1c3cf913ba5574a5123a299f3315emh console.log('buttonGroup2 selected = ' + buttonGroup2.get('selection').length);
5cff782560a1c3cf913ba5574a5123a299f3315emh });
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh var buttonGroup3 = new Y.ButtonGroup({
5cff782560a1c3cf913ba5574a5123a299f3315emh srcNodes: Y.all('.generator'),
5cff782560a1c3cf913ba5574a5123a299f3315emh type: 'push'
5cff782560a1c3cf913ba5574a5123a299f3315emh });
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh buttonGroup3.get('srcNodes').on('click', function(e){
5cff782560a1c3cf913ba5574a5123a299f3315emh var type = e.target.getAttribute('x-type');
5cff782560a1c3cf913ba5574a5123a299f3315emh new Y.ButtonGenerator({
5cff782560a1c3cf913ba5574a5123a299f3315emh parent: Y.one('#generations'),
5cff782560a1c3cf913ba5574a5123a299f3315emh label: type,
5cff782560a1c3cf913ba5574a5123a299f3315emh type: type
5cff782560a1c3cf913ba5574a5123a299f3315emh });
5cff782560a1c3cf913ba5574a5123a299f3315emh })
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh });
5cff782560a1c3cf913ba5574a5123a299f3315emh </script>
5cff782560a1c3cf913ba5574a5123a299f3315emh </head>
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh <body class='yui3-skin-sam'>
5cff782560a1c3cf913ba5574a5123a299f3315emh <h1>JS button prototype</h1>
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh <hr />
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh <h2>Event</h2>
5cff782560a1c3cf913ba5574a5123a299f3315emh <button id='event' tabindex='3'>Change <br /> Color</button>
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh <br>
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh <h2>Toggle w/ event</h2>
5cff782560a1c3cf913ba5574a5123a299f3315emh <input type='button' id='toggle' value='Toggle'></input>
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh <br>
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh <h2>Group (radio)</h2>
5cff782560a1c3cf913ba5574a5123a299f3315emh <button class='group' id='btn1'>Button 13</button>
5cff782560a1c3cf913ba5574a5123a299f3315emh <button class='group' id='btn2'>Button 27</button>
5cff782560a1c3cf913ba5574a5123a299f3315emh <button class='group' id='btn3'>Button 40</button>
5cff782560a1c3cf913ba5574a5123a299f3315emh <br>
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh <h2>Multi-Group (checkbox)</h2>
5cff782560a1c3cf913ba5574a5123a299f3315emh <button class='multigroup' id='btn4'>Button 4</button>
5cff782560a1c3cf913ba5574a5123a299f3315emh <span class='multigroup' id='btn5'>Button 5</span>
5cff782560a1c3cf913ba5574a5123a299f3315emh <span class='multigroup' id='btn6'>Button 6</span>
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh <br>
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh <h2>Generator</h2>
5cff782560a1c3cf913ba5574a5123a299f3315emh <button class='generator' x-type='push'>Generate Push Button</button>
5cff782560a1c3cf913ba5574a5123a299f3315emh <button class='generator' x-type='toggle'>Generate Toggle Button</button>
5cff782560a1c3cf913ba5574a5123a299f3315emh <hr>
5cff782560a1c3cf913ba5574a5123a299f3315emh <div id='generations'>
5cff782560a1c3cf913ba5574a5123a299f3315emh
5cff782560a1c3cf913ba5574a5123a299f3315emh </div>
5cff782560a1c3cf913ba5574a5123a299f3315emh </body>
5cff782560a1c3cf913ba5574a5123a299f3315emh</html>