JAVASCRIPT

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.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

November 27, 2007

TABLE OF CONTENTS:

As I stated in the section that you just read, the Yahoo! Button Control allows you to easily create several types of web form elements, including of course, some basic radio buttons. So, taking into account the remarkable functionality offered by this control, let's take a look at the following example. It demonstrates how to build a few simple radio buttons with the Yahoo! Button Control.

The corresponding code sample is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Example of "radio" Yahoo Button using no existing
HTML</title>

</head>

var sButtonGroup1 = new YAHOO.widget.ButtonGroup({

id: "buttongroup1",

name: "radiofield1",

container: "container" });

sButtonGroup1.addButtons([

{ label: "Radio1", value: "Radio1", checked: true },

{ label: "Radio2", value: "Radio2" },

{ label: "Radio3", value: "Radio3" },

{ label: "Radio4", value: "Radio4" }

]);

</script>

</body>

</html>

As you can see, the above hands-on example is slightly different from the others that you learned in the previous sections, since in this case I used an instance of the “YAHOO.widget.ButtonGroup” to build the corresponding radio buttons via JavaScript. The rest of the creation process is similar to the previous examples, where an (X)HTML container is properly defined, with the purpose of placing the radio buttons on the respective web page.

In case you still don’t grasp clearly how these buttons were built, the following screen shot should dissipate any possible doubts:

That’s all for the moment. I hope that all the examples developed in this tutorial will serve you as an introductory guide to using the Yahoo! Control Button with your own web sites. Fun is already guaranteed!

Final thoughts

In this second installment of the series, I walked you through the process of building several types of web form elements, by using a balanced combination of Yahoo! Button Controls and some simple JavaScript code. As you saw from the practical examples that you hopefully learned here, this control will let you create all these elements without the need to include any structural markup, except for the container where the respective widgets will be displayed.

In the next part of the series, I’m going to teach you how to use the neat functionality offered by the Button Control to emulate the behavior of some common elements of a web page, such as links and other web form buttons.

Now that you’ve been warned, you won’t want to miss it!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.