Building Link Buttons with the Yahoo Button Control - Building link buttons from existing "a" tags
(Page 3 of 4 )
As I said previously, “push” buttons aren’t actually very helpful when used as isolated controls of a given user interface, but this limitation can be easily addressed if you use the Yahoo Button Control to build “link” buttons. Yes, as you might have guessed, these web-based controls come in handy for creating eye-catching buttons that are linked to a specified URL, which can be useful when it comes to building highly responsive front-ends for different web applications.
However, the question that comes up is: how can these buttons be created using the Yahoo Button Control? Actually, the process is very easy to follow. It consists of spawning an instance of the “YAHOO.widget.Button” class that you learned in previous examples, and specifying an ID for the web page element that will hold the button in question.
You will understand this procedure much better if you study the signature of the following example, which displays a link button on the browser using an existing “<a>” tag:
<!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 "link" Yahoo Button using existing "a" tag</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">
<a id="linkbutton1" href="http://www.devshed.com">DevShed</a>
<script type="text/javascript">
var sLinkButton1 = new YAHOO.widget.Button("linkbutton1");
</script>
</body>
</html>
As illustrated by the previous hands-on example, building a “link” button is a simple process that requires first coding a basic <a> tag into the pertinent web page and then creating an instance of the "YAHOO.widget.Button” JavaScript class, which uses the ID of the mentioned tag to make the button work properly.
Besides, you can see that I attached a URL for the button in question by specifying this value in the “href” attribute of the target <a> element. Quite simple to grasp, right?
Finally, below I included a complementary image that shows in a clear fashion how the previous “link” button is displayed on the browser:
All right, at this point you should have an approximate idea of how to build a basic “link” button using the Yahoo! Control button in conjunction with an existing “<a>” element. However, there’s more good news ahead, since the same control can also be constructed by utilizing a few lines of JavaScript code.
So, assuming that you’re interested in learning how to build some “link” buttons directly from JavaScript, in the upcoming section I’ll set up a demonstrative example for you. Click on the link that appears below and keep reading. We’re almost finished!
Next: Building link buttons using JavaScript >>
More JavaScript Articles
More By Alejandro Gervasio
