Creating Different Push Buttons with the Yahoo Button Control
(Page 1 of 4 )
This is the third article in a series about the Yahoo Button Control. In it, we will discuss how to create some basic "push" buttons using the YBC, which is part of the Yahoo UI framework.
As you may have heard, the web now has plenty of third-party JavaScript and CSS frameworks. These can facilitate the creation of professional-looking user interfaces, like fancy drop-down menus and CSS selectors, interactive online form elements, and even entire div-based web page layouts. The robust Yahoo UI library has become quite popular with both beginners and experienced web developers thanks to its remarkable arsenal of web-based widgets. These widgets can easily be put to work on existing web sites to make them more appealing to potential visitors.
The Yahoo UI framework is really prolific when it comes to providing web developers with a decent number of pre-built interactive components that can be quickly included into any web page with minor hassles. This fact becomes crystal clear when you look at its neat “Button Control,” which, as its name clearly implies, can be helpful for building all sorts of buttons, ranging from simple “pushing” controls, to sophisticated drop-down menus.
And speaking of the functionality provided by the Yahoo! Button Control, you’ll certainly recall that during the two previous articles of the series, I offered you a detailed guide on how to build several button controls either by using a few basic <input> tags, or directly by coding some simple JavaScript snippets. In both cases, the construction of the buttons in question was performed via the instantiation of the handy “YAHOO.widget.Button” class, which comes bundled with the Yahoo UI library.
In addition to all the examples mentioned earlier, I also showed you how to create different types of web form elements using these controls by covering the implementation of basic radio buttons and simple checkboxes. Nonetheless, the capability offered by the Yahoo! Button Control isn’t limited to building some primitive radio buttons and checkboxes. This control has plenty of other handy features, such as the capacity to create different kinds of buttons.
But what does this mean, in layman’s terms? Well, as you’ll see in the next few lines, the Yahoo! Button Control can be used to build several types of web page elements, including the aforementioned radio buttons and checkboxes, along with some others, such as the ones called “push” and “link” respectively.
As you might have guessed at this point, “push” controls behave like simple buttons that change their appearance when they’re pushed down, while “link” buttons can obviously be linked to specified URLs, as you’d do with text-based hyperlinks. Thus, in this third tutorial of the series I’m going to show you specifically how to build “push” buttons, first using plain (X)HTML, and then with the assistance of JavaScript.
Having already introduced the subject of this article, let’s not waste any more time in preliminaries and start learning how to create some “push” buttons by using the capacity offered by the Yahoo! Control Button. Let’s get going!
Next: A review: building radio buttons and checkboxes with the Yahoo! Button Control >>
More JavaScript Articles
More By Alejandro Gervasio
