The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.
See 69 more by this user. Created: 06/2/10
Last CDN Push: 08/18/10
Build Tag: gallery-2010.08.18-17-12
Project: YUI 3
License: YUI BSD
YUI Version: 3.1.1
Free for use.
A keyboard accessible button widget that supports icons and labels as well as user interaction states and hooking up functionality to individual actions.
To view all available events and configuration attributes, view the documentation.
You can create ButtonItems with many different configurations, like so:
<script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2010.08.18-17-12',
modules: {
'gallery-aui-skin-base': {
fullpath: 'http://yui.yahooapis.com/gallery-2010.08.18-17-12/build/gallery-aui-skin-base/css/gallery-aui-skin-base-min.css',
type: 'css'
},
'gallery-aui-skin-classic': {
fullpath: 'http://yui.yahooapis.com/gallery-2010.08.18-17-12/build/gallery-aui-skin-classic/css/gallery-aui-skin-classic-min.css',
type: 'css',
requires: ['gallery-aui-skin-base']
}
}
}).use('gallery-aui-button-item', function(Y) {
// A button with just an icon
var button1 = new Y.ButtonItem('plus').render();
// A button with a label and icon
var button2 = new Y.ButtonItem(
{
icon: 'minus',
label: 'Remove'
}
).render();
// A button with a basic "click" handler
var button3 = new Y.ButtonItem(
{
icon: 'gear',
label: 'Configure',
handler: function(){
alert('You clicked configure');
}
}
).render();
// A button with an advanced interaction handler
var button4 = new Y.ButtonItem(
{
icon: 'clock',
label: 'Time',
handler: {
fn: function(){alert('You mousedover Time');},
context: Y,
type: 'mouseover'
},
}
).render();
// A button with a persistent toggle-able "active" state
var button5 = new Y.ButtonItem(
{
activeState: true,
icon: 'refresh',
label: 'Refresh'
}
).render();
});
Subject | Author | Date |
---|---|---|
Why? | John Lindal | 06/9/10 |
Re: Why? | Murray Macchio | 06/10/10 |
Re: Why? | Murray Macchio | 06/10/10 |
Styling | Eike Hirsch | 06/11/10 |
Re: Why? | Eduardo Lundgren | 06/11/10 |
Re: Styling | Eduardo Lundgren | 06/11/10 |
Re: Why? | Murray Macchio | 06/11/10 |
Re: Why? | Eduardo Lundgren | 06/11/10 |
Re: Styling | Eike Hirsch | 06/14/10 |
Parallel thinking | Peter Peterson | 06/15/10 |
All code on this site is licensed under the BSD License unless stated otherwise.