Gary Storey - My little corner of the internet

This example uses the JQuery javascript library to create cross-browser events for all <button> elements on a page. Using the JQuery library signficantly reduces the number of lines of javascript code necessary to create this effect. You can see this effect written in "standard" javascript on my previous post. That post also lists out some of the reasons why I am doing this as well as the benefits associated with using this technique.

As always, you can view the code in action or just go ahead and download it.

Why use this technique?

By utilizing this functionality the amount of javascript code inside the HTML file is significantly reduced (preferably, replaced completely) without losing any functionality. Also, the javascript functions will follow a standard naming convention for page level actions. This makes both the HTML and Javascript code easier to maintain.

I used the <button> element for a number of reasons:

• It has no default action.
• It does not interfere with styles/actions for the <input /> or elements.
• Keyboard users can access it using the tab key.

The JQuery Code

Here is the JQuery code that is being used on this page:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
     $(document).ready(function() { 
         $(":button").addClass("button") 
           .bind('mouseover focus',function(event){ 
                $(this).addClass("buttonOver");
           } ) 
           .bind('mouseout blur',function(event){ 
                $(this).removeClass("buttonOver");
           } ) 
           .bind('click dblclick',function(event){ 
                eval($(this).attr("id")+"_click();");} )
           } );

     function cmdSave_click() { 
           // your code here ... 
     } 
     function cmdClose_click() {
           // your code here ... 
     } 
     function cmdDone_click() {
           // your code here ... 
     } 

</script>

The Code Explained

This code is functionally equivalent to what I did in my previous post before but I will explain what's being done step-by-step for you anyway. I'm just that kind of guy :-)

This snippet of code tells the page that once the DOM has been loaded to go ahead and execute the function. The $(":button") is JQuery code for selecting all the button elements on the page. The second half of that line adds the "button" class to all of them. It is pretty self-explanatory.

    $(document).ready(function() {
         $(":button").addClass("button") 

The next section of code uses the JQuery .bind function to create mouseover/focus and mouseout/blur events for the button elements by adding or removing the buttonOver class respectively.

           .bind('mouseover focus',function(event){ 
                $(this).addClass("buttonOver");
           } ) 
           .bind('mouseout blur',function(event){ 
                $(this).removeClass("buttonOver");
           } ) 

The last section is used to create the actual click event. It simply reads the ID of the each element and uses the javascript eval function to create the "[ID]_click()" function call.

           .bind('click dblclick',function(event){ 
                eval($(this).attr("id")+"_click();");} )
           } );

That's it! Let me know if you have any questions or comments.