• Like
Apresentação jQuey UI ( Draggable )
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Apresentação jQuey UI ( Draggable )

  • 1,566 views
Published

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,566
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
9
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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..

Transcript

  • 1.  
  • 2.  
  • 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.
  • 4.  
  • 5. Draggable Droppable Resizable Selectable Sortable Interactions
  • 6. Draggable Droppable Resizable Selectable Sortable Interactions
  • 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
  • 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 );
  • 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) { ... });
  • 10. Methods Draggable destroy, disable, enable e widget .draggable( "destroy" ) option .draggable( "option" , optionName , [value] ) .draggable( "option" , options )
  • 11. Vamos aos exemplos!
  • 12. Obrigado!