Home arrow JavaScript arrow Page 2 - Building Link Buttons with the Yahoo Button Control
JAVASCRIPT

Building Link Buttons with the Yahoo Button Control


If you’re a web developer who’s searching for a friendly guide on how to use the Button Control widget that comes bundled with the Yahoo UI framework, then look no further, and start reading this article now! Welcome to the fourth part of the series "A close look at the Yahoo Button Control."

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
December 11, 2007
TABLE OF CONTENTS:
  1. · Building Link Buttons with the Yahoo Button Control
  2. · Building some basic push buttons
  3. · Building link buttons from existing "a" tags
  4. · Building link buttons using JavaScript

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Building Link Buttons with the Yahoo Button Control - Building some basic push buttons
(Page 2 of 4 )

Before I demonstrate how to build “link” buttons using the Yahoo Button Control,  I’d like to refresh your memory with some concepts I discussed previously  surrounding the creation of “push” controls. As you’ll certainly recall from the preceding tutorial, these types of elements can be quickly included into any web page either by coding a few simple <input> tags, or by using predefined CSS classes.

Both approaches are implemented by the following code samples, so have a look at them, please:

(example: building push buttons with existing <input type=”button”> tags)

<!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 "push" Yahoo Button using input
type=button</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="button" id="pushbutton1" name="button1" value="Push
Button 1">

<input type="button" id="pushbutton2" name="button2" value="Push
Button 2">

  <script type="text/javascript">

   var sPushButton1 = new YAHOO.widget.Button("pushbutton1");

   var sPushButton2 = new YAHOO.widget.Button("pushbutton2");

  </script>

</body>

</html>

(example on building push buttons with predefined Button Control HTML)

<!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 "push" Yahoo Button using predefined button
Control HTML</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">

  <span id="pushbutton1" class="yui-button yui-push-button">

  <span class="first-child">

  <input type="button" name="button1" value="Push Button 1">

 </span>

</span>

  <span id="pushbutton2" class="yui-button yui-push-button">

   <em class="first-child">

    <button type="button" name="button2">Push Button 2</button>

   </em>

</span>

  <span id="pushbutton3" class="yui-button yui-push-button">

   <strong class="first-child">

    <button type="button" name="button3">Push Button 3</button>

   </strong>

</span>

 <script type="text/javascript">

  var sPushButton1 = new YAHOO.widget.Button("pushbutton1");

  var sPushButton2 = new YAHOO.widget.Button("pushbutton2");

  var sPushButton3 = new YAHOO.widget.Button("pushbutton3");

 </script>

</body>

</html>

As shown previously, including a few simple “push” buttons using the Button Control is a no-brainer process, even if you’re a web designer who’s just starting to work with the Yahoo UI DHTML framework. In addition, I believe that the two previous examples should be clear enough to demonstrate how to build these types of buttons with only minor hassles.

So far, so good. At this stage I’m pretty sure that you've already mastered the techniques shown in the preceding article of the series aimed at building “push” buttons, which means that it’s time to earn how to create controls that can be easily tied to a specific URL.

These buttons, as you might have guessed, are called “links” within the context of the Yahoo UI library and their usage will be explained in detail in the section to come, so click on the link below and keep reading.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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