everything.html revision ec334eb75e9a653724ec392634897801962e1f18
<!DOCTYPE html>
<html>
<head>
<!-- reset the default browser styles -->
<style>
/* Fix this - Shouldn't require body specificity */
body .yui3-button-selected {
background-color:#426FD9;
color:white;
}
</style>
<script>
YUI({
base: '/build/',
debug: true,
combo: false,
filter: 'raw'
}).use('button', 'button-group', 'cssfonts', function(Y){
/*
Just a basic test with a listener
*/
var button = new Y.Button({
srcNode: Y.one('#event')
});
button.get('srcNode').on('click', function(){
});
/*
A 'toggle' button listening for the selectedChange event
*/
var button2 = new Y.Button({
srcNode: Y.one('#toggle'),
type: 'toggle'
});
button2.on('selectedChange', function(){
console.log('toggled');
});
/*
A 'link' button
*/
var button3 = new Y.Button({
srcNode: Y.one('#link')
});
/*
A group of radio-like buttons
*/
var buttonGroup = new Y.ButtonGroup({
buttons: new Y.Buttons({
srcNodes: Y.all('.group')
}),
type: 'radio'
});
buttonGroup.after('selectionChange', function(e){
console.log('buttonGroup selected = ' + buttonGroup.get('selection').length);
});
/*
A group of checkbox-like buttons
*/
var buttonGroup2 = new Y.ButtonGroup({
buttons: new Y.Buttons({
srcNodes: Y.all('.multigroup'),
type: 'toggle'
}),
type: 'checkbox'
});
buttonGroup2.after('selectionChange', function(e){
console.log('buttonGroup2 selected = ' + buttonGroup2.get('selection').length);
});
/*
A button generator
*/
Y.all('.generator').addClass('yui3-button');
Y.all('.generator').on('click', function(e){
var type = e.target.getAttribute('x-type');
var button = new Y.ButtonGenerator({
label: type,
type: type
});
Y.one("#generated").append(button.get('srcNode'));
})
});
</script>
</head>
<body class='yui3-skin-sam'>
<h1>Button prototype</h1>
<hr />
<h2>Event</h2>
<button id='event' tabindex='3'>Change <br /> Color</button>
<br>
<h2>Toggle w/ event</h2>
<input type='button' id='toggle' value='Toggle'></input>
<br>
<h2>Link</h2>
<br>
<h2>Group (radio)</h2>
<button class='group' id='btn1'>Button 13</button>
<button class='group' id='btn2'>Button 27</button>
<button class='group' id='btn3'>Button 40</button>
<br>
<h2>Multi-Group (checkbox)</h2>
<button class='multigroup' id='btn4'>Button 4</button>
<button class='multigroup' id='btn5'>Button 5</button>
<button type='button' class='multigroup' id='btn6'>Button 6</button>
<br>
<h2>Generator</h2>
<button class='generator' x-type='push'>Generate Push Button</button>
<button class='generator' x-type='toggle'>Generate Toggle Button</button>
<hr>
<div id='generated' style='border:solid black 1px;'></div>
</body>
</html>