http://encosia.com/2009/10/11/do-you-know-about-this-undocumented-google-cdn-feature/
My <head> is in the cloud
While poking around a couple months ago, I stumbled upon something that I’ve found extremely useful: An entire jQuery UI theme hosted on Google’s CDN!
Not only is the theme’s CSS stylesheet there, but all 14 of the theme’s images are hosted in the correct relative location too. That means you can apply the entire theme to a page with a single CSS reference and no local files.
Even better, while JavaScript and CSS includes are unable to take full advantage of the increased parallelism a CDN offers, the theme’s images do. This makes loading the theme from Google’s CDN particularly effective.
Using it
Using this on your own pages couldn’t be easier. There are no files to download, no paths to worry about, and no configuration is required. Just a reference to jQuery,jQuery UI, and the ThemeRoller theme you want to use will is all you need.
For example, if you wanted to build a quick demo of the jQuery UI Tabs plugin, use these references in the head of your page:
<!DOCTYPE html>
<html>
<head>
<!-- To avoid horizontal scrolling in this code listing. -->
<base href="http://ajax.googleapis.com/" /> <!-- Reference the theme's stylesheet on the Google CDN -->
<link href="/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"
type="text/css" rel="Stylesheet" /> <!-- Reference jQuery and jQuery UI from the CDN. Remember
that the order of these two elements is important -->
<script src="/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <!-- Initialize the tabs when the document is ready -->
<script type="text/javascript">
$(document).ready(function() {
// See the jQuery UI Tabs documentation for
// more information about how this works.
$('#tabs').tabs();
});
</script>
</head>
Note: You shouldn’t use the <base> tag like this in your pages. It affects all links on the page, not just those in the <head>. I’m just using it here to avoid horizontal scrolling (the bane of my existence when posting code here).
Then, just a bit of corresponding markup in the body of the document (see the jQuery UI Tabs documentation for specifics):
<body>
<div id="tabs">
<ul>
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
</ul> <div id="tab-1">
<p>These tabs were created with JavaScript, CSS, and
images hosted on Google's AJAX APIs CDN.</p> <p>Thanks, Google!</p>
</div>
<div id="tab-2">
<!-- Tab 2's content goes here. -->
</div>
<div id="tab-3">
<!-- Tab 3's content goes here. -->
</div>
</div>
</body>
</html>
That HTML (without a single file or image hosted locally) results in this:
Don’t like the theme in my example? Don’t worry, because all 24 of the standard ThemeRoller presets are also hosted on the CDN. See the end of this post for a full listing.
留言列表
