ButtonGroups in YUI are fairly quick to implement, have a nice look, and act the way most people expect. I’ve been surprised to find out that there are no options available to use images in place of the text on the Buttons inside the ButtonGroup.
In our most recent AJAX Photo Viewer Demo, I decided to use a ButtonGroup for the main mouse tool controls, and Bill Bither suggested that I use icons instead of text.
I didn’t want to throw away what I’d done so far, since the demo was pretty much done at that point. I poked around YUI’s documentation a bit and came up with simple function that can convert a YUI Button into an image only button, much like a button on a tool bar. These converted YUI Buttons still maintain the same original properties internally, so you can use them interchangeably.
var _mainButtonGroup = null;
// An array of arrays containing the label/value of each button, and its corresponding tooltip
// The label of each of these buttons will be used as the base filename for the icon.
var _mainButtonData = [
['Pan', 'Left click and drag to pan the image.'],
['Center', 'Left click anywhere on the image to re-center the control\'s position.'],
['Selection', 'Click and drag to make a rectangular selection. Click outside the selection to remove it.'],
['Ellipse', 'Click and drag to make a rectangular selection. An ellipse will be rendered inside the selected area.'],
['Rectangle', 'Click and drag to make a rectangular selection. A rectangle will be rendered inside the selected area.'],
['Text', 'Click and drag to make a rectangular selection. Sample text will be rendered inside the selected area.'],
['Image', 'Click and drag to make a rectangular selection. An image will be rendered inside the selected area.'],
['Zoom', 'Left click anywhere on the image to zoom in, right click to zoom out.'],
['ZoomSelection', 'Click and drag to make a rectangular selection. The area you select will be zoomed into.']
]
// Create the button group when the page is ready
YAHOO.util.Event.onDOMReady(onPageLoad);
function onPageLoad(){
createButtonGroup();
}
function createButtonGroup(){
// Create new YUI button group on the 'mainContainer' div
_mainButtonGroup = new YAHOO.widget.ButtonGroup({id:'mainButtonGroup', container: 'mainContainer'});
// Add some buttons to the group
for (var i = 0; i < _mainButtonData.length; i++){
_mainButtonGroup.addButton({label: _mainButtonData[i][0], value: _mainButtonData[i][0] });
}
// Render the new button group
_mainButtonGroup.render();
}
// Simple demo function that runs the converter function
function onConvertClick(){
var buttons = _mainButtonGroup.getButtons();
// Loop through the Button array and convert each button
for (var i = 0; i < buttons.length; i++){
convertButtonToImageButton(buttons[i], _mainButtonData[i][1]);
}
}
// Main converter
function convertButtonToImageButton(button, tooltip){
// We use the value of the the button for the icon name
var name = button.get('value');
// Use the icon as a background image
// It's entirely possible for you to use the CSS sprite method here, by
// incrementing the background offset rather than using different names
button._button.parentNode.style.backgroundImage = 'url(icons/' + name + '.png)';
// Add our new icon class to the existing classes
button._button.parentNode.className += ' icon';
// Add tooltip to the parent node
button._button.parentNode.title = tooltip;
// Hide the text of the button
button._button.style.visibility = 'hidden';
}
