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:

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

<head>

<title>Example of "push" Yahoo Button using input
type=button</title>

</head>

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

<head>

<title>Example of "push" Yahoo Button using predefined button
Control HTML</title>

</head>

</span>

<button type="button" name="button2">Push Button 2</button>

</em>

</span>

<button type="button" name="button3">Push Button 3</button>

</strong>

</span>

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