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:

Usually, in most of my articles on web development, I like to reintroduce briefly some of the concepts that I deployed in a preceding tutorial. This article is no exception. Below I included a pair of illustrative code samples that show how to create some radio buttons and checkboxes directly with JavaScript using the neat Button Control.

Here are the mentioned code samples, so have a look at them, please:

(example of building radio buttons with the Button Control)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Example of "radio" Yahoo Button using no existing
HTML</title>

</head>

var sButtonGroup1 = new YAHOO.widget.ButtonGroup({

id: "buttongroup1",

container: "container" });

sButtonGroup1.addButtons([

{ label: "Radio1", value: "Radio1", checked: true },

{ label: "Radio2", value: "Radio2" },

{ label: "Radio3", value: "Radio3" },

{ label: "Radio4", value: "Radio4" }

]);

</script>

</body>

</html>

(example on building checkboxes with the Button Control)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Example of "checkbox" Yahoo Button using no existing
HTML</title>

</head>

var sCheckButton1 = new YAHOO.widget.Button({

type: "checkbox",

label: "CheckBox1",

id: "checkbutton1",

value: "1",

container: "container",

checked: true });

var sCheckButton2 = new YAHOO.widget.Button({

type: "checkbox",

label: "CheckBox2",

id: "checkbutton2",

value: "2",

container: "container",

checked: true });

var sCheckButton3 = new YAHOO.widget.Button({

type: "checkbox",

label: "CheckBox3",

id: "checkbutton3",

value: "3",

container: "container",

checked: true });

</script>

</body>

</html>

As you can see from the two previous code samples, building a few basic radio buttons and checkboxes using the Yahoo! Button Control is indeed a straightforward process that can be tackled by any web developer with any intermediate experience on their shoulders.

The above practical examples demonstrate the complete procedure for creating the mentioned radio buttons and checkboxes directly with JavaScript (that is, no existing <input> tags are required), via the instantiation of the already familiar “YAHOO.widget.Button” class with the proper initialization parameters.

Now, speaking more specifically, the first example is rather special, since it shows how to create four radio buttons by using the “Yahoo.widget.ButtonGroup” class, which comes bundled with the Yahoo UI library. The second case implements a more conventional approach; it demonstrates how to build some simple checkboxes by utilizing the previously mentioned “YAHOO.widget.Button” class.

True to form, both cases are actually very simple to grasp, so I believe that you shouldn’t have any major problems understanding how they work.

So far, so good. At this time you hopefully learned how to create radio buttons and checkboxes via the utilization of the Button Control, which comes packaged with the Yahoo UI framework. So, the next step to take will consist of teaching you how to use this widget to build “push” elements by using different approaches.

As you may guess, this topic will be properly covered in the upcoming section, thus click on the link below and keep reading.

Next: Extending the Use of Control Buttons >>