Scripting the <button> element

Gary — Fri, 06/06/2008 - 11:41pm

This javascript code creates cross-browser events for all <button> elements on a page. This code literally saves me hours of time when I am designing web forms. I use it extensively whenever I am designing new functionality in Dovetail Agent (a web-based CRM system) for my "day job" at a major US retailer (think Thanksgiving Day parade).

You can check out the example page or download the code. For all you jquery fans, you can check this out.

Why use this technique?

By utilizing this functionality the amount of javascript code inside the HTML file is significantly reduced (hopefully removed all together) 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 this for a number of reasons:

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

How does it work?

Once the page is loaded, all <button> elements are given the CSS class of "button". Mouseover and mouseout events are used to add and remove an additional CSS class of "buttonOver" to create a hover effect. Focus and blur events are then added to mimic the mouse events for keyboard users. Finally, click and double-click events are added to execute a javascript function called "[ElementID]_click()".

In the example on this page, the first button element is given an ID of "cmdSave". The click event that is created will be called "cmdSave_click()". The double-click event should never be called but I have added it here for completeness. Hopefully, it will also prevent the code from being called multiple times for those users who tend to always double-click.

How do you use it?

To add this functionality to your page, follow these steps:

Include the file button.js in your HTML page or add the functions to your own javascript library.
<script language = "javascript" type = "text/javascript" src = "button.js"> </script>
Call the setupButtons() function when the page is loaded with the onload event in one of the following ways:
- On the Body element:<body onload = "setupButtons();">
- Using standard call in your javascript file: window.onload = function() { setupButtons();}
- Using the included addEvent function in your javascript file^*: addEvent("load",setupButtons);
Add the two CSS classes called "button" and "buttonOver" to your stylesheet. These control the look and feel of the button element.
```
.button { color:#000; background-color:#fff;}
.buttonOver { color:#fff; background-color:#000;} 
```

Add javascript functions named after the ID of each <button> element on the page.

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

Thats it!

Here is the HTML code for the buttons:

<div id="buttonlist">
	<button id="cmdSave">Save</button>
	<button id="cmdClose">Close>/button>
	<button id="cmdDone">Done</button>
</div>

More information on addEvent

^* - The addEvent function used in this example was wrtten by Dean Edwards. One of the nice parts of this function is that it appends the event to the object without overwriting any existing events. You can read his excellent blog post that explains the nuts and bolts of the function.

Update: I have added a new post on how to accomplish this effect using the JQuery library.

Trackback URL for this post:

http://www.garystorey.com/trackback/3

Cool beans.

Anonymous — Tue, 06/17/2008 - 2:20pm

I definitely like the jQuery approach - I'm fast becoming a jQuery junkie.

-Gary
http://blogs.dovetailsoftware.com/blogs/gsherman/

Gary Storey - My little corner of the internet