jquery UI Componentes de interface rica para suas aplicações web Maurício Samy Silva Novatec

Transcrição

1 jquery UI Componentes de interface rica para suas aplicações web Maurício Samy Silva Novatec

2 Copyright 2012 da Novatec Editora Ltda. Todos os direitos reservados e protegidos pela Lei de 19/02/1998. É proibida a reprodução desta obra, mesmo parcial, por qualquer processo, sem prévia autorização, por escrito, do autor e da Editora. Editor: Rubens Prates Revisão gramatical: Alessandro Thomé Editoração eletrônica: Carolina Kuwabata Capa: Carolina Kuwabata ISBN: Histórico das impressões: Maio/2012 Primeira edição Novatec Editora Ltda. Rua Luís Antônio dos Santos São Paulo, SP Brasil Tel.: Fax: novatec@novatec.com.br Site: Twitter: twitter.com/novateceditora Facebook: facebook.com/novatec LinkedIn: linkedin.com/in/novatec Dados Internacionais de Catalogação na Publicação (Câmara Brasileira do Livro, SP, Brasil) Silva, Maurício Samy jquery UI : componentes de interface rica para suas aplicações web / Maurício Samy Silva. -- São Paulo : Novatec Editora, Bibliografia ISBN HTML (Linguagem de programação) 2. jquery UI 3. Web sites - Desenvolvimento I. Título CDD Índices para catálogo sistemático: VC jquery UI : Desenvolvimento de aplicações

3 Sumário Agradecimentos Isenção de responsabilidade Sobre o autor Introdução Para quem foi escrito este livro...27 Convenções tipográficas...28 Site do livro...30 Capítulo 1 Apresentação da jquery UI Apresentação Download da biblioteca Estrutura HTML...38 Capítulo 2 Componente Draggable (Arrastar) Apresentação Características Classes para estilização Classes padrão Callback Opções Eventos Métodos...86 Capítulo 3 Componente Droppable (Soltar) Apresentação Características Classe para estilização Classes padrão Opções Eventos Métodos

4 8 jquery UI Capítulo 4 Componente Resizable (Redimensionar) Apresentação Características Classes para estilização Classes padrão Callback Opções Eventos Métodos Capítulo 5 Componente Selectable (Selecionar) Apresentação Características Classes para estilização Classes padrão Área de seleção Opções Eventos Métodos Grid Capítulo 6 Componente Sortable (Ordenar) Apresentação Características Classes para estilização Classes padrão Opções Eventos Métodos Grid Capítulo 7 Widget Accordion (Acordeão) Apresentação Características Classes padrão Opções Eventos Métodos Capítulo 8 Widget Autocomplete (Autocompletar) Apresentação Características Classes para estilização

5 Sumário Classes padrão Opções Eventos Métodos Array e JSON Array de objetos JSON Capítulo 9 Widget Button (Botão) Apresentação Características Classes padrão Opções Eventos Métodos Método buttonset Checkbox radio Exemplos Capítulo 10 Widget Datepicker (Seletor de Datas) Apresentação Características Classes padrão Opções Eventos Métodos Capítulo 11 Widget Dialog (Janela de Diálogo) Apresentação Características Classes para estilização Opções Eventos Métodos Capítulo 12 Widget Progressbar (Barra de Progresso) Apresentação Características Classes para estilização Barra funcionando Opções Eventos Métodos

6 10 jquery UI Capítulo 13 Widget Slider (Controle Deslizante) Apresentação Características Classes padrão Opções Eventos Métodos Exemplo Capítulo 14 Widget Tabs (Painel de Abas) Apresentação Características Classes para estilização Opções Eventos Métodos Capítulo 15 Efeitos Introdução Efeitos Efeitos de animação de cores Efeitos com manipulação do atributo class Capítulo 16 Framework CSS Introdução Dois temas na mesma página Folha de estilos jquery.ui.theme.css Introdução Classes para o container do widget Classes para dicas de destaque Classes para estados de interação Classes para bordas arredondadas Ícones Apêndice A Componente Draggable (Arrastar) A.1 Opções A.1.1 disabled A.1.2 addclasses A.1.3 appendto A.1.4 axis A.1.5 cancel A.1.6 connecttosortable A.1.7 containment

7 Sumário 11 A.1.8 cursor A.1.9 cursorat A.1.10 delay A.1.11 distance A.1.12 grid A.1.13 handle A.1.14 helper A.1.15 iframefix A.1.16 opacity A.1.17 refreshpositions A.1.18 revert A.1.19 revertduration A.1.20 scope A.1.21 scroll A.1.22 scrollsensitivity A.1.23 scrollspeed A.1.24 snap A.1.25 stack A.1.26 z-index A.2 Eventos A.2.1 create A.2.2 start A.2.3 drag A.2.4 stop A.3 Métodos A.3.1 destroy A.3.2 disable enable A.3.3 option A.3.4 widget Apêndice B Componente Droppable (Soltar) B.1 Opções B.1.1 disabled B.1.2 accept B.1.3 activeclass B.1.4 addclasses B.1.5 greedy B.1.6 hoverclass B.1.7 scope B.1.8 tolerance B.2 Eventos B.2.1 create B.2.2 activate B.2.3 deactivate

8 12 jquery UI B.2.4 over B.2.5 out B.2.6 drop B.3 Métodos B.3.1 destroy B.3.2 disable enable B.3.3 option B.3.4 widget Apêndice C Componente Resizable (Redimensionar) C.1 Opções C.1.1 disabled C.1.2 alsoresize C.1.3 animate C.1.4 animateduration C.1.5 animateeasing C.1.6 aspectratio C.1.7 autohide C.1.8 cancel C.1.9 containment C.1.10 delay C.1.11 distance C.1.12 ghost C.1.13 grid C.1.14 handles C.1.15 helper C.1.16 maxheight, maxwidth, minheight, minwidth C.2 Eventos C.2.1 create C.2.2 start C.2.3 resize C.2.4 stop C.3 Métodos C.3.1 destroy C.3.2 disable enable C.3.3 option C.3.4 widget Apêndice D Componente Selectable (Selecionar) D.1 Opções D.1.1 disabled D.1.2 autorefresh D.1.3 cancel D.1.4 delay...626

9 Sumário 13 D.1.5 distance D.1.6 filter D.1.7 tolerance D.2 Eventos D.2.1 create D.2.2 start D.2.3 selected D.2.4 selecting D.2.5 stop D.2.6 unselected D.2.7 unselecting D.3 Métodos D.3.1 destroy D.3.2 disable enable D.3.3 option D.3.4 widget D.3.5 refresh Apêndice E Componente Sortable (Ordenar) E.1 Opções E.1.1 disabled E.1.2 helper E.1.3 axis E.1.4 cancel E.1.5 connectwith E.1.6 containment E.1.7 cursor E.1.8 cursorat E.1.9 delay E.1.10 distance E.1.11 droponempty E.1.12 grid E.1.13 appendto E.1.14 handle E.1.15 items E.1.16 opacity E.1.17 placeholder E.1.18 rever t E.1.19 scroll E.1.20 scrollsensitivity E.1.21 scrollspeed E.1.22 tolerance E.1.23 z-index E.1.24 forcehelpersize...643

10 14 jquery UI E.1.25 forceplaceholdersize E.1.26 connecttosortable E.2 Eventos E.2.1 create E.2.2 start E.2.3 sort E.2.4 change E.2.5 beforestop E.2.6 stop E.2.7 update E.2.8 activate E.2.9 over E.2.10 out E.2.11 receive E.2.12 remove E.2.13 deactivate E.3 Métodos E.3.1 destroy E.3.2 disable enable E.3.3 option E.3.4 widget E.3.5 serialize E.3.6 toarray E.3.7 cancel E.3.8 refresh E.3.9 refreshposition Apêndice F Widget Accordion (Acordeão) F.1 Opções F.1.1 disabled F.1.2 active F.1.3 animated F.1.4 autoheight F.1.5 clearstyle F.1.6 collapsible F.1.7 event F.1.8 fillspace F.1.9 header F.1.10 icons F.1.11 navigation F.1.12 navigationfilter F.2 Eventos F.2.1 create F.2.2 change

11 Sumário 15 F.2.3 changestart F.3 Métodos F.3.1 destroy F.3.2 disable enable F.3.3 option F.3.4 widget F.3.5 activate F.3.6 resize Apêndice G Widget Autocomplete (Autocompletar) G.1 Opções G.1.1 disabled G.1.2 minlength G.1.3 autofocus G.1.4 delay G.1.5 position G.1.6 appendto G.1.7 source G.2 Eventos G.2.1 create G.2.2 search G.2.3 open G.2.4 focus G.2.5 select G.2.6 close G.2.7 change G.3 Métodos G.3.1 destroy G.3.2 disable enable G.3.3 option G.3.4 widget G.3.5 search G.3.6 close Apêndice H Widget Button (Botão) H.1 Opções H.1.1 disabled H.1.2 icons H.1.3 text H.1.4 label H.2 Eventos H.2.1 create H.3 Métodos H.3.1 destroy

12 16 jquery UI H.3.2 disable enable H.3.3 option H.3.4 widget H.3.5 refresh H.4 Método buttonset H.4.1 Checkbox H.4.2 radio Apêndice I Widget Datepicker (Seletor de Datas) I.1 Opções I.1.1 disabled I.1.2 altfield I.1.3 altformat I.1.4 appendtext I.1.5 showothermonths I.1.6 selectothermonths I.1.7 showweek I.1.8 calculateweek I.1.9 firstday I.1.10 stepmonths I.1.11 autosize I.1.12 dateformat I.1.13 changemonth I.1.14 changeyear I.1.15 yearrange I.1.16 maxdate I.1.17 mindate I.1.18 hideifnoprevnext I.1.19 defaultdate I.1.20 numberofmonths I.1.21 showcurrentatpos I.1.22 showanim I.1.23 duration I.1.24 showon I.1.25 buttontext I.1.26 buttonimage I.1.27 buttonimageonly I.1.28 showbuttonpanel I.1.29 Opções de internacionalização I.2 Eventos I.2.1 create I.2.2 beforeshow I.2.3 beforeshowday I.2.4 onchangemonthyear...691

13 Sumário 17 I.2.5 onclose I.2.6 onselect I.3 Métodos I.3.1 destroy I.3.2 disable enable I.3.3 option I.3.4 widget I.3.5 dialog I.3.6 isdisabled I.3.7 hide I.3.8 show I.3.9 refresh I.3.10 getdate I.3.11 setdate Apêndice J Widget Dialog (Janela de Diálogo) J.1 Opções J.1.1 disabled J.1.2 modal J.1.3 title J.1.4 resizable J.1.5 draggable J.1.6 minwidth J.1.7 maxwidth J.1.8 minheight J.1.9 maxheight J.1.10 width J.1.11 height J.1.12 autoopen J.1.13 buttons J.1.14 closeonescape J.1.15 show J.1.16 hide J.1.17 position J.1.18 closetext J.1.19 dialogclass J.1.20 stack J.1.21 z-index J.2 Eventos J.2.1 create J.2.2 beforeclose J.2.3 open J.2.4 focus J.2.5 dragstart...705

14 18 jquery UI J.2.6 drag J.2.7 dragstop J.2.8 resizestart J.2.9 resize J.2.10 resizestop J.2.11 close J.3 Métodos J.3.1 destroy J.3.2 disable enable J.3.3 option J.3.4 widget J.3.5 close J.3.6 isopen J.3.7 movetotop J.3.8 open Apêndice K Widget Progressbar (Barra de Progresso) K.1 Opções K.1.1 value K.1.2 disabled K.2 Eventos K.2.1 create K.2.2 change K.2.3 complete K.3 Métodos K.3.1 destroy K.3.2 disable enable K.4 option K.4.1 widget K.4.2 value Apêndice L Widget Slider (Controle Deslizante) L.1 Opções L.1.1 disabled L.1.2 step L.1.3 animate L.1.4 value L.1.5 values L.1.6 min L.1.7 max L.1.8 range L.1.9 orientation L.2 Eventos L.2.1 create...718

15 Sumário 19 L.2.2 start L.2.3 stop L.2.4 change L.2.5 slide L.3 Métodos L.3.1 destroy L.3.2 disable enable L.3.3 option L.3.4 widget L.3.5 value L.3.6 values Apêndice M Widget Tabs (Painel de Abas) M.1 Opções M.1.1 disabled M.1.2 collapsible M.1.3 selected M.1.4 event M.1.5 fx M.1.6 ajaxoptions M.1.7 cache M.1.8 spinner M.1.9 cookie M.1.10 idprefix M.1.11 paneltemplate M.1.12 tabtemplate M.2 Eventos M.2.1 create M.2.2 select M.2.3 show M.2.4 load M.2.5 add M.2.6 remove M.2.7 enable M.2.8 disable M.3 Métodos M.3.1 destroy M.3.2 disable enable M.3.3 option M.3.4 widget M.3.5 select M.3.6 length M.3.7 remove M.3.8 add

16 20 jquery UI M.3.9 rotate M.3.10 load M.3.11 abort M.3.12 url Referências Índice remissivo