JAVASCRIPT

A Close Look at the Yahoo Button Control

If you've ever wanted a little help with the user interfaces for your web site, you might want to learn about the Yahoo Button Control. It comes from Yahoo's UI framework, and can help you to create an interactive and professional-looking front end for your web site. This article, the first one in a five-part series, gives you a taste of what you can do with it.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

November 20, 2007

TABLE OF CONTENTS:

Of course, it’s recommended that you first download the complete Yahoo! UI library, and then use the specific files required by this particular control. For more information on how to get this library, please visit: http://developer.yahoo.com/yui/button/. There, you’ll have all the information required to choose what supporting files you should host on you own computer to use the Button Controls.

All right, now that I've clarified that point, please pay attention to the hands-on example below. It shows how to include a basic button control into a basic web page, in this case using an existing <input> tag.

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 simple Yahoo Button with existing input tag
(button)</title>

</head>

var sButton = new YAHOO.widget.Button(

"button1", // id of source element

{

checked: false, // override button attribute

label: "Click me!"

}

);

</script>

</body>

</html>

As you can see, including a simple Button Control into a sample web document is actually a two-step process, since it requires that you first load all the required CSS and JavaScript files onto the document in question, and then incorporate the button by creating a new instance of the “YAHOO.widget.Button” class with the proper initialization parameters.

In this specific case, the button is built by using an existing <input> tag, identified as “button1.” Next, this ID is passed to the button’s constructor, which is finally displayed on the browser. In addition, if you run the previous sample (X)HTML file on your own computer, you’ll hopefully see a button similar to the one shown below:

That’s was pretty easy, right? As you can see, building a simple Yahoo! Button Control by using an existing <input> tag is in fact a no-brainer process that can be performed with minor difficulties.

So far, you learned how to create a basic Button Control by utilizing an <input type=”button”> tag. However, this control can be also created by using different types of form elements. In the next section I’m going to show you how to achieve this by utilizing a radio button.

To see how this will be done, click on the link below and keep reading.

Next: Using an existing radio button >>