jQuery básico (parte 3)

926 views

Published on

Aqui vemos exemplos de plugins muito úteis para o desenvolvimento de sites, e também temos uma visão geral de como criar novos plugins

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
926
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery básico (parte 3)

  1. 1. jQueryIniciando (Parte III)
  2. 2.  Tivemos uma visão geral sobre ◦ Javascript (uso, tipagem, OOP, DOM) ◦ jQuery (o que é, funcionamento, seletores, efeitos, ajax)Retrospectiva
  3. 3.  Conhecer plugins para o jQuery que facilitam o desenvolvimento de websites Criar plugins para o jQueryObjetivos
  4. 4.  O que são plugins Usar plugins ◦ Gráficos ◦ Formulários ◦ Imagens ◦ Infra-estrutura ◦ Mobile ◦ UI (conjunto de componentes) Criar pluginsAgenda
  5. 5.  Plugins para o jQuery são bibliotecas (feitas utilizando o jQuery) que adicionam funcionalidades e facilitam ainda mais a nossa vida. Os plugins podem ser criados por QUALQUER pessoa, ou seja, se o criador não prestar atenção pode tornar o plugin INCOMPATÍVEL com algum navegador.Plugins.what()
  6. 6.  Usar plugins é muito simples. Eles adicionam um método no objeto jQuery e basicamente o que temos que fazer é chamar este método a partir do seletor (passando as opções que queremos): $(“#elementoTeste”).myPlugin( { option1: “teste”, option2: true, option3: { option4: [“a”, “b”, “c”] } } );Plugins.howToUse()
  7. 7.  jQuery Visualize Plugin ◦ Site jqPlot ◦ Site ◦ Exemplos Highcharts ◦ Site ◦ ExemplosPlugins.use.charts()
  8. 8.  Form Wizard ◦ Site jQTransform ◦ Site Uniform ◦ Site File Upload ◦ SitePlugins.use.forms()
  9. 9.  Lightbox  Nivo Slider  Pretty Photo ◦ Site ◦ Site ◦ Site ◦ Exemplos Exposure  Fancy box ◦ Site  Slider Crystal ◦ Site ◦ Exemplos ◦ Site  TopUp! Cycle  Slides ◦ Site ◦ Site ◦ Site  Anything Zoomer Orbit  Aviaslider ◦ Site ◦ Site ◦ SitePlugins.use.images()
  10. 10.  DataTables  NavDock  Prototip 2 ◦ Site ◦ Site ◦ Site SwfObject  jPaginate  i18n.properties ◦ Site ◦ Site ◦ Site FeatureList  TinyTips ◦ Exemplo ◦ Site SlideDeck  Coda Popup ◦ Site Bubbles ◦ SitePlugins.use.infra()
  11. 11.  jQTouch ◦ Site jQuery Mobile ◦ SitePlugins.use.mobile()
  12. 12.  jQuery UI ◦ Site wijmo ◦ SitePlugins.use.ui()
  13. 13.  Criar plugins não é nada complicado, na documentação do jQuery tem a explicação dos padrões que devemos seguir: ◦ Isole o escopo do seu plugin (evita que outras bibliotecas interfiram no jQuery); ◦ Não é necessário fazer $(this) no escopo do plugin (this já será um objeto jQuery), porém caso seja criada uma closure dentro do plugin deve ser usado $(this);Plugins.create()
  14. 14. (function($){ $.fn.myPlugin = function(settings) { var config = {}; if (settings) { $.extend(config, settings); } return this; };})(jQuery);Plugins.create.basic()
  15. 15. (function($){ $.fn.myPlugin = function(settings) { var config = {}; Um plugin não deve utilizar mais de um nome if (settings) { $.extend(config, settings); } return this; };})(jQuery);Plugins.create.basic()
  16. 16. (function($){ var methods = { add: function() {}, init: function() {} }; Podemos resolver, $.fn.myPlugin = function(method) criando várias funções { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (!method) { return method.init.apply(this); } else { alert(“Método não encontrado”); return this; } };})(jQuery);Plugins.create.basic()
  17. 17. (function($){ $.fn.myPlugin = function(settings) { var config = {}; As configurações do plugin devem poder ser alteradas pelo desenvolvedor if (settings) { $.extend(config, settings); } return this; };})(jQuery);Plugins.create.basic()
  18. 18. (function($){ $.fn.myPlugin = function(settings) { var config = {}; Devemos sempre retornar o objeto para manter a fluent interface if (settings) { $.extend(config, settings); } return this; };})(jQuery);Plugins.create.basic()

×