jQuery Input Button Plugin - Iconizes Submit and Reset Buttons

Demo | Source

Last week I wrote a post on jQuery UI Buttons using Custom Icons. As I was testing the functionality, I felt that the jQuery UI Button widget was missing something - the ability to add icons to Submit and Reset buttons. So, I rolled my own plugin.

This plugin enables adding icons to Submit and Result buttons. Behind the scenes, the plugin replaces the Submit and Reset buttons with standard button elements and then delegates the rest to the jQuery UI Button widget.

This plugin can be used just like the jQuery UI Button widget, the only difference is the function that is invoked on the selector.

To use the plugin, you need to reference all the required jQuery UI Button widget resources and add a reference to the jquery.inputButton.js script file (available in the source download).  Then you would replace the jQuery UI Button widget function attached to your selector with the inputButton function.  That's quite a mouthfull, so here's a snippet.

$(function(){   
    // this will not add icons to your buttons - it will only stylize the buttons         
    $("input:submit:first").button({ icons: { primary: "ui-icon-disk"} });
    $("input:reset:first").button({ icons: { primary: "ui-icon-refresh"} });

    // this will add icons and stylize your submit and reset buttons
    $("input:submit:first").inputButton({ icons: { primary: "ui-icon-disk"} });
    $("input:reset:first").inputButton({ icons: { primary: "ui-icon-refresh"} });
});

Other than that, the plugin is identical to that of the jQuery UI Button widget.

A few things to keep in mind:

• This is a proof of concept. I've tested with Chrome, Firefox, and IE 8 and it works as intended and designed.
• Once the inputButton plugin is executed, the Submit and Reset buttons are now Button elements; therefore, all code that manipulates elements filtered on the button element (e.g. $("button")) will include the transformed Submit and Reset buttons.
• If neither a Submit nor a Reset button is passed as the selector, the selector is passed along to the jQuery UI Button widget - meaning the selector is handled just like any other selector by the jQuery UI Button widget.

Okay, that's about it. Thanks for reading..

Demo | Source