Building Controls with JavaScript and the Yahoo Button Control

Introduction

Welcome to the second part of the series that began with “A Close Look at the Yahoo! Button Control.” This series provides you with a friendly guide to working with the Yahoo! Button Controls, and also offers numerous code samples so you can start quickly incorporating these widgets into your own web sites.

Now that I have introduced the subject of this series, and assuming that you already read the first tutorial, then I believe that building simple buttons using the Yahoo! Button Control is now a familiar process to you. It's very easy to grasp. As I demonstrated in detail during the preceding article of the series, these buttons can be rapidly built by including different <input> tags into any web document, and then creating an instance of the “YAHOO.widget.Button” class with JavaScript.

From that point onward, it’s perfectly possible to display several types of controls, such as radio buttons and checkboxes, which logically use the polished skins offered by the Yahoo UI library. Quite simple, right?

Well, as I expressed before, so far you learned how to create a certain number of button controls by utilizing some existing “<input>” tags. However, the Button Control widget is quite flexible, and in addition, it can be created directly via JavaScript, without having to code any additional markup.

Since you may want to learn how to build different Button Controls using a few lines of JavaScript code, in this second article of the series I’ll provide you with numerous examples on how to achieve this task as painless as possible.

Now that you know what this article is about, it’s time to analyze different approaches to including a few Button Controls into any web document. Let’s begin now!