Gallery

<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();
});