- Web Design & Development
- How to Access Multiple Libraries from the Google API
How to Access Multiple Libraries from the Google API
You can access a number of third party libraries using the Google API at. All of these libraries use a common domain, http://ajax.googleapis.com, which makes it much easier to set up applications so that users allow a minimum of site access to their system. In this case, the user need only allow one domain instead of several. Of course, it’s nice to see how this process works in practice, so this example shows how to mix jQuery, jQuery UI, and MooTools using the Google API approach. You obtain the benefits of all three libraries, using a single domain.
One of the items that is missing on the documentation page for the Google API is the location of the jQuery UI themes. You need to include a theme link in order to create the correct appearance for the jQuery UI features. The default theme isn’t hosted on the Google API. Fortunately, the themes from ThemeRoller are hosted, but not documented. Here are the URLs you need to use the ThemeRoller themes:
This example begins with a blank HTML5 page (one that begins with a <!DOCTYPE html> directive). In order to gain access to the required APIs, you need to add some links. Three links point to jQuery, jQuery UI, and MooTools. The fourth link is to the jQuery UI style sheet. The example uses the sunny style, but you can change that to any style you want. Here is the code you need to add for the links (note, each URL should appear on one line).
The HTML part of the example is pretty straightforward. It consists of a header, a paragraph, a button, and a few <div> elements as shown here.
<h1>Using Multiple Libraries Together</h1>
<p>Generate a Random Number Between 1 and 100</p>
<div class="Output" >
<div id="SampleNumber" class="Normal">
value="Get a Random Number" />
The example also requires some style information to create a nicely formatted output box and the starting point for the example. The following style is all you need.
At this point, you’re ready to add some code. The script for this example shows how to use the various libraries together. You’d probably create a more complicated page for production purposes.
// Use a jQuery UI button.
// Use MooTools to generate a random
var RandNum = Number.random(1, 100);
// Display the result on screen using
// Create a animation using jQuery UI.
if (RandNum >= 1 && RandNum <= 20)
else if (RandNum >= 21 && RandNum <= 40)
else if (RandNum >= 41 && RandNum <= 60)
else if (RandNum >= 61 && RandNum <= 80)
The example begins by changing the HTML button into a jQuery UI Button widget that you could manipulate in various ways. The two tasks that the example performs are to format the button to work with the jQuery UI style and to provide a means of capturing click() events.
At this point, you could say that the example is complete. However, the example goes a step further. It determines the numeric range of RandNum and uses the jQuery UI animate() effect to modify of the color of the output on screen.