jquery ui - how to use google CDN

raklos picture raklos · Mar 5, 2011 · Viewed 71.8k times · Source

I want to use Google CDN for jQuery and jQuery UI..

I'm using the answer from here for jQuery. Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail

but i don't understand this bit:

if (typeof jQuery == 'undefined')

so how can i do it for jQuery UI? also, will this work with custom jQuery UI theme as this produces a custom js file too?

Answer

Hussein picture Hussein · Mar 5, 2011

You can make the call using

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

You can also link to other Ui themes by changes the name of the theme. In This case change the name base to any other theme name /base/jquery-ui.css to any other theme.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />

Check out the jQuery UI Blog for a link of all CDN links http://blog.jqueryui.com/

If you're concerned that the Google CDN ever fails or goes down, you can fall back to a local copy when the CDN is offline (this example is baked into templates like HTML5 Boilerplate):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
    window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"></script>')
</script>