Blog
The jQuery User Interface Library: Small but Mighty
Excerpt by Don Kiely | October 11, 2012
One of the major benefits of jQuery is that the core library is quite small, just 83KB for the minified version. Packing so much functionality into such a small package is no mean feat, and one of the primary ways that the jQuery does it is by keeping the library focused on the most important, core features needed to make client-side Web programming with JavaScript as easy and productive as possible.
Over the years since its introduction, there have been many proposals to add great new features to the library, but each idea has been closely scrutinized and included only when it made sense and made the library stronger. A feature that would only be cool wouldn't make the cut. The result of all this dedication to keeping the core jQuery library small and tight has paid off with a versatile library that doesn't impact Web page performance too heavily.
But this has left a lot of great ideas for jQuery features out in the cold, and many have become widely used plugins and other extensions. And although the jQuery library provides plenty of tools for making great Web user interfaces, there are so many other things that you can do with jQuery as the base. So the jQuery UI library was born to bring together many user interface features built on jQuery. The UI library is not part of the core library and is much more than a jQuery plugin. It is an official extension to jQuery developed and supported by the jQuery team.
The jQuery UI library consists of four broad categories of extensions:
- Interactions support ways of letting the user interact with elements on a Web page, including the ability to drag and drop elements, resize them, make them selectable in various ways, and allow the user to sort elements in whatever order they want.
- Widgets (yes, that's what they call them!) are a collection of user interface components, including a date picker, dialog boxes, tabs, and a slider, and more.
- Effects in the UI library go far beyond the animations available in the core jQuery library. You can animate color transitions, class changes (as opposed to just a set of properties you define in the animate method), and 15 effects that go well beyond the fading and sliding in and out supported in the core library.
- Utilities that acts as a grab bag of other features. As of this writing, the only utility available supports element positioning that goes well beyond the positioning features in CSS. Near term additions are planned to support templating and a data model (features that Microsoft is working on), globalization, and others.
The UI library makes heavy use of CSS styles to create themes for the UI features, primarily interactions and widgets, so that they have a consistent look and feel. There are more than 20 standard themes that you can download along with the UI library, which you can tweak to fit the appearance of your Web pages. You can write the CSS code by hand or use the ThemeRoller tool on the jQuery UI Web site to make changes to a theme and download it, ready to drop into your Web site.
NOTE: As you explore the features of jQuery UI, it is easy to get a sense of why Microsoft so easily abandoned development of their Ajax Control Toolkit, built on their Microsoft Ajax Library. Once they decided to switch to jQuery and support it, it became a no-brainer to also embrace jQuery UI, which is far richer than the Ajax Control Toolkit. At this time Microsoft doesn't ship the UI library with any of their tools, but we suspect that will be a logical next step in the evolution of Microsoft's support for jQuery.
Downloading the jQuery UI Library
The jQuery UI Library is huge if you include every feature. It is unlikely that any single Web site project will use them all, so the library is split into many files and you can use whatever you need in a Web page. To help customize the library, the download page of the jQuery UI Web site, shown in the Figure below, lets you build a custom download package with only the elements you need. You can also select a theme as a starting point for customizing it to your needs.
The download page lets you select the elements you need, and makes sure that all dependencies are covered. For example, the Core component in the UI Core section is required for all other components, and you can't uncheck that check box if you have any other components selected. The result is that the custom library you download has everything you need for the features you want. Links at the top of the page let you forego customizations and let you download the entire library or individual themes directly.
TIP: One downside of the jQuery UI download page is that there is no easy way- that we've been able to find, anyway!-to download all of the themes together. You can click the themes link in the Quick Downloads section at the top of the page and download the themes one by one, but that is tedious at best. Or you can go to the jQuery UI blog and go to the post that announced the release of the UI library version you're using. There is usually a link there to a file with all the themes.
Once you download the custom jQuery UI library and unzip it, you'll find an index.html file and three directories.
- The index.html file contains a recap of what you built and a demo page that shows the features of the theme you selected, if any, as shown in the Figure below. Pay attention to the specified version of the jQuery library that this version of the UI library works with.
- The css folder contains the CSS and image files needed for the theme you selected. You can copy the theme folder into your Web site project and use it directly, but make sure you keep the images folder as the child of the folder that contains the .css file. Otherwise, you'll have to change many, many links in the stylesheet to point to the new location of the images.
The js folder contains both the script file for the jQuery UI library as well as the core jQuery library. You can use that version of the core library or, usually, a later version. Usually you'll copy the UI library file, jquery-ui-1.8.9.custom.min.js, to the scripts file in your Web site (the version number on your file may be different). This is a customized version of the script file that includes everything you need for the features you selected.
TIP: The version of the UI library in the js folder is the minified version of the library. During development and as you're learning the library, you may want to use the Quick Downloads link at the top of the download page to get the development version of the component files. These have comments and whitespace to make it easier to read and understand.
- The development-bundle folder contains demos, documentation, licenses, and lots of other resources to explore. As you're learning the UI library, it would be well worth your time to explore what this folder contains.
Once the theme and script files are in your Web site folders, you can proceed to use them like any other CSS and script files, including them in a Web page using link and script elements. These elements will look something like the following, which we took from one of the sample pages in the custom UI library download that used the default ui-lightness theme (and uses an older version of the jQuery library, since version 1.5 had just been released and the download page hadn't yet been updated). Even though the UI library consists of many .css and .js files, the custom download greatly simplified using them by combining them into single files of each type.
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" /><script type="text/javascript"src="js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
Don Kiely
This course excerpt was originally posted October 11, 2012 from the online courseware ASP.NET 4 AJAX and jQuery Using Visual C# by Don Kiely