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:

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

<head>

<title>Example of "link" Yahoo Button using existing "a" tag</title>

</head>

<a id="linkbutton1" href="http://www.devshed.com">DevShed</a>

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