jQuery UI

Contact Us or call 1-877-932-8228
jQuery UI

jQuery UI & jQuery Mobile

We often extend the core jQuery library with two user-interface libraries: jQuery UI, for desktops, and jQuery, for mobile devices.

We might use jQuery UI, a "curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library," to quickly and easily add autocomplete to an input search box, offer users drag-to-sort functionality in a list of items, or spice up a given page with animations and effects. jQuery Mobile, a "unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery" (and jQuery UI) libraries, provides a consistent, simple framework by which we can make our sites work well on phones and other mobile devices.

We will review both of the UI libraries below.

jQuery UI

jQuery UI, a JavaScript library built on top of jQuery and intended for desktop users, provides a set of interactions, effects, widgets, utilities, and themes for use on web pages. We'll take a quick look at each of these categories in turn.

To use jQuery UI, you must link to the library after first linking to the standard jQuery library. As with jQuery, you can link to the jQuery UI library either via a hosted CDN (from Google or jQuery) or by downloading and hosting the library yourself.

Note that jQuery UI is themeable: you can use the stock themes (a pre-designed set of CSS rules that govern how popup menus, buttons, and other elements look in response to user interactions) or build your own themes with jQuery UI's ThemeRoller.

jQuery UI's ThemeRoller gives you a visual tool to set styles for just about any aspect of jQuery UI-produced elements, from header color to rounded-corner radius size to drop shadowing. To use it, visit jqueryui.com/themeroller:

ThemeRoller

Set desired options from the panels at left; you will see the sample content change to reflect your settings. Once you are finished, click the "Download theme" button at upper left, choose the jQuery UI version and modules from the options presented on the next screen, and save the zipped download to your computer. The zipped archive will contain both JavaScript files (jQuery and jQuery UI) and CSS files (reflecting your ThemeRoller style settings), in plain and minified versions.

Next