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 12 more by this user. Created: 03/15/12
Last CDN Push: 12/12/12
Build Tag: gallery-2012.12.12-21-11
Project: YUI 3
License: YUI BSD
YUI Version: 3.10.0
Free for use.
This static class has a single public method addToggles, which will search within the given container (or the document body if none given) for buttons marked with the yui3-button-toggle className and make them behave as toggle buttons. It will add a selected attribute which will return the pressed state of the button.
The addToggles method will also search for any container marked with the yui3-button-group-exclusive className and make sure that only one toggle button within it is pressed at any time. It also adds a selected attribute to such container which points to the selected button.
Toggle buttons marked with the yui3-button-selected className will be shown depressed.
The plugin adds the aria-pressed attribute to active toggle buttons.
The plugin relies on the CSS Button module for styling. Thus, buttons also have to be marked with the yui3-button className to have the proper styling.
Regular buttons or groups of otherwise unrelated buttons, be them toggles or not, need no special handling so this plugin ignores them. The plugin doesn't interfere with other elements that do have a selected attribute, nor does it add such attribute to any other element but those explicitly marked via the classNames.
The plugin fits well with any template engine as such engine would be used initially to create the markup, either in the client or the server, and then the plugin would run and activate the toggling on the marked elements.
<script src="http://yui.yahooapis.com/3.10.0/build/yui/yui-min.js"></script>
/*
Single toggle button:
<button id="toggle0" class="yui3-button yui3-button-toggle">toggle</button>
Set of mutually exclusive toggle buttons, the third is pre-selected:
<span id="group" class="yui3-button-group-exclusive">
<button id="toggle11" class="yui3-button yui3-button-toggle">A</button>
<button id="toggle12" class="yui3-button yui3-button-toggle">B</button>
<button id="toggle13" class="yui3-button yui3-button-toggle yui3-button-selected">C</button>
</span>
*/
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2012.12.12-21-11'
}).use('gallery-button-plugin', function(Y) {
// Reports the pressed state of the toggle whenever it is clicked
Y.one('#toggle0').on('click', function (){
Y.log('click on toggle, selected: ' + this.get('selected'));
});
// Makes sure it starts unselected
Y.one('#toggle0').set('selected', false);
// selects the B button, overriding the one pre-selected in the markup
Y.one('#group').set('selected','#toggle12');
// Uses event delegation to detect the toggling of the buttons in the group
Y.delegate('click', function(ev) {
// The selected attribute of the container points to the toggle button currently selected
// it may return null if no button is pressed.
var selected = ev.container.get('selected');
// Shows the label of the button selected or none
Y.log('group click, selected: ' + (selected?selected.getContent():'none'));
},'#group', 'button');
});
All code on this site is licensed under the BSD License unless stated otherwise.