Building Link Buttons with the Yahoo Button Control - Building some basic push buttons
(Page 2 of 4 )
Before I demonstrate how to build “link” buttons using the Yahoo Button Control, I’d like to refresh your memory with some concepts I discussed previously surrounding the creation of “push” controls. As you’ll certainly recall from the preceding tutorial, these types of elements can be quickly included into any web page either by coding a few simple <input> tags, or by using predefined CSS classes.
Both approaches are implemented by the following code samples, so have a look at them, please:
(example: building push buttons with existing <input type=”button”> tags)
<!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>
(example on building push buttons with predefined Button Control HTML)
<!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 predefined button
Control 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">
<span id="pushbutton1" class="yui-button yui-push-button">
<span class="first-child">
<input type="button" name="button1" value="Push Button 1">
</span>
</span>
<span id="pushbutton2" class="yui-button yui-push-button">
<em class="first-child">
<button type="button" name="button2">Push Button 2</button>
</em>
</span>
<span id="pushbutton3" class="yui-button yui-push-button">
<strong class="first-child">
<button type="button" name="button3">Push Button 3</button>
</strong>
</span>
<script type="text/javascript">
var sPushButton1 = new YAHOO.widget.Button("pushbutton1");
var sPushButton2 = new YAHOO.widget.Button("pushbutton2");
var sPushButton3 = new YAHOO.widget.Button("pushbutton3");
</script>
</body>
</html>
As shown previously, including a few simple “push” buttons using the Button Control is a no-brainer process, even if you’re a web designer who’s just starting to work with the Yahoo UI DHTML framework. In addition, I believe that the two previous examples should be clear enough to demonstrate how to build these types of buttons with only minor hassles.
So far, so good. At this stage I’m pretty sure that you've already mastered the techniques shown in the preceding article of the series aimed at building “push” buttons, which means that it’s time to earn how to create controls that can be easily tied to a specific URL.
These buttons, as you might have guessed, are called “links” within the context of the Yahoo UI library and their usage will be explained in detail in the section to come, so click on the link below and keep reading.
Next: Building link buttons from existing "a" tags >>
More JavaScript Articles
More By Alejandro Gervasio
