Themes for JQuery User Interface

Intro

For my own reference, when i style web pages using ui widgets from JQuery, it is often possible to include a nice link to a content data network – that’s Google, to you and me – and avoid downloading each and every version of jquery as it gets updated, changing the html code and a bunch of other stuff. And because of browser caching, once the theme is in the browser’s cache, it rarely needs to be read again.

So we can point our web page to an online resource for the latest versions of tools we commonly use to construct websites.

We can do the same with the different look-and-feel themes of our jquery user interface elements.

Themes

They are listed on the jQueryUI blog and updated with every release. Both Google and Microsoft provide CDN hosting for the library and themes.

In general, the URL of each theme CSS file is:

 // Google http://ajax.googleapis.com/ajax/libs/jqueryui/[UI.VERSION]/themes/[THEME-NAME]/jquery-ui.css // Microsoft http://ajax.aspnetcdn.com/ajax/jquery.ui/[UI.VERSION]/themes/[THEME-NAME]/jquery-ui.css 

Current Themes

I have listed the current (UI version 1.8.21) themes below:

Apple Overload
Apple Overload

Theme Switching, JQuery Style

As a temporary measure, uploaded this theme switching sample to http://gaelykproject.appspot.com/auto2.html which is some testing i’m doing on the jquery autocomplete feature. Click the theme switcher dropdown to choose from several themes offered by the JQuery team.

There is also a really cool tool from the JQuery UI stable that allows us to offer improved user experiences. How so ? A theme switcher tool is available here http://docs.jquery.com/UI/Theming/ThemeSwitcher and the same works out quite nicely. Set up your favorite JQ widget like autocomplete box of accordions, then include the CSS and javascript logic from this JQ site.

JQuery Theme Switching Tool In Action
JQuery Theme Switching Tool In Action

Since i’m bloggin on wordpress.com and it does not allow me to include actual examples, here are some screen pix i made earlier 🙂

Screen Showing JQuery Theme Switcher Tool
Screen Showing JQuery Theme Switcher Tool

When the user of your web page clicks this button, a dropdown panel opens. It shows all the themes currently available. Scroll up and down until you find a theme that is nice, then click on that theme and all jquery ui widgets on the page will magically assume the chosen theme.

If i click on the DARKNESS theme, then Voilà we have a different look-and-feel, Neo !

DARKNESS Theme Chosen For JQuery UI Widgets
DARKNESS Theme Chosen For JQuery UI Widgets

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s