A Close Look at the Yahoo Button Control - Introducing a basic example
(Page 2 of 4 )
As with any other third-party library, to start working with Yahoo Button Controls you'll first have to download the corresponding source files. In this case, they consist of a group of both JavaScript and CSS files.
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example of simple Yahoo Button with existing input tag
(button)</title>
<!-- Include core + Skin CSS files-->
<link rel="stylesheet" type="text/css"
href="build/button/assets/skins/sam/button.css">
<!-- This file is optional: Menu Stylesheet (required for
creating buttons of type "menu" and "split") -->
<link rel="stylesheet" type="text/css"
href="build/menu/assets/skins/sam/menu.css">
<!-- Include dependencies -->
<script type="text/javascript" src="build/yahoo-dom-event/yahoo-
dom-event.js"></script>
<script type="text/javascript" src="build/element/element-beta-
min.js"></script>
<!-- This file is optional: Menu and Container Core (required for
creating buttons of type "menu" and "split") -->
<script type="text/javascript"
src="build/container/container_core-min.js"></script>
<script type="text/javascript" src="build/menu/menu-
min.js"></script>
<!-- Source file -->
<script type="text/javascript" src="build/button/button-beta-
min.js"></script>
</head>
<body class="yui-skin-sam">
<input type="button" id="button1" name="button" value="Sample
Button" checked>
<script type="text/javascript">
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 >>
More JavaScript Articles
More By Alejandro Gervasio
