Extreme ASP.NET Makeover: jQuery - Improving User Interaction

Improving User Interaction

Imagine the following scenario: With the assistance of the CSS Refactoring Helper, we have created an aesthetically pleasing XHTML/CSS-based site. We have spent days—nay, weeks—toiling away to get the site layout and images just right. We’re working on an edit page and we want to warn the user if they try to navigate away without saving their changes. So we display a confirm dialog, using the JavaScript confirm(message) function and we’re presented with the dialog box shown below.

How unsightly! Unfortunately, there is no way to style the appearance of the JavaScript confirm dialog. (A JavaScript alert and prompt dialogs are equally impossible to style and just as ugly.) Another option is to use a popup window, but you have little to no control over the window chrome (or titlebar/border.) On the plus side, you can style the contents of the popup window using XHTML/CSS. On the downside, many users have a popup blocker enabled, which limits their utility.

So, how can we display a confirmation dialog that is aesthetically pleasing and integrates with the overall look and feel of our site? One way is to use the Dialog widget from jQuery UI. jQuery UI is a collection of user interface components built on top of jQuery. jQuery UI is available in a variety of themes and consists of a CSS file, a JavaScript file, and a set of images. It includes a variety of interactions (e.g., draggable, resizable), widgets (e.g., dialog, tabs, datepicker), and effects(e.g., bounce, highlight, shake).

Other videos from this article

· Improving User Interaction

· jQuery UI In ScrewTurn Wiki

· Re-Theming ScrewTurn Wiki

· jQuery UI Themes in ScrewTurn Wiki

· Applying ThemeRoller to ScrewTurn Wiki

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd898316.aspx