Monthly Archives: October 2011

jQuery CDN Boilerplate Starter Templates

*** Template files with pointers to all 25 themes are linked below! ***

I use jMicrosoft_CDN_tab1Query for a handful of small projects.  I do a lot of proofs of concept, and I like to start with a fresh HTML file for each experiment.  I found myself both recreating boilerplate HTML files with the appropriate header imports ad nauseum and littering my hard drive with countless versions of the jQuery libraries.

I decided to wise up and just build an HTML file that has the bare basic jQuery and jQuery UI imports, including themes.  And so that I don’t have to litter my own hard drive with the files, I opted for the CDN route.

There are 3 well-known CDNs that serve up the jQuery libraries, and they are documented at these links: jQuery CDN, Google CDN, Microsoft CDN.

I created a separate HTML template for use with each CDN.  3 out 4 of the templates I created are specifically for the latest stable versions of jQuery on the date of this article, which are jQuery v1.6.4 and jQuery UI v1.8.16.  The 4th utilizes a trick to serve the latest stable version without hard-coding a version number, as described below.

In addition to the javascript files, each CDN also hosts the full set of out-of-the-box jQuery UI themes (e.g. Cupertino, Excite-Bike, Humanity, etc).  The template files linked below contain pointers to ALL 25 jQuery standard themes, but all are commented out except my chosen default theme: Excite-Bike.  The point of including commented out pointers is that since the <link> tags to the other themes are already included, it’s easy to substitute another standard theme by commenting out one and uncommenting another.

Something unique about Google’s CDN is that it can serve up both a specific version of jQuery/jQuery UI, as shown here:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

Or, using an undocumented (?) feature, dynamically serve up the latest stable versions of those files by replacing the version-specific portion of the URL (“/1.6.4/” and “/1.8.16/” above) with “/1/”, like so:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>

As far as I can tell, the Microsoft CDN provides no capability to pull the latest version without hard-coding the latest version number.  The jQuery CDN does allow you to pull the latest jQuery version, but I could not find a way to get the latest jQuery UI version without hard-coding the version into the script “src” URL.  The latest stable jQuery library on jQuery’s CDN can be linked into your HTML as shown here:


<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

I don’t suggest using any links to the “latest” versions in a production application since features could become unsupported or inconsistent from one version to the next. Using the latest is, however, a very convenient way to stay on the bleeding edge in your experimental work without having to change any of your boilerplate HTML.

The configured HTML files I created are linked below.  I suggest you right-click on these links and “Save As…” to your hard drive for your own use.

The comments within the source should make it clear where you can edit/remove content from the skeleton HTML.