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: 02/9/11
Build Tag: gallery-2011.02.09-21-32
Project: YUI 3
License: YUI BSD
YUI Version: 3.1.1
Free for use.
A collection of ButtonItem widgets that offer the ability of managed user interaction states (default, active, hover), keyboard accessibility, and the ability to easily tie functionality to multiple interactions.
To view all available events and configuration attributes, view the documentation.
You can create toolbars in 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-2011.02.09-21-32',
modules: {
'gallery-aui-skin-base': {
fullpath: 'http://yui.yahooapis.com/gallery-2011.02.09-21-32/build/gallery-aui-skin-base/css/gallery-aui-skin-base-min.css',
type: 'css'
},
'gallery-aui-skin-classic': {
fullpath: 'http://yui.yahooapis.com/gallery-2011.02.09-21-32/build/gallery-aui-skin-classic/css/gallery-aui-skin-classic-min.css',
type: 'css',
requires: ['gallery-aui-skin-base']
}
}
}).use('gallery-aui-toolbar', function(Y) {
// A Standard horizontal toolbar
var toolbar1 = new Y.Toolbar(
{
activeState: true,
children: [
{label: 'Add', icon: 'plus'},
{label: 'Remove', icon: 'minus'},
{label: 'Config', icon: 'gear'}
]
}
).render();
// A vertical toolbar
var toolbar2 = new Y.Toolbar(
{
activeState: true,
orientation: 'vertical',
children: [
{label: 'Add'},
{label: 'Remove'},
{label: 'Config'}
]
}
).render();
// A horizontal toolbar with only icons
var toolbar3 = new Y.Toolbar(
{
activeState: true,
children: [
{icon: 'plus'},
{icon: 'minus'},
{icon: 'gear'}
]
}
).render();
// A horizontal toolbar with only labels
var toolbar3 = new Y.Toolbar(
{
activeState: true,
children: [
{label: 'Add'},
{label: 'Remove'},
{label: 'Config'}
]
}
).render();
// A toolbar with interaction on the buttons
var toolbar2 = new Y.Toolbar(
{
activeState: true,
orientation: 'vertical',
children: [
{label: 'Add', handler: function(){alert('You clicked plus');}},
{label: 'Remove', handler: {fn: function(){alert('You mousedover remove');}, context: toolbar2, type: 'mouseover'}},
{label: 'Config', hoverState: false}
]
}
).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.