Building Controls with JavaScript and the Yahoo Button Control - Building Yahoo! Control buttons using non existing (X)HTML
(Page 2 of 4 )
In consonance with the concepts that I deployed in the introduction of this article, it’s also possible to build different types of Button Controls by using only a few lines of JavaScript code. In this way, we avoid working directly with <input> tags. In this case, the only web page element that must be specified is the container in which the control will be placed.
Indeed, creating a Button Control with JavaScript is a straightforward process, but surely you’ll grasp the logic in implementing this approach much more easily if you have a look at the following hands-on example. It illustrates the creation of a basic button directly from JavaScript.
<!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 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 sButton = new YAHOO.widget.Button({
id: "button1",
type: "button",
label: "Sample Button",
container: "container"
});
</script>
<div id="container"></div>
</body>
</html>
Certainly, the above example isn’t rocket science, right? As you can see, a basic Button Control is built by creating a new instance of the already familiar “YAHOO.widget.Button” class. This class accepts a few input arguments, like the type of button being created, in addition to the ID of the web page container where the control will be placed directly.
Of course, the final step of this creation process consists of defining the pertinent web page container, which in this case is simply a DIV element. Also, to complement the previous example of how to build a Button Control only with JavaScript, below I included an illustrative screen shot that shows very clearly the visual appearance of the button just created:
All right, at this stage you learned how to build a basic Button Control by utilizing the assistance of JavaScript. However, I’d like to extend this concept and show you how to create some checkboxes by using the same controls that you learned a few lines before.
Want to see how this checkbox will be built? Click on the link that appears below and keep reading.
Next: Using JavaScript and Yahoo! Button Controls to work with checkboxes >>
More JavaScript Articles
More By Alejandro Gervasio
/ 3 
