jQuery.Buttonify plugin

For the project I’m working on at the moment, we needed a lot of buttons with different texts.
Initially each button was created as an image by the designer, multiple images where generated to manage different statuses (mouse over, button disabled, etc).

When you have 15 buttons in a project, it means managing 15*3 potential different images and requests to the server.

Looking at Best Practices for Speeding Up Your Web Site this clearly didn’t worked.

What I came out with is a jquery plugin that uses a little bit of javascript and a little bit of js, that allows you to have as many buttons as you want with a minimal overhead.

If you want to add a new button style, the only thing you need to do is to add a new set of css classes

.buttonify.newstyle,
a.buttonify.newstyle,
a.buttonify.newstyle:link,
a.buttonify.newstyle:visited
{
background:url(“/Scripts/buttonifier/css/images/bg_button_a_newstyle.gif”) no-repeat scroll right top transparent;
span
{
background:url(“Scripts/buttonifier/css/images/bg_button_span_newstyle.gif”) no-repeat scroll 0 0 transparent;
}
}

and you can use it in your page

have a look at the the example here

http://smnbss.github.com/jQuery.Buttonify/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s