JAVASCRIPT

Creating Different Push Buttons with the Yahoo Button Control

This is the third article in a series about the Yahoo Button Control. In it, we will discuss how to create some basic "push" buttons using the YBC, which is part of the Yahoo UI framework.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

December 04, 2007

TABLE OF CONTENTS:

As I explained in the section that you just read, the handy Yahoo! Button Control allows you to easily build different types of buttons. In this case, I’m going to demonstrate how to create one in particular, called “push,” which, as its name suggests, behaves like a conventional web form button. It’s not linked by default to any specified URL, unless this is done by using the respective <a> tag.

Now that I have explained how a “push” button works, please take a look at the signature of the following hands-on example, which shows how to build this kind of widget by using two existing <input type=”button”> tags. The corresponding code sample is as follows:

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

As you can see, the above example illustrates how to build a pair of “push” buttons” by using two existing “<input type=”button”> tags and the familiar “YAHOO.widget.Button” class that you saw in previous articles of the series. Not too difficult to grasp, right?

And finally, here’s an additional screen shot that shows more clearly the look and feel of the “push” buttons just created:

All right, at this point I think that you should have a solid background on how to build “push” buttons by using the neat Yahoo! Button Control along with a few simple “<input type=”button”> tags. However, I’d like to expand a bit more on how to build these widgets. Thus, in the last section of this tutorial I’ll show you yet another practical example, aimed at creating the buttons in question, but this time by using a predefined CSS class bundled with the Yahoo UI library, called “yui-push-button”.

To see how this brand new hands-on example will be developed, please jump ahead and read the next few lines.

Next: Building push buttons using predefined button control HTML >>