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:

In consonance with the concepts that I deployed in the prior section, a “push” button control can be easily built not only using some existing “<input> tags, but also by utilizing a predefined CSS class, named “push-button.” The idea behind this approach is simply to provide web developers with another method for creating these widgets using existing markup, which in Yahoo jargon is called “predefined button control HTML.”

To clarify this concept completely, below I included a basic code sample, which shows how to build three basic “push” buttons by using the aforementioned approach.

Having said that, the respective code sample looks like this:

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

In this case, three “push” buttons are created by using the familiar “YAHOO.widget.Button” JavaScript class in conjunction with some <span> and “<button>” tags, which have been tied to the previously mentioned “yui-push-button” CSS class. I find this approach rather hard to follow, so I suggest you use only <input> tags and plain JavaScript to include these “push” buttons into your own web pages.

Finally, to complete the previous example, below I included the corresponding screen shot, which shows the visual appearance of the buttons in question:

So far, so good. Having provided you with a considerable number of concrete examples on how to build “push” buttons using the useful “Yahoo! Button Control,” I guess you shouldn’t have much of a problem using these types of widgets with your own web sites. Happy Coding!

Final thoughts

In this third tutorial of the series I provided you with a friendly introduction to how to create some basic “push” buttons by utilizing the useful Yahoo! Button Control. Nonetheless, this widget can be used to build some other handy controls. Thus, in the upcoming article of the series I’ll show you how to develop buttons that can be quickly tied to a specific URL, which in the context of the Yahoo UI framework are called “links.”

Now that you know what the next part of the series will be about, I don’t think you'll 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.