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.
A Close Look at the Yahoo Button Control - Introducing a basic example (Page 2 of 4 )
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">
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.