Building Controls with JavaScript and the Yahoo Button Control - Using the Yahoo! Button Control to build some basic radio buttons
(Page 4 of 4 )
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example of "radio" 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 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>
<div id="container"></div>
</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. |
/ 3 
