YUI Button Lite

By Zach Leatherman | Published: March 23, 2007

Do you want the cool clean look of the new YUI Button component, but without all the seedy overhead of split buttons or button groups or components that shouldn’t even be pigeonholed into a button component to begin with? Keep in mind that this approach only works for the method called “Using pre-defined Button Control HTML.”

Well, here’s the trick to do it.

Create the button as the YUI Button Examples and Documentation say to do so. Include the Button CSS file button/assets/button.css. But just don’t include the YUI JavaScript file button-beta[-min].js.

Instead, use the following JavaScript to replace the functions for button coloring for hover, focus, and active.

YAHOO.util.Event.addListener( window, 'load', function( e )
{
	var yuiButtons = YAHOO.util.Dom.getElementsByClassName( 'yuibutton', 'span' );
	YAHOO.util.Event.addListener( yuiButtons, 'mouseover', function( e )
	{
		YAHOO.util.Dom.addClass( this, 'hover' );
	} );
	YAHOO.util.Event.addListener( yuiButtons, 'mouseout', function( e )
	{
		YAHOO.util.Dom.removeClass( this, 'hover' );
	} );
	YAHOO.util.Event.addListener( yuiButtons, 'mousedown', function( e )
	{
		YAHOO.util.Dom.addClass( this, 'active' );
	} );
	YAHOO.util.Event.addListener( yuiButtons, 'mouseup', function( e )
	{
		YAHOO.util.Dom.removeClass( this, 'active' );
	} );
	YAHOO.util.Event.addListener( yuiButtons, 'focus', function( e )
	{
		YAHOO.util.Dom.addClass( this, 'focus' );
	} );
	YAHOO.util.Event.addListener( yuiButtons, 'blur', function( e )
	{
		YAHOO.util.Dom.removeClass( this, 'focus' );
	} );
} );

If you’re just using the standard buttons anyway, you’re going to see a speed improvement in performance on hover color changes.

This entry was posted in JavaScript and tagged , . Bookmark the permalink. Both comments and trackbacks are currently closed.
  • If you found this article useful, you should subscribe to my feed (or get an e-mail). I'm also on Twitter and GitHub.

  • About the Author

    Zach Leatherman is a Professional Front End Engineer. He loves building for the web, and has been contributing to the community through his blog since February 2007. Despite his propensity for software, he has a Bachelors degree in Computer Engineering and is currently on the User Experience Team at Union Pacific Railroad. The views expressed on this website do not represent the views of his employer.

    He enjoys spending time with his beautiful wife Traci and their two Great Danes, Roxie and Ella. They also have a cat, a rabbit, goldfish, and one or more tarantulas. Read more »