Se puede acceder a una serie de bibliotecas de terceros utilizando el API de Google en. Todas estas bibliotecas utilizan un dominio común, http://ajax.googleapis.com, lo que hace que sea mucho más fácil de configurar aplicaciones para que los usuarios permiten un mínimo de acceso al sitio a su sistema. En este caso, el usuario sólo tiene que permitir que un dominio en lugar de varios. Por supuesto, es agradable ver cómo funciona este proceso en la práctica, por lo que este ejemplo muestra cómo mezclar jQuery, jQuery UI y MooTools utilizando el enfoque de la API de Google. Usted obtiene los beneficios de las tres bibliotecas, utilizando un único dominio.

En este caso, el ejemplo se utiliza jQuery para realizar tareas tales como la selección de objetos de la página, la creación de efectos especiales, y el seguimiento de los acontecimientos. jQuery UI realiza ninguna salida de interfaz de usuario requerido. MooTools ofrece acceso a la funcionalidad de matemáticas no se encuentra en jQuery o jQuery UI. En este caso, se trabaja con un generador de números aleatorios que es más fácil de usar que la contraparte javascript.

Uno de los artículos que falta en la página de documentación de la API de Google es la ubicación de los temas de jQuery UI. Es necesario incluir un vínculo temático con el fin de crear la apariencia correcta de las características de jQuery UI. El tema por defecto no se encuentra alojado en la API de Google. Afortunadamente, los temas de ThemeRoller están alojados, pero no documentados. Aquí están las direcciones URL que usted necesita para utilizar los temas ThemeRoller:

• lazo negro

• Blitzer

• cupertino

• dark-colmena

• punto-luv

• Berenjena

• excitar-bike

• película

• hot-chivatos

• humanidad

• le-rana

• menta-choc

• nublado

• molinillo de pimienta

• Redmond

• suavidad

• al sur de la calle

• Empezar

• soleado

• elegante monedero

• trontastic

• ui-oscuridad

• ui-ligereza

• vader

Este ejemplo comienza con una página HTML5 en blanco (que comienza con una Directiva). Con el fin de tener acceso a las API necesarias, es necesario agregar algunos enlaces. Tres enlaces apuntan a jQuery, jQuery UI y MooTools. El cuarto vínculo es a la hoja de estilo jQuery UI. El ejemplo utiliza la soleado estilo, pero usted puede cambiar eso a cualquier estilo que desee. Aquí está el código es necesario agregar para los enlaces (nota, cada URL debería aparecer en una línea).

La parte HTML del ejemplo es bastante sencillo. Se compone de una cabecera, un párrafo, un botón, y unos pocos

elementos como se muestra.

Uso de varios Bibliotecas Juntos
Generar un número aleatorio entre 1 y 100
0

El SampleNumber

contiene el número que es generado por el generador de números aleatorios. Este valor se coloca en un recipiente

, Salida, para crear un cuadro de formato agradable en la salida. El botón ofrece los medios para cambiar el número aleatorio utilizando código javascript proporcionado por una combinación de jQuery, jQuery UI y MooTools.

El ejemplo también requiere un poco de información de estilo para crear una caja de salida con un formato agradable y el punto de partida para el ejemplo. El siguiente estilo es todo lo que necesita.

En este punto, usted está listo para añadir un poco de código. El guión de este ejemplo muestra cómo utilizar las distintas bibliotecas juntos. Usted probablemente crea una página más complicado para fines de producción.

El ejemplo comienza por cambiar el botón HTML en un widget de botón jQuery UI que se puede manipular de varias maneras. Las dos tareas que el ejemplo realiza son para formatear el botón para trabajar con el estilo jQuery interfaz de usuario y para proporcionar un medio de capturar haga clic en () eventos.

La primera tarea de la secuencia de comandos debe realizar es crear un número aleatorio. Se podría realizar esta tarea utilizando javascript, pero la técnica MooTools se muestra en el ejemplo es mucho más fácil. La llamada a Number.random () coloca un valor entre 1 y 100 en RandNum. Ahora que tiene un número al azar, el código coloca en el SampleNumber

llamando al método html () con el valor de RandNum.

En este punto, se podría decir que el ejemplo se ha completado. Sin embargo, el ejemplo va un paso más allá. Determina el rango numérico de RandNum y utiliza la interfaz de usuario jQuery animar () efecto de modificar el color de la salida en la pantalla.