Using the jQuery UI library with Google’s CDN

Published by | Monday, February 27th, 2012

The jQuery library gets a lot of coverage online at lynda.com. It’s a great way to build cross-platform interactivity into your websites with a minimum amount of effort. But you might not be familiar with its cousin, the jQuery UI library, which allows you to add tough-to-code widgets to your websites with just a few lines of code.

The JQuery UI  library screenshot

There are widgets in the jQuery UI library for all kinds of useful functionalities like drag and drop, buttons, dialogs, and progress bars. In fact, The jQuery UI library is so big it’s not even included in the normal jQuery library, and it comes as part of a separate download. In this week’s View Source tutorial, I will take a peek into the jQuery UI library to show you how to create a Datepicker you can use on your online projects.

Using the library is pretty simple. Let’s say you have this basic form:

1
2
3
<form action="#">
	<label>When <input id="datepicker" type="text" name="date" /></label>
</form>

First, you’ll need a copy of both the jQuery library and the jQuery UI library. If you don’t have the libraries already, Google and others keep copies of popular libraries online, so you can use a copy from Google’s CDN (Content Delivery Network). When you use a popular CDN like Google’s, it means that if someone visits a different site that uses the same library before coming to your page, it will be cached by your browser and available quicker to your users, which makes your page operate faster. Here’s two lines that will load up the libraries via Google’s CDN.

1
2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>

This usually goes in the <head> section of your HTML page. In WordPress, you can update the header.php template by going to your dashboard, finding the Appearance panel, and then selecting the Editor option.

Next, you’ll need to pick a style for the calendar pop-up. You can do this yourself by using the jQuery UI ThemeRoller, or by using jQuery UI’s library of predefined styles. Just go to the ThemeRoller page and choose the tab labeled Gallery.

Example of pre-built ThemeRoller jQuery themes

Once you pick the theme you want, you can download the theme to your desktop and install it, or you can simply link to Google’s copy of one of the themes from the Google CDN. Here’s the formula:

1
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/[JQueryUIVersion]/themes/[ThemeName]/jquery-ui.css" />

So in our case, since we’re working with version 1.8.17 of the UI, and the pepper-grinder theme, so we’ll use:

1
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/pepper-grinder/jquery-ui.css" />

The names of the other theme options are: base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, and vader.

Now that our setup is done, all we need to do is type in our jQuery code that links the form field to the widget. You should put this before the closing </body> tag in your document. In WordPress, that would be in your footer.php file.

1
2
3
4
5
<script>
$(function() {
	$( "#datepicker" ).datepicker({ });
});
</script>

The jQuery code looks for a form element with the ID of Datepicker and adds the functionality to that field. Here’s a full listing of the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>DatePicker Sample</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/pepper-grinder/jquery-ui.css" />
</head>
<body>
<form action="#">
	<label>
		When
		<input id="datepicker" type="text" name="date" />
	</label>
</form>
<script>
	$(function() {
		$( "#datepicker" ).datepicker({ });
	});
</script>
</body>
</html>

There are a lot of other options you can use, and when working offline you should definitely include a call to a local copy of the libraries. To find out how to do this and more, check out this week’s free View Source tutorial called Creating a Datepicker for your forms with jQuery on lynda.com. If you’re a lynda.com member and want to learn more about how to speed up your site with content delivery networks (CDNs), check out the member-exclusive video called Using a CDN to speed up your website.

 

Interested in more?
• The full View Source series
• All developer courses on lynda.com
• All web + interactive courses on lynda.com
• All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:
Create an Interactive Video Gallery with jQuery
Create an Online Photo Gallery with jQuery and Dreamweaver
Create an Interactive Map with jQuery and Dreamweaver
jQuery Essential Training
Set a Marquee to Autoplay with jQuery and Dreamweaver

Share this:Share on Facebook0Tweet about this on Twitter3Share on Google+6Pin on Pinterest0Share on LinkedIn2

lynda.com - start learning today

Tags: , , , ,


Leave a Reply