JqueryUI - Guia rápido

JqueryUI é uma poderosa biblioteca Javascript construída sobre a biblioteca jQuery JavaScript. UI significa interface de usuário, é um conjunto de plug-ins para jQuery que adiciona novas funcionalidades à biblioteca central do jQuery.

O conjunto de plug-ins em JqueryUI inclui interações de interface, efeitos, animações, widgets e temas construídos sobre a biblioteca jQuery JavaScript.

Foi lançado em setembro de 2007, anunciado em uma postagem no blog de John Resig no jquery.com. A versão mais recente, 1.10.4, requer jQuery 1.6 ou versão posterior. jQuery UI é um software de código aberto gratuito, licenciado sob a Licença MIT.

Características

JqueryUI é categorizado em quatro grupos, interações, widgets, efeitos e utilitários. Isso será discutido em detalhes nos capítulos subsequentes. A estrutura da biblioteca é mostrada na imagem abaixo -

Interactions - Esses são os plug-ins interativos como arrastar, soltar, redimensionar e muito mais, que dão ao usuário a capacidade de interagir com os elementos DOM.
Widgets - Usando widgets que são plug-ins jQuery, você pode criar elementos de interface de usuário como acordeão, selecionador de data, etc.
Effects- Estes são construídos nos efeitos internos do jQuery. Eles contêm um conjunto completo de animações e transições personalizadas para elementos DOM.
Utilities - Este é um conjunto de ferramentas modulares que a biblioteca JqueryUI usa internamente.

Benefícios do JqueryUI

A seguir estão alguns dos benefícios da IU do Jquery -

APIs coesivas e consistentes.
Suporte abrangente ao navegador.
Código aberto e gratuito para uso.
Boa documentação.
Mecanismo de tema poderoso.
Estável e de fácil manutenção.

Este capítulo irá 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ê requer apenas 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 testes 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 fazer o download 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 (em 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 sobre a 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.

jQueryUI fornece draggable()método para tornar qualquer elemento DOM arrastável. Uma vez que o elemento pode ser arrastado, você pode mover esse elemento clicando nele com o mouse e arrastando-o para qualquer lugar dentro da janela de visualização.

Sintaxe

o draggable() método pode ser usado em duas formas -

Método $ (seletor, contexto) .draggable (opções)
$ (seletor, contexto) .draggable ("action", [params]) Método

Método $ (seletor, contexto) .draggable (opções)

O método draggable (options) declara que um elemento HTML pode ser movido na página HTML. O parâmetro options é um objeto que especifica o comportamento dos elementos envolvidos.

Sintaxe

$(selector, context).draggable(options);

Você pode fornecer uma ou mais opções por vez usando o objeto Javascript. Se houver mais de uma opção a ser fornecida, você irá separá-las usando uma vírgula da seguinte forma -

$(selector, context).draggable({option1: value1, option2: value2..... });

A tabela a seguir lista as diferentes opções que podem ser usadas com este método -

Sr. Não.	Opção e descrição
1	addClasses Se esta opção estiver definida para false, vai prevenir o ui-draggableclasse seja adicionada na lista de elementos DOM selecionados. Por padrão, seu valor étrue.

↰ Previous page Next page ↱