JAVASCRIPT

Building Link Buttons with the Yahoo Button Control

If you’re a web developer who’s searching for a friendly guide on how to use the Button Control widget that comes bundled with the Yahoo UI framework, then look no further, and start reading this article now! Welcome to the fourth part of the series "A close look at the Yahoo Button Control."

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

December 11, 2007

TABLE OF CONTENTS:

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">

<head>

<title>Example of "link" Yahoo Button using no existing HTML</title>

</head>

var sLinkButton1 = new YAHOO.widget.Button({

type: "link",

id: "linkbutton1",

label: "DevShed",

href: "http://www.devshed.com",

container: "container" });

</script>

</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.