Home arrow JavaScript arrow Page 4 - 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 - Building a Button Control using a simple checkbox
(Page 4 of 4 )

In accordance with the concepts that I expressed in the previous section, itís perfectly feasible to build a Button Control by using different web form tags. With reference to this topic in particular, I already showed you how to include a simple control into a sample web page using different form elements, such as conventional and radio buttons, so in this case Iím going to teach you how to perform the same task, but utilizing a checkbox.

Having explained that, hereís the corresponding code sample that displays on the browser a basic Yahoo! Button Control by using a common checkbox. Have a look at it, please:

<!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
(checkbox)</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="checkbox" 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 you can see, building basic Yahoo! Control Buttons using different elements of a web form is actually a straightforward procedure that can be tackled with minor hassles. In this case, I utilized a basic checkbox to include the control into a sample web document, but the same approach can be implemented with conventional and radio buttons as well.

Finally, in order to complete the implementation of the practical example, below I included an additional screen shot, which shows the visual appearance of the Control Button created earlier:

 

All right, having already provided you with a decent number of demonstrative examples of how to build different Yahoo Button Controls using existing structural markup, I believe that you shouldnít have major problems working with these user interface elements on your own. As with other topics related to professional web development, practice is the best way to go.

Final thoughts

In this first article of the series, you hopefully learned how to build basic web controls by using the neat Yahoo Button Control bundled with the Yahoo UI library. As you saw previously, all of the code samples demonstrated how to create these buttons from existing (X)HTML.

Nevertheless, as I said in the beginning of this article, itís possible to build these controls with only a few lines of JavaScript code. I'll cover this topic in the next part of the series, so if youíre interested in learning this approach, donít miss it!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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