basic.html revision f8a4451ab76c7cf265accab801c3514e64ed2742
<!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', 'console', function(Y){
new Y.Console().render();
var push = new Y.Button({
label: 'Click to select',
srcNode: Y.one('#push'),
onClick: function(e){
push.set('selected', true);
Y.log('click push')
}
});
push.once('selectedChange', function(){
push.set('label', 'Click to disable');
push.onClick(function(){
push.set('label', 'Disabled');
push.set('selected', false);
push.set('disabled', true);
})
})
var toggle = new Y.Button({
label: 'Click to toggle',
srcNode: '#toggle',
type: 'toggle'
});
var disabled = new Y.Button({
srcNode: '#disabled',
disabled: true
});
toggle.onClick(function(e){
Y.log('click toggle')
});
});
</script>
</head>
<body class='yui3-skin-sam'>
<div id='yconsole'></div>
<h1>Button Example: Basic</h1>
<hr />
<h2>Push w/ event</h2>
<button id='push' tabindex='3'>Button</button>
<br>
<h2>Toggle</h2>
<input type='button' id='toggle' value='Toggle'></input>
<br>
<h2>disabled</h2>
<input type='button' id='disabled' value='disabled'></input>
</body>
</html>