JqueryUI - Configuração de ambiente

Este capítulo discutirá sobre download e configuração da biblioteca JqueryUI. Também estudaremos brevemente a estrutura de diretórios e seu conteúdo. A biblioteca JqueryUI pode ser usada de duas maneiras em sua página da web -

Baixe a Biblioteca da IU em seu site oficial

Quando você abre o link http://jqueryui.com/, você verá que há três opções para baixar a biblioteca JqueryUI -

Custom Download - Clique neste botão para baixar uma versão personalizada da biblioteca.
Stable - Clique neste botão para obter a versão estável e mais recente da biblioteca JqueryUI.
Legacy - Clique neste botão para obter a versão principal anterior da biblioteca JqueryUI.

Download personalizado com o Download Builder

Usando o Download Builder, você pode criar um build personalizado para incluir apenas as partes da biblioteca que você precisa. Você pode baixar esta nova versão personalizada do JqueryUI, dependendo do tema escolhido. Você verá a seguinte tela (a mesma página é dividida em duas imagens) -

Isso é útil quando você precisa apenas de plug-ins ou recursos específicos da biblioteca JqueryUI. A estrutura do diretório desta versão é mostrada na figura a seguir -

Os arquivos descompactados estão localizados no diretório de pacote de desenvolvimento . O arquivo descompactado é melhor usado durante o desenvolvimento ou depuração; o arquivo compactado economiza largura de banda e melhora o desempenho na produção.

Download estável

Clique no botão Estável, que leva diretamente a um arquivo ZIP contendo as fontes, exemplos e documentação da versão mais recente da biblioteca JqueryUI. Extraia o conteúdo do arquivo ZIP para um diretório jqueryui .

Esta versão contém todos os arquivos, incluindo todas as dependências, uma grande coleção de demos e até mesmo o conjunto de teste de unidade da biblioteca. Esta versão é útil para começar.

Download legado

Clique no botão Legacy, que leva diretamente a um arquivo ZIP da versão principal anterior da biblioteca JqueryUI. Esta versão também contém todos os arquivos, incluindo todas as dependências, uma grande coleção de demos e até mesmo o conjunto de teste de unidade da biblioteca. Esta versão é útil para você começar.

Baixe a Biblioteca da IU dos CDNs

Um CDN ou Content Delivery Network é uma rede de servidores projetada para servir arquivos aos usuários. Se você usar um link CDN em sua página da web, ele transfere a responsabilidade de hospedar arquivos de seus próprios servidores para uma série de servidores externos. Isso também oferece a vantagem de que, se o visitante de sua página da Web já tiver baixado uma cópia do JqueryUI do mesmo CDN, não será necessário baixá-la novamente.

A jQuery Foundation , o Google e a Microsoft fornecem CDNs que hospedam o núcleo do jQuery, bem como o jQuery UI.

Como um CDN não exige que você hospede sua própria versão do jQuery e do jQuery UI, ele é perfeito para demonstrações e experimentação.

Estamos usando as versões CDN da biblioteca em todo este tutorial.

Exemplo

Agora vamos escrever um exemplo simples usando JqueryUI. Vamos criar um arquivo HTML, copie o seguinte conteúdo para a tag <head> -

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
   rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Os detalhes do código acima são -

A primeira linha adiciona o tema jQuery UI (no nosso caso, ui-lightness ) via CSS. Este CSS tornará nossa IU estilosa.
Segunda linha, adiciona a biblioteca jQuery, já que o jQuery UI é construído em cima da biblioteca jQuery.
Terceira linha, adiciona a biblioteca jQuery UI. Isso habilita o jQuery UI em sua página.

Agora vamos adicionar algum conteúdo à tag <head> -

<script type = "text/javascript">
   $(function () {
      $('#dialogMsg').dialog();
   });
</script>

No <body> adicione isto -

<body>
   <form id = "form1" runat = "server">
      <div id = "dialogMsg" title = "First JqueryUI Example">
         Hello this is my first JqueryUI example.
      </div>
   </form>
</body>

O código HTML completo é o seguinte. Salvar comomyfirstexample.html

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script type = "text/javascript">
         $(function () {
            $('#dialogMsg').dialog();
         });
      </script>
   </head>
   
   <body>
      <form id = "form1" runat = "server">
         <div id = "dialogMsg" title = "First JqueryUI Example">
            Hello this is my first JqueryUI example.
         </div>
      </form>
   </body>
</html>

Abra a página acima em seu navegador. Isso produzirá a seguinte tela.

↰ Previous page Next page ↱