Building Controls with JavaScript and the Yahoo Button Control
As you probably heard, last year Yahoo released a mature DTHML library called “Yahoo UI.” It contains an impressive number of pre-built user interface components or widgets, such as calendars and rich text editors, color pickers and drop-down menus, along with other handy stuff. More specifically speaking, there’s one widget included with this package, called the “Yahoo Button Control,” which can be quite useful for building professional-looking buttons, and even entire navigational menus, by using only a few lines of JavaScript code and structural markup.
Building Controls with JavaScript and the Yahoo Button Control - Using JavaScript and Yahoo! Button Controls to work with checkboxes (Page 3 of 4 )
As you’ll probably recall from the previous section, it’s extremely easy to use the handy Yahoo! Button Control to create professional-looking checkboxes, which naturally can be included into any web form.
Undoubtedly, the procedure for building these visual appealing checkboxes will be better understood if you take some time to study the following practical example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
As illustrated above, building a few basic checkboxes using the Yahoo! Button Control is indeed a straightforward process that can be performed with minor problems. As you can see, in this case I created three new instances of the “YAHOO.widget.Button class, and then I specified a value of “checkbox” for its respective “type” incoming argument.
Finally, I coded a simple DIV, identified as “container,” which is used by the aforementioned class instances to place the respective checkboxes in the sample web document. Also, to complement the previous code sample, below I included another illustrative image, which shows how the checkboxes in question are displayed by the browser:
Even though this explanation may sound a bit obvious, if you copy the source code corresponding to the prior example, and test it on your own computer, you’ll see that all the Button Controls behave exactly like real (X)HTML checkboxes, which means that they can be checked/unchecked individually.
All right, at this moment I think that you’ll have a more appropriate idea of how to utilize the remarkable functionality offered by the Yahoo! Button Control to build some basic web form elements, like simple buttons and checkboxes.
However, this tutorial would be rather incomplete if I don’t show you another hands-on example where these controls are used to build some eye-catching radio buttons. Sounds really interesting, right?
Thus, if you want to learn how this will be done, jump ahead and read the final section of this article. It’s just one click away.
JavaScript 
/ 3 
A Close Look at the Yahoo Button Control
