Se puede acceder a una serie de bibliotecas de terceros mediante el API google a. 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 de su sistema. En este caso, el usuario sólo tiene que permitir un dominio en lugar de varios. Por supuesto, es agradable ver cómo este proceso funciona en la práctica, por lo que este ejemplo muestra cómo mezclar jQuery, jQuery UI, y MooTools utilizando el enfoque de API de Google. Se puede obtener los beneficios de las tres bibliotecas, usando un único dominio.

Video: Como crear ruta con varias paradas o destinos en Google Maps. (Android e iOS)

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 eventos. jQuery UI realiza ninguna salida de interfaz de usuario requerida. MooTools proporciona acceso a las funciones 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 elementos que no se encuentra 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 enlace tema con el fin de crear la apariencia correcta de las características de interfaz de usuario jQuery. El tema por defecto no está alojado en la API de Google. Afortunadamente, los temas de ThemeRoller están alojados, pero no documentado. Estas son las direcciones URL que necesita para utilizar los temas ThemeRoller:

• lazo negro

• Blitzer

• oscuro-colmena

  Video: VideoTutorial 1 sobre el uso de la API de Google Maps

• punto-Luv

• berenjena

• excitar-moto

• película

• hot-cuela

• humanidad

• le-rana

  Video: **DEMO** 48.- Desarrollo API's - Login con Google 2:2

• menta-choc

• nublado

• molinillo de pimienta

• Redmond

• suavidad

• Calle Sur

• comienzo

• soleado

• elegante monedero

• trontastic

• ui-oscuridad

• ui-ligereza

• Vader

Este ejemplo comienza con una página HTML 5 en blanco (que comienza con una directiva). Con el fin de tener acceso a las API requeridas, es necesario agregar algunos enlaces. Tres enlaces apuntan a jQuery, jQuery UI, y MooTools. El cuarto enlace es a la hoja de estilo jQuery UI. El ejemplo utiliza el soleado estilo, pero usted puede cambiar eso a cualquier estilo que desee. Aquí está el código es necesario agregar a los vínculos (observar, cada URL debe 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 algunos elementos como se muestra aquí.

El uso de múltiples 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, de salida, para crear un cuadro de formato agradable en la salida. El botón proporciona los medios para cambiar el número aleatorio utilizando el 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 algo de código. El guión de este ejemplo se muestra cómo utilizar las distintas bibliotecas juntos. Probablemente usted crea una página más complicado para fines de producción.

El ejemplo empieza cambiando el botón HTML en un widget de botón jQuery UI que se puede manipular de varias maneras. Las dos tareas que realiza el ejemplo son para formatear el botón para trabajar con el estilo de jQuery UI y para proporcionar un medio de captura hacer clic() eventos.

La primera tarea del script 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 aleatorio, 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.