Você pode acessar uma série de bibliotecas de terceiros usando o Google API a. Todas estas bibliotecas usar um domínio comum, https://ajax.googleapis.com, o que torna muito mais fácil de configurar aplicativos para que os usuários permitir um mínimo de acesso ao site para o seu sistema. Neste caso, o utilizador necessita apenas de permitir que um domínio em vez de vários. Claro, é bom para ver como esse processo funciona na prática, de modo que este exemplo mostra como misturar jQuery, jQuery UI, e MooTools usando a abordagem API do Google. Você obter os benefícios de todas as três bibliotecas, usando um único domínio.

Neste caso, o exemplo usa jQuery para executar tarefas como a seleção de objetos da página, criando efeitos especiais e monitoramento de eventos. jQuery UI executa qualquer saída interface do usuário necessária. MooTools fornece acesso a funcionalidade matemática não encontrado em jQuery ou jQuery UI. Neste caso, você trabalha com um gerador de números aleatórios que é mais fácil de usar do que a contrapartida javascript.

Um dos itens que está faltando na página de documentação para a API do Google é a localização dos temas jQuery UI. Você precisa incluir um link tema, a fim de criar a aparência correta para os recursos jQuery UI. O tema padrão não está hospedado no Google API. Felizmente, os temas de ThemeRoller são hospedados, mas não documentados. Aqui estão as URLs que você precisa para usar os temas ThemeRoller:

• gravata preta

• blitzer

• Cupertino

• dark-hive

• dot-luv

• Berinjela

• excita-bike

• estalido

• hot-espreitadelas

• humanidade

• le-sapo

• hortelã-choc

• escuro

• Pimenta-moedor

• Redmond

• suavidade

• sul-street

• começar

• ensolarado

• ostentoso-bolsa

• trontastic

• ui-escuridão

• ui-leveza

• vader

Este exemplo começa com uma página em branco HTML5 (que começa com uma directiva). A fim de ter acesso às APIs necessárias, você precisa adicionar algumas ligações. Três links apontam para jQuery, jQuery UI, e MooTools. A quarta link é para a folha de estilo jQuery UI. O exemplo utiliza o ensolarado estilo, mas você pode mudar isso a qualquer estilo que você quer. Aqui está o código que você precisa adicionar para as ligações (nota, cada URL deve aparecer em uma linha).

A parte HTML do exemplo é bastante simples. Ele consiste de um cabeçalho, um parágrafo, um botão, e alguns elementos como mostrado aqui.

Usando várias bibliotecas Juntos
Gerar um número aleatório entre 1 e 100
 
0

O SampleNumber contém o número que é gerado pelo gerador de números aleatórios. Este valor é colocado num recipiente, de saída, para criar uma caixa bem formatada na saída. O botão fornece os meios para alterar o número aleatório usando o código javascript fornecido por uma combinação de jQuery, jQuery UI, e MooTools.

O exemplo também requer algumas informações de estilo para criar uma caixa de saída bem formatado e o ponto de partida para o exemplo. O seguinte estilo é tudo que você precisa.

Neste ponto, você está pronto para adicionar algum código. O script para este exemplo mostra como usar as várias bibliotecas juntos. Você provavelmente criar uma página mais complicado para fins de produção.

O exemplo começa por mudar o botão HTML em um widget Botão jQuery UI que você poderia manipular de várias maneiras. As duas funções, que o exemplo realiza são para formatar o botão para trabalhar com o estilo jQuery UI e para fornecer um meio de captura clique() eventos.

A primeira tarefa do script deve executar é criar um número aleatório. Você pode executar essa tarefa usando javascript, mas a técnica MooTools mostrado no exemplo é muito mais fácil. A chamada para Number.random () coloca um valor entre 1 e 100 em RandNum. Agora que você tem um número aleatório, o código coloca-lo no SampleNumber chamando o método html () com o valor de RandNum.

Neste ponto, pode-se dizer que o exemplo está completa. No entanto, o exemplo vai um passo além. Ele determina o intervalo numérico de RandNum e usa o jQuery UI animar() efeito de modificar a cor da saída na tela.