JavaScript
  Home arrow JavaScript arrow Page 2 - Building Link Buttons with the Yahoo Butto...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Moblin 
JMSL Numerical Library 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
JAVASCRIPT

Building Link Buttons with the Yahoo Button Control
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 2
    2007-12-11

    Table of Contents:
  • Building Link Buttons with the Yahoo Button Control
  • Building some basic push buttons
  • Building link buttons from existing "a" tags
  • Building link buttons using JavaScript

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    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.

    More JavaScript Articles
    More By Alejandro Gervasio


       · In this fourth chapter of the series, you’ll learn how to build different link...
     

    JAVASCRIPT ARTICLES

    - Using Mod_Security to Protect Your Server
    - Detecting and Countering Server Intrusions
    - Securing Your Web Server
    - Building a Secure Web Server
    - Protecting the Server
    - Book Review: Learning the Yahoo! User Interf...
    - Dynamically Generate a Selection List in a R...
    - Intergrate DWR into Your Java Web Application
    - Detect Browser Compatibility with the Reques...
    - Using the EXT JS Date Picker Widget
    - Ajax Hack for Entering Information Without R...
    - EXT JS 2.1 Overview
    - Using the Style Object for Zebra Tables with...
    - Binary Searching
    - An Improved Approach to Building Zebra Tables






    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 3 hosted by Hostway
    Stay green...Green IT