Using The JQuery UI – Part 1

Although I have used some of the JQuery UI widgets in the past, I really began to explore the JQuery UI in a recent project. One of the reasons that I like using the UI widgets is that I can standardize on a set of components (plugins) that have a consistent look and feel as well as a consistent coding standard.

Before you can use the UI dialog, you first need to download the JQuery UI. The JQuery team built the UI modularly so you can customize your download with the specific module(s) you need for you application. For instance, if I only want to use the UI dialog, then I build a download that contains:

ui.core.js //a required dependency for all ui interactions and widgets
ui.dialog.js

If I want the UI dialog to be draggable, resizeable, and have have a bounce affect and contain the UI datepicker widget, then my download will contain:

ui.core.js //a required dependency for all ui interactions and widgets
ui.dialog.js
ui.datepicker.js
ui.draggable.js
ui.resizable.js
effects.core.js
effects.bounce.js

One of the advantages of this modular approach is that your application can be as lightweight as possible – you don’t have to download what you don’t need.

When you customize and build your download, the individual files will be bundled together into one larger file:

jquery-ui-1.7.2.custom.min.js

This file contains the ui.core and any dependent files.

A range of current and historical JQuery and jQuery UI releases are also hosted on Google’s CDN so you have the option of just referencing Google’s CDN versions in your application:

< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">< /script >
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">< /script >

Note: In order to use JQuery UI, you also need to load JQuery Javascript Library.

JQuery UI Themes

Creating themes for a JQuery application is probably one of the more powerful aspects of using the JQuery UI. To have consistent look and feel for all the components (plugins) in an application decreases the amount of tweaking (and designing) one has to do. You have the option of selecting one of the many existing themes or design a custom theme.

Use JQuery’s ThemeRoller, to design a custom theme. You can start from scratch, but I usually select an existing theme from the “Gallery” tab and then modify it on the “Roll Your Own” tab.

On the “Roll Your Own” tab, you have the option of changing the Font Settings, Corner Radius, Content colors and much more.

For instance, to change the Content background color of all the UI widgets, I select the Content options and click on the background color edit:

I can also change the Content background’s texture:

Once I have made all of the changes to my theme, I select “Download Theme” button. Clicking the buttons sends me back to the JQuery UI download page. When I click the download button on this page, not only will I be downloading the selected widgets and dependencies, I will also be downloading all the relevant CSS and image files for my themes.

Once downloaded, I then just reference the files on my web page:

< link rel="stylesheet" href="css/redmond/jquery-ui-1.7.2.custom.css" type="text/css" / >
< script type="text/javascript" src="js/jquery-1.3.2.min.js">
< script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js">< /script >

Note: When you view a JQuery UI widget on your web page, they will appear larger than they appeared in the ThemeRoller. In order for the widgets to display as in the ThemeRoller, you must style the font-size and set it to 62.5%:

body {font-size: 62.5%;)

Adding this style to your website can be annoying if you have already styled your entire site, because it can affect all the styles on the page (or elements on the page where a font-size is not explicitly set). To avoid this conflict, I generally add the font-size style only to the containing div or region of the page where the JQuery UI applications are going to be used:

#mainContent {font-size: 62.5%;}

Using the JQuery UI can save a tremendous amount of time in both designing and developing your application. In Part 2, I will discuss how to use the UI dialog widget. Enjoy.