Building Link Buttons with the Yahoo Button Control - Building link buttons using JavaScript
(Page 4 of 4 )
By using a similar approach to the one implemented to build “push” buttons, it’s perfectly possible to create a few “link” controls directly with JavaScript, instead of utilizing some basic <a> tags. As you’ll see in a moment, this process is reduced to spawning a new instance of the “YAHOO.Widget.Button” class, which I used with earlier examples, and defining a basic (X)HTML container, which is handy for putting the button in question at a specific place inside the respective web document.
Please take a look at the following code sample, which shows how to build a simple “link” button using only some 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 "link" 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 sLinkButton1 = new YAHOO.widget.Button({
type: "link",
id: "linkbutton1",
label: "DevShed",
href: "http://www.devshed.com",
container: "container" });
</script>
<div id="container"></div>
</body>
</html>
That’s was really easy to understand! As you can see, building a basic “link” button with JavaScript requires first specifying the correct input parameters for the respective “YAHOO.widget.Button” class, and then defining the containing element that will house the mentioned button.
In addition, the following image shows the visual appearance of the “link” control just created:
Personally, I feel inclined to work with existing <a> tags when it comes to creating several “link” buttons using the Yahoo! Button Control, because I think that this approach is much simpler and cleaner. However, the technique that you will choose to work with will depend mostly on your particular needs.
Final thoughts
That’s all for the moment. In this fourth installment of the series, you hopefully learned how to use the Yahoo! Button Control to build some attractive controls that can be easily linked to specific URLS.
Nonetheless, this educational journey hasn’t finished yet, because in the last part of the series I’ll show you how to utilize the aforementioned button control to create professional-looking drop-down menus. The upcoming article will be instructive, so 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. |
