Home arrow JavaScript arrow Page 2 - A Close Look at the Yahoo Button Control

A Close Look at the Yahoo Button Control

If you've ever wanted a little help with the user interfaces for your web site, you might want to learn about the Yahoo Button Control. It comes from Yahoo's UI framework, and can help you to create an interactive and professional-looking front end for your web site. This article, the first one in a five-part series, gives you a taste of what you can do with it.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
November 20, 2007
  1. · A Close Look at the Yahoo Button Control
  2. · Introducing a basic example
  3. · Using an existing radio button
  4. · Building a Button Control using a simple checkbox

print this article

A Close Look at the Yahoo Button Control - Introducing a basic example
(Page 2 of 4 )

As with any other third-party library, to start working with Yahoo Button Controls you'll first have to download the corresponding source files. In this case, they consist of a group of both JavaScript and CSS files.

Of course, it’s recommended that you first download the complete Yahoo! UI library, and then use the specific files required by this particular control. For more information on how to get this library, please visit: http://developer.yahoo.com/yui/button/. There, you’ll have all the information required to choose what supporting files you should host on you own computer to use the Button Controls.

All right, now that I've clarified that point, please pay attention to the hands-on example below. It shows how to include a basic button control into a basic web page, in this case using an existing <input> tag.

The corresponding code sample is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml"> 


<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />

<title>Example of simple Yahoo Button with existing input tag

<!-- Include core + Skin CSS files-->

<link rel="stylesheet" type="text/css"

<!-- This file is optional: Menu Stylesheet (required for
creating buttons of type "menu" and "split") -->

<link rel="stylesheet" type="text/css"

<!-- Include dependencies -->

<script type="text/javascript" src="build/yahoo-dom-event/yahoo-

<script type="text/javascript" src="build/element/element-beta-

<!-- This file is optional: Menu and Container Core (required for
creating buttons of type "menu" and "split") -->

<script type="text/javascript"

<script type="text/javascript" src="build/menu/menu-

<!-- Source file -->

<script type="text/javascript" src="build/button/button-beta-


  <body class="yui-skin-sam">

<input type="button" id="button1" name="button" value="Sample
Button" checked>

  <script type="text/javascript">

   var sButton = new YAHOO.widget.Button(

    "button1", // id of source element


  checked: false, // override button attribute

  label: "Click me!"






As you can see, including a simple Button Control into a sample web document is actually a two-step process, since it requires that you first load all the required CSS and JavaScript files onto the document in question, and then incorporate the button by creating a new instance of the “YAHOO.widget.Button” class with the proper initialization parameters.

In this specific case, the button is built by using an existing <input> tag, identified as “button1.” Next, this ID is passed to the button’s constructor, which is finally displayed on the browser. In addition, if you run the previous sample (X)HTML file on your own computer, you’ll hopefully see a button similar to the one shown below:

That’s was pretty easy, right? As you can see, building a simple Yahoo! Button Control by using an existing <input> tag is in fact a no-brainer process that can be performed with minor difficulties.

So far, you learned how to create a basic Button Control by utilizing an <input type=”button”> tag. However, this control can be also created by using different types of form elements. In the next section I’m going to show you how to achieve this by utilizing a radio button.

To see how this will be done, click on the link below and keep reading.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials