Vous pouvez accéder à un certain nombre de librairies tierces utilisant l'API Google à. Toutes ces bibliothèques utilisent un domaine commun, http://ajax.googleapis.com, ce qui rend beaucoup plus facile à mettre en place des applications afin que les utilisateurs permettent un minimum de l'accès au site à leur système. Dans ce cas, l'utilisateur doit seulement permettre un domaine au lieu de plusieurs. Bien sûr, il est agréable de voir comment ce processus fonctionne dans la pratique, de sorte que cet exemple montre comment mélanger jQuery, jQuery UI, et MooTools en utilisant l'approche de Google API. Vous obtenez les avantages de tous les trois bibliothèques, en utilisant un seul domaine.

Dans ce cas, l'exemple utilise jQuery pour effectuer des tâches telles que la sélection des objets de page, création d'effets spéciaux, et la surveillance des événements. jQuery UI effectue toute sortie de l'interface de l'utilisateur. MooTools fournit l'accès aux fonctionnalités de mathématiques ne trouve pas dans jQuery ou jQuery UI. Dans ce cas, vous travaillez avec un générateur de nombre aléatoire qui est plus facile à utiliser que la contrepartie javascript.

Un des points qui manque sur la page de documentation de l'API Google est l'emplacement des thèmes jQuery UI. Vous devez inclure un lien à thème afin de créer l'apparence correcte pour les fonctionnalités jQuery UI. Le thème par défaut est pas hébergé sur l'API Google. Heureusement, les thèmes de ThemeRoller sont hébergés, mais pas documentés. Voici les URL que vous avez besoin d'utiliser les thèmes de ThemeRoller:

• cravate noire

• Blitzer

• Cupertino

• foncé ruche

• dot-luv

• aubergine

• exciter-bike

• chiquenaude

• hot-mouchards

• humanité

• 
  
  
  
  

  le-grenouille

• menthe-chocolat

• couvert

• Moulin à poivre

• redmond

• douceur

• sud-rue

• Démarrer

• ensoleillé

• chic porte-monnaie

• trontastic

• ui-obscurité

• ui-légèreté

• vader

Cet exemple commence par une page HTML5 vierge (celui qui commence avec un directive). Afin d'accéder aux API requis, vous devez ajouter quelques liens. Trois liens pointent vers jQuery, jQuery UI, et MooTools. Le quatrième lien est à la feuille de style jQuery UI. L'exemple utilise la ensoleillé style, mais vous pouvez changer cela à tout style que vous voulez. Voici le code que vous devez ajouter des liens (note, chaque URL doit apparaître sur une seule ligne).

La partie HTML de l'exemple est assez simple. Il se compose d'un en-tête, un paragraphe, un bouton, et quelques

éléments comme montré ici.

Utilisation de bibliothèques multiples Ensemble
Générer un nombre aléatoire entre 1 et 100
0

Le SampleNumber

contient le numéro qui est généré par le générateur de nombres aléatoires. Cette valeur est placée dans un récipient

, Sortie, pour créer une zone bien formaté dans la sortie. Le bouton fournit les moyens pour changer le nombre aléatoire en utilisant le code javascript fourni par une combinaison de jQuery, jQuery UI, et MooTools.

L'exemple requiert également des informations de style pour créer une boîte de sortie bien formaté et le point de départ pour l'exemple. Le style suivant est tout ce que vous avez besoin.

À ce stade, vous êtes prêt à ajouter un peu de code. Le script pour cet exemple montre comment utiliser les diverses bibliothèques ensemble. Vous seriez probablement créer une page plus complexe à des fins de production.

L'exemple commence par changer le bouton HTML dans un widget Button jQuery UI que vous pourriez manipuler de différentes manières. Les deux tâches que les exemple effectue sont de formater le bouton pour travailler avec le style jQuery UI et de fournir un moyen de capture cliquez sur () événements.

La première tâche du script doit effectuer est de créer un nombre aléatoire. Vous pouvez effectuer cette tâche en utilisant javascript, mais la technique MooTools illustré dans l'exemple est beaucoup plus facile. L'appel à la Number.random () place une valeur comprise entre 1 et 100 dans RandNum. Maintenant que vous avez un nombre aléatoire, le code met dans le SampleNumber

en appelant la méthode html () avec la valeur de RandNum.

À ce stade, vous pourriez dire que l'exemple est complète. Cependant, l'exemple va encore plus loin. Il détermine la gamme numérique de RandNum et utilise l'interface utilisateur jQuery animer () effet de modifier la couleur de la sortie à l'écran.