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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example of "checkbox" Yahoo Button using no existing
HTML</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">
<script type="text/javascript">
var sCheckButton1 = new YAHOO.widget.Button({
type: "checkbox",
label: "CheckBox1",
id: "checkbutton1",
name: "checkboxfield1",
value: "1",
container: "container",
checked: true });
var sCheckButton2 = new YAHOO.widget.Button({
type: "checkbox",
label: "CheckBox2",
id: "checkbutton2",
name: "checkboxfield2",
value: "2",
container: "container",
checked: true });
var sCheckButton3 = new YAHOO.widget.Button({
type: "checkbox",
label: "CheckBox3",
id: "checkbutton3",
name: "checkboxfield3",
value: "3",
container: "container",
checked: true });
</script>
<div id="container"></div>
</body>
</html>
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.
Next: Using the Yahoo! Button Control to build some basic radio buttons >>
More JavaScript Articles
More By Alejandro Gervasio
/ 3 
