jQuery User Interface (UI)  é uma biblioteca de plugins de interface gráfica com o usuário (widgets) e de interação constr...
 
Draggable Droppable Resizable Selectable Sortable Interactions
Draggable Droppable Resizable Selectable Sortable Interactions
Draggable Interactions Habilitar a funcionalidade arrastável em elementos do DOM.  Options axis  cursor  cursorAt  delay  ...
Options Draggable Inicializa um elemento arrastável com a opção disabled = true $( ".selector" ).draggable({ dis...
Events Draggable Define uma funcão de callback para o evento create $( ".selector" ).draggable({ create: functio...
Methods Draggable destroy, disable, enable e widget .draggable( "destroy" ) option .draggable( "option&quot...
Vamos aos exemplos!
Obrigado!
Upcoming SlideShare
Loading in …5
×

Apresentação jQuey UI ( Draggable )

1,837 views

Published on

Esta apresentação faz uma introdução do jquery UI.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,837
On SlideShare
0
From Embeds
0
Number of Embeds
202
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • - O jquery UI foi criado para ser um conjunto oficial de plugins para desenvolvimento de interfaces ricas e interativas para web - Juntou-se um conjunto de plugins para formar o jquery UI. - Como eram plugins de autores diferentes, a primeira versao da biblioteca ficou meio “despadronizada” - Nas outras versoes começou o trabalho de eliminacao das diferencas entre os plugins, buscando uma padronizacao e tb de desenvolvimento de novas funcionalidades para os plugins, e tb desenvolvimento de novos.
  • Interaçoes: plugins para comportamentos complexos, como drag and drop, redimensionamento, fazer com que um grupo de elementos seja ordenável Widgets: plugins para facilirar a interface com o usuário, como selecao de data (datePicker), Trabalhar com abas (tabs) janelas de diálogo (dialog) Themas: Todos os plugins do jquery UI são desenvolvidos para funcionar com o look and feel que podemos escolher usando os themas do jquery Efeitos: O jquery UI fornece vários efeitos de easing (efeitos) para algumas funcoes. É como se fosse por exemplo, um show “melhorado” .
  • Na primeira “leva” de apresentacoes vou falar um pouco sobre os plugins de interacao. Draggable: torna qq elemento arrastável Droppable: cria um alvo para os elementos arrastáveis Resizable: permite que um elemento do DOM seja redimensionado Selectable: Permite que um elemento ou um grupo de elementos do DOM sejam selecionáveis. (dá pra selecionar mais de um ) Sortable: Transforma um grupo de elementos do DOM em ordenáveis (classificaveis)
  • Grid : Snaps the dragging helper to a grid, every x and y pixels. Array values: [x, y] Events: podemos chamar funcoes para serem executadas nos eventos create, start drag e stop Methods: Temos tb algumas opções para desabilitar o efeito draggable de um elemento, habilitar, destroy pra remover..
  • Apresentação jQuey UI ( Draggable )

    1. 3. jQuery User Interface (UI) é uma biblioteca de plugins de interface gráfica com o usuário (widgets) e de interação construída em cima do framework do jQuery . Útil para construir aplicações web altamente interativas.
    2. 5. Draggable Droppable Resizable Selectable Sortable Interactions
    3. 6. Draggable Droppable Resizable Selectable Sortable Interactions
    4. 7. Draggable Interactions Habilitar a funcionalidade arrastável em elementos do DOM. Options axis cursor cursorAt delay distance handle grid revert snap snapMode ..... Events create start drag stop Methods destroy disable enable option widget
    5. 8. Options Draggable Inicializa um elemento arrastável com a opção disabled = true $( ".selector" ).draggable({ disabled: true }); Get e set da opção disabled //getter var disabled = $( ".selector" ).draggable( "option", "disabled" ); //setter $( ".selector" ).draggable( "option", "disabled", true );
    6. 9. Events Draggable Define uma funcão de callback para o evento create $( ".selector" ).draggable({ create: function(event, ui) { ... } }); Usando o Bind: dragcreate. $( ".selector" ).bind( "dragcreate", function(event, ui) { ... });
    7. 10. Methods Draggable destroy, disable, enable e widget .draggable( "destroy" ) option .draggable( "option" , optionName , [value] ) .draggable( "option" , options )
    8. 11. Vamos aos exemplos!
    9. 12. Obrigado!

    ×