Anthony Pipkin
YUI Contributor
Last CDN Push: 06/30/10
Build Tag: gallery-2010.06.30-19-54
Project: YUI 3
License: YUI BSD
YUI Version: 3.1.1
Free for use.
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').
Configuration
- label - Button text. Setting label will also set the title.
- callback - Default function for button click
- enabled - Toggles the ability to click the button. Uses disable attribute on the <button> element
- default - Tells parent widget this is the default button. Your application will need to interface this as it has no other purpose than state storage.
- icon - Allows you to set the icon class for the button. This is used for skinning.
- title - Automatically set with set label, adds a title to the button for accessibility purposes. The title can be set if on an icon only button (no label set).
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 skin applied. You can also see it in action at http://www.skylermedia.com/demo/button/demo.php .
Code Sample
<script src="http://yui.yahooapis.com/3.1.0/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!'); });
});
Forum Posts
No forum posts for this module.
YUI Projects
YUI Labs
Contribute
© 2010 YUI Library - Site Credits