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

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

A Close Look at the Yahoo Button Control - Using an existing radio button
(Page 3 of 4 )

As I expressed in the previous section, Yahoo! Button Controls are extremely versatile, since they can be easily built not only by using an <input type=”button”> tag, but by coding other web form elements as well.

To demonstrate more clearly the previous concept, below I coded a brand new hands-on example, which illustrates how to include a simple Button Control by using an “<input type=”radio”> tag.

The corresponding code sample is as follows:

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

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

  <head>

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

<title>Example of simple Yahoo Button with existing input tag
(radio)</title>

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

<link rel="stylesheet" type="text/css"
href="build/button/assets/skins/sam/button.css">

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

<link rel="stylesheet" type="text/css"
href="build/menu/assets/skins/sam/menu.css">

<!-- Include dependencies -->

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

 <script type="text/javascript" src="build/element/element-beta-
min.js"></script>

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

 <script type="text/javascript"
src="build/container/container_core-min.js"></script>

 <script type="text/javascript" src="build/menu/menu-
min.js"></script>

 <!-- Source file -->

 <script type="text/javascript" src="build/button/button-beta-
min.js"></script>

 </head>

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

 <input type="radio" 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!"

  }

 );

 </script>

 </body>

 </html> 

As shown by the previous example, it’s extremely easy to include a basic Button Control utilizing different web form elements. As you can see, I utilized a radio button to build the control in question, whose ID is also passed as an input argument to the pertinent YAHOO.widget.Button class.

The result of this process is shown by the image below:

 

So far, so good, right? At this point you hopefully grasped the underlying logic required to include a simple Yahoo! Button control into any web document, since the whole process is indeed very easy to follow. However, I’d like to provide you with yet another example of how to create this type of control. This time we'll use a basic checkbox, in this way completing this practical demonstration of building Button Controls from existing (X)HTML markup.

To see how this final example will be developed, please go ahead and read the new few lines. 


blog comments powered by Disqus
JAVASCRIPT ARTICLES

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

Developer Shed Affiliates

 




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