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!