Setting Up jQuery UI
Downloading and installing jQuery UI is more complicated than for other JavaScript libraries. It is not burdensome, but it requires some explanation, which I provide in this chapter. You only need to get set up for development for this book, but I have also included details of how to install the minimized files that are suitable for production deployment and how to use jQuery UI through a content distribution network (CDN).
Note As I explained in Chapter 1, the jQuery UI API changed with the release of version 1.10, and I highlight these changes in the chapters that follow.
Obtaining jQuery UI
There are four main areas of functionality in jQuery UI and you create a custom download that includes and configures each of them. In this part of the book, I show you all the jQuery UI features, but for a real web application you can omit the parts you don’t need and create a smaller library for browsers to download.
Tip jQuery UI isn’t the only UI toolkit that is based on jQuery, although it is by far the most popular. An alternative is jQuery Tools, which is open source and can be downloaded without any license or restrictions from http://flowplayer.org/tools. There are also some commercial alternatives such as jQWidgets (www.jqwidgets.com) and Wijmo (http://wijmo.com). And, of course, there is jQuery Mobile, which I describe in Part 5 of this book.
Deciding on a Theme
Before you build your custom jQuery UI library, you need to select a theme. jQuery UI is endlessly configurable and you can change the appearance of every aspect of every feature that you use. In fact, there are so many choices that it can be somewhat overwhelming. The jQuery UI web site includes a tool for creating custom themes, but there is also a gallery of predefined themes that you can choose to make life easier.
To start, go to http://jqueryui.com and click the Themes button. This loads the ThemeRoller page, which consists of a display of jQuery UI widgets and a panel on the left that lets you configure the theme settings, as shown in Figure 17-1.
Figure 17-1. The jQuery UI web site theme page
Use the Roll Your Own tab (which is selected by default) if you have a certain visual style that you need to follow to make jQuery UI fit in with the rest of a site or application. You can change every aspect of the theme used by jQuery UI.
The predefined themes are available on the Gallery tab. As I write this, 24 themes are available in the gallery and they range from the understated and subtle to the bright and garish. As you click each gallery theme, the widgets in the rest of the page are updated to show you what your application will look like, as shown in Figure 17-2.
Figure 17-2. The gallery showing the Sunny theme
The default theme for jQuery UI is called UI lightness, but it doesn’t have enough contrast to show up well on a book page, so I will be using the Sunny theme, which shows up a little better. You don’t need to do anything with the theme at the moment, other than to remember which one you want to use. The themes don’t look that good when printed, but they have a better appearance on the screen and I recommend you look through the list until you find one you like.
Tip You don’t have to select the same theme that I will be using, but if you pick a different one, you will obviously get results that look different from mine.
Creating the jQuery UI Custom Download
Now that you have a theme in mind, you can create your jQuery UI download. Click the Download button at the top of the page to move to the Build Your Download page.
The first step is to select the version of jQuery UI that you want to download. As I write this, the latest version is 1.10.3 and that is the version I will be using in this book.
In addition to specifying the jQuery UI version, this page has a list of jQuery UI components, broken into four functional groups: UI Core, Interactions, Widgets, and Effects.
By selecting only the features that you require for a project, you can create a set of smaller files for the browser to download. I think this a nice idea, but it is something that I tend not to use as I prefer to reduce the bandwidth required to deliver jQuery UI by using a CDN, which I show you how to do in the section “Using jQuery UI via a Content Distribution Network.”
For this chapter, you will need all of the components, so make sure that all four options are checked.
Tip Some of the components in the list depend on others, but you don’t have to worry about this when you build a custom jQuery UI library. When you enable a component, any other component it depends on is also loaded.
The next step is to select the theme you want. The selector for this is at the bottom of the page, just above the Download button, as shown in Figure 17-3.
Figure 17-3. Selecting the theme
Once you have selected all of the components, the theme you want, and the stable version, click the Download button to download the customized jQuery UI library.
Installing jQuery UI for Development
The jQuery UI download is a zip file that contains all the files that you need for development and production. For this book, you will use the development files that include the unminified source code. This makes it easy to look into the internals of jQuery UI if you have a problem. You need to copy the following into the folder that contains your example files:
- The jsjquery-ui-1.10.3.custom.js file
- The themessunnyjquery-ui-1.10.3.custom.css file
- The themessunnyimages folder
You will notice that there are JavaScript and Cascading Style Sheets (CSS) files for individual components and features in the ui and themes folders. You don’t need to use them, but they can be helpful if you need to work with only a limited set of jQuery UI features.
Tip The name of the JavaScript and CSS files include the version number of the release that was downloaded. For me, this is version 1.10.3. jQuery UI is actively developed and you may have downloaded a later release. If so, you’ll need to change the references to the jQuery UI files in the HTML examples.
Adding jQuery UI to an HTML Document
All that remains is to add jQuery UI to an example HTML document, which is done through script and link elements that refer to the JavaScript and CSS files that I listed in the previous section, as shown in Listing 17-1.
Listing 17-1. Adding jQuery UI to an HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-2.0.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.16.custom.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.16.custom.css"/>
<script type="text/javascript">
$(document).ready(function() {
$("a").button();
});
</script>
</head>
<body>
<a href="http://apress.com">VisitApress</a>
</body>
</html>
Tip You don’t need to refer directly to the images directory. As long as the images directory and the CSS file are in the same place, jQuery UI will be able to find the resources it needs.
Tip jQuery UI depends on jQuery. You must have added jQuery to a document in order to use jQuery UI.
The document shown in the listing includes a simple test that allows you to check that jQuery UI has been added properly. If you view this in the browser, you should see a button like the one in Figure 17-4. Don’t worry about the call to the button method in the script element in the listing. I’ll explain what this does and how it works in Chapter 18.
Figure 17-4. Checking that jQuery UI has been added to the document correctly
If you have not properly specified the path to either of the two files, then you will see a simple a element instead, as illustrated by Figure 17-5.
Figure 17-5. Identifying a problem importing jQuery UI into a document
Installing jQuery UI for Production
When you have finished developing your web application and are ready to deploy it, you can use the minified file that is included in the jQuery UI download. This file is smaller but harder to read for debugging purposes. To use the production files, you must copy the following into your web server directory:
- The jsjquery-ui-1.10.3.custom.min.js file
- The themessunnyjquery-ui-1.10.3.custom.css file
- The themessunnyimages folder
The images directory and CSS file are the same as for the development version; only the JavaScript file changes.
Using jQuery UI via a Content Distribution Network
I touched upon using a CDN for jQuery in Chapter 5. If this is an approach that appeals to you, you will be pleased to learn that you can do the same with jQuery UI. Both Google and Microsoft host the jQuery UI files on their CDNs. For this example, I’ll use the Microsoft service, because it hosts the standard themes as well as the jQuery UI JavaScript.
To use a CDN, you just need the URLs to the files you want. For the Microsoft service, go to www.asp.net/ajaxlibrary/cdn.ashx to get started. If you scroll down the page, you will see a section for jQuery UI releases, broken down by version. Click the link for the version you are using. You will see the URLs for the regular and minimized version of the jQuery UI library file. For the version that is current as I write this, the URL for the minimized file is as follows:
The rest of the page shows each of the predefined jQuery UI themes, with the URL for the theme CSS shown underneath. The URL for the Sunny theme is as follows:
To use these files on the CDN, you simply place the URLs in the script and link elements that refer to the local jQuery UI files, as shown in Listing 17-2.
Listing 17-2. Using jQuery UI via a CDN
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-2.0.2.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"
type="text/javascript"></script>
<link
href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css"
rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script type="text/javascript">
$(document).ready(function () {
$("a").button();
});
</script>
</head>
<body>
<a href="http://apress.com">VisitApress</a>
</body>
</html>
Once again, you can tell whether you have the correct URLs by loading the document and seeing whether the browser displays a button similar to the one in Figure 17-4.
Summary
In this chapter, I showed you the steps required to create and prepare a jQuery UI download. There is a lot of flexibility in the features you include and the default appearance jQuery UI imparts on your web application. I particularly like the ThemeRoller application. It is an elegant way of creating a completely customized theme to fit into an existing visual scheme, which is ideal for adding jQuery UI to corporate-branded sites. In the next chapter, you’ll start to look at the different jQuery UI features, starting with the most popular functional area: widgets.