Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Button (gallery-button) on cdn

Last Updated: 10/16/12

+ 0 -

Anthony Pipkin

YUI Developer

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').

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 Smooth skin applied. You can also see it in action at Button Skinned .

For all options visit All Buttons

Code Sample

<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!'); });
 
});

Forum Posts

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