Creating Different Push Buttons with the Yahoo Button Control - Extending the Use of Control Buttons
(Page 3 of 4 )
As I explained in the section that you just read, the handy Yahoo! Button Control allows you to easily build different types of buttons. In this case, I’m going to demonstrate how to create one in particular, called “push,” which, as its name suggests, behaves like a conventional web form button. It’s not linked by default to any specified URL, unless this is done by using the respective <a> tag.
Now that I have explained how a “push” button works, please take a look at the signature of the following hands-on example, which shows how to build this kind of widget by using two existing <input type=”button”> tags. 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 "push" Yahoo Button using input
type=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="pushbutton1" name="button1" value="Push
Button 1">
<input type="button" id="pushbutton2" name="button2" value="Push
Button 2">
<script type="text/javascript">
var sPushButton1 = new YAHOO.widget.Button("pushbutton1");
var sPushButton2 = new YAHOO.widget.Button("pushbutton2");
</script>
</body>
</html>
As you can see, the above example illustrates how to build a pair of “push” buttons” by using two existing “<input type=”button”> tags and the familiar “YAHOO.widget.Button” class that you saw in previous articles of the series. Not too difficult to grasp, right?
And finally, here’s an additional screen shot that shows more clearly the look and feel of the “push” buttons just created:
All right, at this point I think that you should have a solid background on how to build “push” buttons by using the neat Yahoo! Button Control along with a few simple “<input type=”button”> tags. However, I’d like to expand a bit more on how to build these widgets. Thus, in the last section of this tutorial I’ll show you yet another practical example, aimed at creating the buttons in question, but this time by using a predefined CSS class bundled with the Yahoo UI library, called “yui-push-button”.
To see how this brand new hands-on example will be developed, please jump ahead and read the next few lines.
Next: Building push buttons using predefined button control HTML >>
More JavaScript Articles
More By Alejandro Gervasio
