O documento descreve a biblioteca jQuery UI, que fornece componentes gráficos para criação de interfaces ricas com poucas linhas de código. A biblioteca modifica o DOM para inserir elementos e classes que permitem estilização dinâmica. Ela contém widgets, efeitos e utilidades para manipulação de elementos HTML.

2. O que é
• Rica e extensiva biblioteca de componentes
gráficos
• “Biblioteca para a biblioteca Jquery”
“Write less, do more” [jquery.com 2009]

3. Pra que serve
• Criação de elementos de interface
• Animar elementos HTML com facilidade
• Mínimo de código

4. Como funciona
Mecanismos da biblioteca identificam a marcação
criada pelo autor e inserem elementos adicionais e
atributos classes a criar condições para a estilização
adequada à criação do elemento de interface.
O princípio de funcionamento da biblioteca é a
modificação do DOM.

5. BREAK;
//WTF IS DOM?
Com participação especial do Suissa

6. DOM
• Document Object Model (Modelo de Objeto de
Documento)
• Representação das linguagens de marcação
• Possui atributos e métodos
• Permite navegar e manipular seus documentos
através de uma linguagem de programação

7. ARVORE DOM
Foto tirada do site Tableless

8. Utilização

9. Utilização

10. Utilização

11. Elementos de
Interface
Classificados nos grupos Componentes,
Widgets, Efeitos e Utilidades

12. Utilidades
Alguns métodos para tarefas comuns no dia a dia.

13. Componentes
É a interação do mouse com os elementos da página.
(arrastar, soltar, dimensionar, selecionar e ordenar)

14. Widgets
Interfaces de usuário prontas que permitem customização.
(accordion, autocomplete, button, datepicker, dialog, progressbar,
slider, tabs)

15. Efeitos
Animações simples e funções baseadas na manipulação de
classes.

16. Efeitos
• Show/hide, Add/remove class
• Color Animation: anima cores do elemento
• Toggle Class: Alterna a presença de determinada
classse, animando as alterações de estilo
• Switch class: Alterna entre duas classes, animando
as alterações de estilo

17. Links Úteis
• http://api.jqueryui.com/ - API jQuery UI
• http://www.livrojqueryui.com.br/exemplos/index.ht
ml - Exemplos do livro jQuery UI – Componentes de
interface rica para suas aplicações web (2012,
MAUJOR)

18. Referências Bibliográficas
• Tableless. (2014). Tenha o DOM. [Em linha]. Disponível em
http://tableless.com.br/tenha-o-dom/. [consultado em 29-10-2014].
• Desenvolvedor FrontEnd. (2013). Navegando no DOM - jQuery. [Em linha].
Disponível em http://wbruno.com.br/jquery/navegando-no-dom-jquery/.
[consultado em 29-10-2014].
• DEVMEDIA. (2013). Explorando o jQuery UI. [Em linha]. Disponível em
http://www.devmedia.com.br/explorando-o-jquery-ui/30316#ixzz3HRumftBf/.
[consultado em 29-10-2014].
• MAUJOR, Maurício. jQuery UI – Componentes de interface rica para suas
aplicações web [Em linha]. 1ª edição (2012), p. 31-40. [consultado em 29-10-
2014].
Disponível na internet: http://www.novatec.com.br/livros/jquery-ui/
capitulo9788575222966.pdf/.