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: 08/20/11
Last CDN Push: 10/6/11
Build Tag: gallery-2011.10.06-19-55
Project: YUI 3
License: YUI BSD
YUI Version: 3.10.0
Free for use.
ButtonGroup surrounds its set of buttons with a <fieldset> and if the label property is set, it will add a <legend>. The active buttons, Button and ButtonToggle come from gallery-md-button, which can be used independently. This module also contains ButtonSeparator, which draws a vertical separator in between buttons and doesn't make sense out of a Button Group.
ButtonGroup uses WidgetParent so it inherits all its methods and becomes the target of its children events.
<script src="http://yui.yahooapis.com/3.10.0/build/yui/yui-min.js"></script>
/* Markup for the example below:
<p>Plain button, only label set: <span id="plain"></span></p>
<p>Button from existing markup: <button id="markup" >Click Here!</button></p>
<form method="get" action="#here">
<input type="text" name="input" /><br/>
<input type="submit" id="submit" value="Submit"/>
<input type="reset" id="reset" value="Reset" />
</form>
<p>Toggle button, icon added: <span id="toggle"></span></p>
<p>Group of plain buttons with one separator: <span id="multiButton"></span></p>
<p>Group of toggle buttons, some with icons: <span id="multiToggle"></span></p>
*/
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2011.10.06-19-55'
}).use('gallery-md-button', 'gallery-md-button-group', function (Y) {
'use strict';
var PRESS = 'press',
INFO = 'info';
var plain = (new Y.Button({label:'Ok'})).render('#plain'),
// reads button type from markup
markup = (new Y.Button({srcNode:'#markup'})).render(),
submit = (new Y.Button({srcNode:'#submit'})).render(),
reset = (new Y.Button({srcNode:'#reset'})).render(),
toggle = (new Y.ButtonToggle({label:'B'})).render('#toggle'),
// default child type for ButtonGroup is plain Button,
// other button types need to be explictly instantiated
multiButton = (new Y.ButtonGroup({
label:'Plain Buttons',
children:[
{label:'A'},
new Y.ButtonSeparator(),
{label:'B'},
{label:'C'}
]
})).render('#multiButton'),
multiToggle = (new Y.ButtonGroup({
label:'Toggle Buttons',
children:[
new Y.ButtonToggle({label:'A',icon:'arrow-sw'}),
new Y.ButtonToggle({label:'B'}),
new Y.ButtonToggle({label:'C',icon:'arrow-se', iconPosition:'right'})
]
})).render('#multiToggle');
plain.after(PRESS, function(ev) {
Y.log('Click: '+ ev.target.get('label'), INFO,'plain');
});
// toggles report their 'selected' (pushed or active) state
toggle.after(PRESS, function(ev) {
Y.log('toggle selected: ' + this.get('selected') , INFO,'toggle');
});
// Button groups report which button was pressed
multiButton.after(PRESS, function(ev) {
Y.log('multiButton pressed: ' + ev.pressed.get('label') , INFO,'multiButton');
});
multiToggle.after('selectionChange', function(ev) {
var sel = this.get('selection');
Y.log('multiToggle selected: ' + (sel?sel.get('label'):'none') , INFO,'multiToggle');
});
});
Subject | Author | Date |
---|---|---|
gallery-md-button: css / styling | ispyinternet | 09/21/11 |
Re: gallery-md-button: css / styling | ispyinternet | 09/22/11 |
problems with gallery-md-button | ispyinternet | 09/22/11 |
Gallery Button Group alwaysSelected not working? | ispyinternet | 10/4/11 |
Re: Gallery Button Group alwaysSelected not working? | Satyam | 10/4/11 |
All code on this site is licensed under the BSD License unless stated otherwise.