jQuery UI

Fazem algumas semanas que resolvi utilizar um plugin jQuery (não lembro qual) que utilizava a jQuery UI, um framework com diversas classes prontas para trabalhar com jQUery, uma verdadeira mão na roda!

Como utilizei apenas o plugin pronto, fiz as alterações necessárias mas não havia realmente trabalhando com o framework. Em um projeto recente em que estou trabalhando, fui procurar uma nova forma de fazer uma navegação com accordion (já havia utilizado um plugin eficiente de jQuery anteriormente) e encontrei novamente com o jQuery UI.

Deixei a preguiça de lado e fui verificar como funcionava o jQuery UI, gostei bastante! Apesar de estar apenas iniciando os estudos pareceu bem fácil de utilizar. 

 

jQuery UI CSS Framework

Essa foi a única parte que até o momento eu realmente utilize, um completo framework CSS que permite personalização fácil e vem com muitas, MUITAS classes prontas.

No site do jQuery UI existe um gerador de tema, que permite configurar o seu framework de CSS de forma rápida:

Theme Generator (clique para ampliar)

O gerador de temas gera um framework CSS, que facilita no desenvolvimento com o restante dos utilitários.

Existem diversas classes prontas, para:

  • Bordas arredondadas
  • Overlay ("cobrir" parte da página para destacar determinado conteúdo)
  • Interação (hover, focus, etc.)
  • Exibição de erro
  • Highlight
  • Elemento desabilitado

E mais algumas, que ainda não explorei… 🙂

Falar de CSS me embrou de uma idéia interessante, que instiga algumas boas práticas no desenvlvimento das folhas de estilos: CSS orientado a objetos

 Ah, a parte de 

Interação

Além das facilidades na parte do CSS o framework facilita muito a criação de efeitos de interação.

  • Draggable
  • Droppable
  • Resizable
  • Selectable
  • Sortable

O melhor de tudo é a simplicidade com a qual funciona tudo, por exemplo para criar um elemento que possa ser arrastado, com apenas uma linha isto é feito:

$("#draggable").draggable();

Para os outros comandos a facilidade é a mesma. Isso associado aos diversos estilos dos temas pode acelerar muito o desenvolvimento de interfaces amigáveis!

 

Widgets

Mais facilidades com pouco código, existem algumas ferramentas prontas como:

 

  • Accordion
  • Datepicker
  • Dialog
  • Progressbar
  • Slider
  • Tabs

Testei o accordion, as personalizações possíveis são bacanas! Nos testes que fiz do accordion o funcionamento foi bom em IE (inclusive o 6 – exceto com listas de conteúdo), FF (perfeito) e Chrome (perfeito).

 

Animação

Os comando apra animação com o jQuery são bastante evoluídos e permitem fazer muita coisa, mas para efeitos padrão de interface o framework de user interface facilita com alguns efeitos prontos e bastante customizaveis:

  • Effect
  • Show
  • Hide
  • Toggle
  • Color animation
  • Add class
  • Remove class

 

 

Escrevi o post como uma introdução e estímulo aos usuários da biblioteca jQuery para estudar e utilizar a jQuery UI e facilitar ainda mais a vida!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *