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 UI Buttons using Custom Icons

Demo | Source

Everything jQuery rocks!

jQuery makes JavaScript development enjoyable.  jQuery UI gives us common functional components that are easy to configure and even easier to plug into our applications.  jQuery UI Themes gives us the ability to stylize our applications using easy to learn conventions; furthermore, jQuery UI trivializes theme switching.

So why do we need to customized our jQuery button icons?  The truth is is that we probably don't; however, I tend to find myself wanting more when it comes to out-of-the-box jQuery icons.

Awhile back, I created a project on CodePlex for ASP.NET Web Forms called Iconized Control Set.  You can read about it here, download the bits here, and demo it here.  The following is the description from CodePlex: "ASP.NET WebForms IconizedButton Custom Control Set. Replaces the dull Button/LinkButton/HyperLink controls with styling and left and right aligned icons (via FamFamFam icon set). Contains built-in control styles/skins. Available customized user-configured styles/skins via CSS."

I wanted something similar to my Iconized Control Set, yet I wanted to use it for raw HTML and possibly for ASP.NET MVC.  While I plan on creating an MVC HTML Helper to abstract the details, I'm not quite ready to go down that road; however, the code here will help me create the MVC HTML Helper in due time.

While I consider this a proof-of-concept, I've tested the output in FireFox, Chrome, and IE 8 and it appears to working just fine.

In building the custom icon functionality for the jQuery Button, I once again relied on the excellent FamFamFam icon set.  The FamFamFam icon set is not a requirement to use this customization implementation; however, I find that the FamFamFam icon set gives me what I need and then some.  That said, you can certainly create your own classes and use any icons that you desire.

Okay, enough background and introduction stuff....  On to the demo...

Take a look at the demo here.

Beyond the standard jQuery imports and configuration, you will need the resources located in the code download here.  Once you have you jQuery import and configuration set up, you will need to add the following two CSS imports to your page:

<link type="text/css" href="assets/css/fff.icon.core.css" rel="stylesheet"/>
<link type="text/css" href="assets/css/fff.icon.icons.css" rel="stylesheet"/>

Once you have that, all you need to do is pass your custom icon class to the button widget function in the standard jQuery button widget implementation:

$(function(){            
    $(".nav a").button({icons: {primary: "fff-icon-house-go"}});                  
});

Note.  The demo and download both have all the custom CSS classes in one file.  While this makes a demo like this easy, this file is big and is not recommended in production.  Extract the icon classes that your application uses and put those classes into one of your application stylesheets.

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

Themed & Ajaxified MVCContrib Grid - with page size dropdown

Demo | Source

MVCContrib Grid.

Okay, that's a little biased; however, within a couple of hours of toying around with the MVCContrib Grid, I was sold.  I won't go into all the functionality provided by the grid - you can read about it here, read a more detailed writeup on Jeremy Skinner's blog here, and there's a nice writeup on the use of the grid here. What I really like about the MVCContrib Grid is the fluent code design and GridModels.  These two items are reviewed  on the MVCContrib Grid page and Jeremy's posts.

I'm kind of a demanding guy that is rarely satisfied.  And while the MVCContrib Grid is sweet, I still wanted more.  What are my demands?  I use 'demands' lightly, but many people I know would disagree... I digress.  Here they are:

• Themeable via jQuery UI Themes
• AJAX enabled
• Page Size enabled,
• Easy to use, and
• Easy to apply to an existing MVCContrib Grid implementation.

The AJAX purests out there will disagree with my implementation of the AJAX functionality.  I call my implementation 'poor man's AJAX.'  I make the request and pass back markup.  Why?  Referring back to my list of 'demands'... the last two bullets are very important.  I don't want fellow developers to have to learn something new - Microsoft .NET related technologies are moving at a rapid pace - there's already enough to learn - I'm writing this post on a Saturday - go away... ;-)  I want the developers to make maybe a handful of simple changes to existing code and bam - it's done.

My implementation includes three parts:

1. C# Class Library.  A class that overrides the HtmlTableGridRenderer (HtmlTableGridThemedRenderer), a class that defines a new Pager called PagerThemed, and a couple new HTML Helper extensions.
2. A jQuery Plugin - mvccontribGrid.  This plugin handles the AJAX requests and some grid stylization. This plugin works like any jQuery plugin.  You pass a selector and a few options and the grid's good-to-go.
3. CSS.  Simple CSS classes that provide the grid-specific styles.

In order to use the grid, you will also need jQuery and a jQuery Theme.

A little word on design.  I originally put all the CSS classes and selectors markup in the C# code; however, those markup features started to weigh down the AJAX response, so I moved CSS classes and selector additions to the plugin.  The HtmlTableGridThemedRenderer has a method called LighenUp.  This method sets an internal field that will either reduce (or not) the aforementioned CSS classes and selectors on the server-side.  The default it true - meaning the CSS classes and selectors will be rendered via the jQuery plugin - client-side.

The only part of my implementation that 'smells' a bit it the requirement to have a View and a PartialView that serve almost the same function.  Why does it smell?  It violates DRY.  However, I couldn't figure out another way to make it work without redesigning the grid control - that was not an option - I've got client work to attend to folks... :-)

Mentioning DRY, rather than cut and paste from the client (the MVC app) implementation and put it in this post, you can download the whole source code (with demo code) here.  The demo code is easy to follow.  Plus, I don't expend anyone to even read this post unless they have some developer knowledge and can easily figure out the simple logic.  Note that the source code includes a bunch of GAC assemblies copied as local references.  Since I designed the code using and for Razor (MVC 3), the GAC assemblies copied as local references was required for me to push the demo to my host - original development was MVC 3 RC2.  You can simply remove the local assemblies and replace with you GAC assemblies.

Oh yeah, almost forgot - take a look at the demo here and play around with it.  Notice that the demo include the jQuery themeroller, so you can place around with the various themes available from jQuery UI.

Thanks for reading...

References:

• Demo
• Source
• MVCContrib Project
• MVCContrib Grid
• Jeremy Skinner's Blog
• jQuery
• jQuery UI

Demo | Source