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 Group (gallery-button-group) on cdn

Last Updated: 10/16/12

+ 0 -

Anthony Pipkin

YUI Developer

See 28 more by this user.

Created: 06/22/10
Last CDN Push: 09/8/10
Build Tag: gallery-2010.09.08-19-45
Project: YUI 3
License: YUI BSD
YUI Version: 3.7.3
Free for use.

 

 Moving to 'gallery-xarno-button-group' and Y.Xarno.Button.Group

Utilizes the Widget Parent/Child relationship built into Y.Button and Y.ButtonToggle to create a container around a set of buttons. Also provides the ability to add a label to the front of the button group.

Allows you to use the multiple setting from widget parent and also provides the option to always have one selected. AlwaysSelected works with both multiple and single select modes.

Configuration

label - Prepends the bounding box with a <span> containing the label text
defaultChildType - allows for inline button addition
alwaysSelected - Prevents all buttons in the group from being deselected when using [http://yuilibrary.com/gallery/show/button-toggle/ Y.ButtonToggle]

In this example below we use Y.ButtonGroup to create a very simple edit and align set of buttons similar to what you would see in a word processor. For the align, we select the first button automatically.

Code Sample

<script src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.09.08-19-45'
}).use('gallery-button-group', 'gallery-button', 'gallery-button-toggle', function(Y){
 
    var bt1 = new Y.ButtonToggle({icon: 'edit-bold', title: 'Bold'});
    var bt2 = new Y.ButtonToggle({icon: 'edit-italic', title:'Italic'});
    var bt3 = new Y.ButtonToggle({icon: 'edit-underline', title:'Underline'});
    var bg = new Y.ButtonGroup({label: 'Edit:', multiple: true, children: [bt1,bt2,bt3],render: true});
 
    var bt11 = new Y.ButtonToggle({icon: 'align-left', title: 'Left Justify'});
    var bt12 = new Y.ButtonToggle({icon: 'align-center', title: 'Center Justify'});
    var bt13 = new Y.ButtonToggle({icon: 'align-right', title: 'Right Justify'});
    var bg1 = new Y.ButtonGroup({label: 'Align:', alwaysSelected:true, children: [bt11,bt12,bt13],render: true, multiple:false});
    bg1.selectChild(0);
});

Forum Posts

Subject	Author	Date
Standardizing apipkin Modules	Anthony Pipkin	10/16/12