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

jQuery Theme Switcher Reset Plugin

User Experience!  That's what bring 'um back.  Remember the first time you saw AJAX in action?  Maybe it was via your GMail or Hotmail account.  Whatever it was, you kept coming back to it.  Why?  Because it was cool; maybe because it was something that you've never seen before; or, maybe it was your fascination with 'How'd they do that?'  Bottom Line: User Experience!

Okay, I'll admit it - I'm not a designer!  I try, and I typically come up with some good solutions; however, it takes quite awhile.  Looking back at all the time I've spent making the UI look pretty, I could have added all that 'cool' functionality that the client wanted.

Finding patterns that are tried and trued, well known, relatively easy to implement, predicable, and reusable is a developers dream.  Unlike software development, I don't believe (well, I don't know...) that there a set of pervasive UI design patterns that all designers could pull out of their toolbox and share with other designers.  I'll spare you the details, but when a developer chats with another developer common design patterns are used to communicate the intent, architecture, design, and implementation of a software component - Singleton, Repository, Decorator, etc...

So, where am I going with this...?  User Experience!

Back to the 'cool' factor of AJAX, what else might bring back a user?  What's that?  A nice decision?  Easy to use interface?  Maybe, a UI customization feature where the user can select the way the UI is styled?  That's where I'm going with this...

Windows has (as far back as Windows 95 - probably farther) a function for a user to select various themes and background to change their Windows experience.  iGoogle, Windows Live, and Yahoo all have theming support.  Visual Studio even has theme support.

jQuery UI ThemeRoller is nothing new.  ThemeRoller gives you the ability to create common component themes, download the themes, and easily integrate the themes with you application/Web site.  Again, this is nothing new.  There is also a pluging for Firefox.  A sister jQuery project is the Theme Switcher widget.  The ThemeSwitcher widget gives the developer the opportunity to integrate theme switching functionality into their Web site to enhance the Use Experience - there's that phrase again...  The Theme Switcher is not as well known as the ThemeRoller, but it's nothing new either.

What the Theme Switcher lacks is a way to integrated a custom theme that you designed and downloaded from the ThemeRoller tool.  I've created a simple jQuery Theme Switcher proxy plugin that will integrate the Theme Switcher and all the outstanding jQuery UI themes with your default theme.

Rather than bore you with the implementation details, you can view a demonstration here: Theme Switcher Reset Proxy  Here's a screenshot:

You can download the code via View Source.
Thanks for reading...