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 28 more by this user. Created: 05/1/10
Last CDN Push: 02/2/11
Build Tag: gallery-2011.02.02-21-07
Project: YUI 3
License: YUI BSD
YUI Version: 3.7.3
Free for use.
Moving to 'gallery-xarno-button' and Y.Xarno.Button
A widget that creates a button with several mouse events, type, disabled and a label setter. Mouse events that are interacted with are mouseenter, mouseleave, mousedown, mouseup, and click. Mousedown is stored on drag out until mouse is released.
Giving the button an icon, allows you to change the look of the button based on a class name. For instance you can have a button with icon "disk", then on click, change the icon to "loading" and set enabled to false. Icons use a generic yui3-icon- class for future skin support.
Changing the label will change the title of the button to match the label. If you want to remove the label and set the title, you will need to button.set('label', '').set('title', 'Button Title').
In this example we set the label and icon to 'arrow-nw' and set the render to true in the config. This will print a button out as it shown in the image above with the Xarno Smooth skin applied. You can also see it in action at Button Skinned .
For all options visit All Buttons
<script src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script>
YUI({
modules : {
'gallery-button' : {
fullpath : 'button.js',
requires : ['button-skin-xarno','widget','event-mouseenter','widget-child']
},
'button-skin-xarno' : { // custom skin for buttons
fullpath : 'assets/skins/xarno/button.css',
type : 'css'
}
}
}).use('gallery-button', function(Y) {
var bt1 = new Y.Button({label:'arrow-nw', icon:'arrow-nw', render:true});
bt1.set('callback', function(){ alert('Button `Arrow-NW` was clicked!'); });
});
Subject | Author | Date |
---|---|---|
Namespace collision with gallery-form | Brian J. Miller | 09/30/10 |
gallery-button - Including button.js? | Gary | 07/17/11 |
Re: gallery-button - Including button.js? | Anthony Pipkin | 07/17/11 |
Re: gallery-button - Including button.js? | Gary | 07/18/11 |
Standardizing apipkin Modules | Anthony Pipkin | 10/16/12 |
All code on this site is licensed under the BSD License unless stated otherwise.