JAVASCRIPT

Building Controls with JavaScript and the Yahoo Button Control

As you probably heard, last year Yahoo released a mature DTHML library called “Yahoo UI.” It contains an impressive number of pre-built user interface components or widgets, such as calendars and rich text editors, color pickers and drop-down menus, along with other handy stuff. More specifically speaking, there’s one widget included with this package, called the “Yahoo Button Control,” which can be quite useful for building professional-looking buttons, and even entire navigational menus, by using only a few lines of JavaScript code and structural markup.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

November 27, 2007

TABLE OF CONTENTS:

In consonance with the concepts that I deployed in the introduction of this article, it’s also possible to build different types of Button Controls by using only a few lines of JavaScript code. In this way, we avoid working directly with <input> tags. In this case, the only web page element that must be specified is the container in which the control will be placed.

Indeed, creating a Button Control with JavaScript is a straightforward process, but surely you’ll grasp the logic in implementing this approach much more easily if you have a look at the following hands-on example. It illustrates the creation of a basic button directly from 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 simple Yahoo Button using no existing
HTML</title>

</head>

var sButton = new YAHOO.widget.Button({

id: "button1",

type: "button",

label: "Sample Button",

container: "container"

});

</script>

</body>

</html>

Certainly, the above example isn’t rocket science, right? As you can see, a basic Button Control is built by creating a new instance of the already familiar “YAHOO.widget.Button” class. This class accepts a few input arguments, like the type of button being created, in addition to the ID of the web page container where the control will be placed directly.

Of course, the final step of this creation process consists of defining the pertinent web page container, which in this case is simply a DIV element. Also, to complement the previous example of how to build a Button Control only with JavaScript, below I included an illustrative screen shot that shows very clearly the visual appearance of the button just created:

All right, at this stage you learned how to build a basic Button Control by utilizing the assistance of JavaScript. However, I’d like to extend this concept and show you how to create some checkboxes by using the same controls that you learned a few lines before.

Want to see how this checkbox will be built? Click on the link that appears below and keep reading.

Next: Using JavaScript and Yahoo! Button Controls to work with checkboxes >>