A jQuery User Interface é um projeto irmão da jQuery. A Biblioteca jQuery tem as funcionalidades principais para manipulação dos elementos da árvore do Dom, manipulação de eventos. A jQuery UI é um framework composto de vários componentes prontos para aplicação em páginas Web.
Nela estão componentes de barra de progresso, componentes de calendário, botões, vistos no início do curso de jQuery. Num primeiro momento, será detalhado como instalar esse framework nas páginas Web.
Na página inicial da Biblioteca jQuery tem um download do framework e em destaque informações de que ele é composto de alguns widgets (componentes prontos para serem incorporados às páginas). Existe uma seção que permite a customização do visual desses componentes. Onde é possível construir o estilo visual das páginas web.
O css pode ser construído de forma dinâmica, automática dentro do portal da jQueryUI. Tem também uma documentação completa, como a da biblioteca jQuery. Enfim, nesse framework, serão encontrados exemplos com documentação, código para copiar e colar na página que está sendo construída.
Em download tem a indicação de todos os componentes que compõe a jQueryUI. Ao fazer o download deve-se escolher e informar quais os componentes desejados dentro da Biblioteca, porque o framework é bastante extenso em comparação com a biblioteca jQuery que tem apenas 29Kb. A jQueryUI com todos os seus componentes, seus widgets, tem aproximadamente 340Kb.
A Biblioteca está dividida nos seguintes componentes:
Obs. Em Effects, existe muito mais efeitos do que os disponibilizados na Biblioteca jQuery
Além desses recursos existe a seção de Themes, área onde é permitido escolher o estilo visual dos componentes. Nessa seção existe três abas principais:
Nessa primeira aba pode-se configurar as cores dos componentes como também as fontes, o arredondamento dos cantos, cores de cabeçalhos, de botões. Depois de configurados o estilo visual dos componentes, clicar em download theme e baixar um arquivo zip, com todos css, as imagens e os scripts necessários para rodar os componentes com o visual escolhido.
Na segunda aba, tem 24 estilos visuais pré-definidos, que podem aumentar, pois a biblioteca está sendo em permanente construção. Para ver em funcionameto, basta clicar em cima do estilo e a página será alterada de acordo com a escolha.
Clique em um estilo, Le Frog por exemplo, depois download. Pode-se a partir desse estilo, alterar algum atributo. Para isso clique em edit e proceda com a edição do estilo. Ao clicar em download ele redireciona para Buil Your Donwload, onde é possível definir os elementos que se deseja incorporar à biblioteca jQuery UI apresentado o Theme escolhido, nesse caso Le Frog (está dentro da campo de texto, abaixo de download). Não esquecer de marcar as escolhas. Ao clicar em download será apresentado um arquivo Zip, com as escolhas que foram marcadas e o Css desse estilo visual. Clique em ok e baixe o arquivo.(09:02) Biblioteca jQuery UI (download)
Abra o diretório, e extraia para inspeção. Dentro serão encontrados três diretórios: css com o estilo visual escolhido, nesse caso Le Frog. Se tiver mais estilos visuais, cada um terá o próprio diretório. Dentro de Le Frog serão encontrados o css, e as imagens utilizadas por ele.
No diretório Developsment-bundle, está contida toda a documentação dos componentes, exemplos de utilização de cada um dos compomentes, bibliotecas externas necessárias para rodar os exemplos e outras bibliotecas para manipular cookies, metadados. Além de diretórios com themes básicos. Esse diretório é bom para aprofundar os conhecimentos no framework jQueryUI.
Em js, serão encontrados a Biblioteca jQuery necessária para rodar a jQueyUI, e a própria jQueryUI minimificada. A jQueryUI tem todos os componentes escolhidos no download. Tem o core, widget, index.html.
Junto com css, Developsment-bundle, js tem também o index.html.
Para as próximas páginas, serão utilizados somente css e js, que serão copiados para dentro do diretório jquery, onde serão colados. Para esse tutorial, foi criado dentro do diretório jQuery, um subdiretório denominado jQueryUI. Colar esses diretórios. Deixe que subscreva o diretório js. Assim dentro do diretório js, ficarão a jquery-1.5.2.min.js, mais recente, e a biblioteca jquery-ui-1.10.4.custom.min.js com todos os componentes prontos para usar. E fora no diretório jqueryUI o css, com o estilo visual escolhido. Na próxima página exemplo de utilização da biblioteca jQuery UI.