tdc 2011 - criando um plugin jquery
TRANSCRIPT
![Page 1: TDC 2011 - Criando um plugin jQuery](https://reader030.vdocuments.pub/reader030/viewer/2022020106/55a9f0d41a28ab9e418b47cd/html5/thumbnails/1.jpg)
Criando um plugin
![Page 2: TDC 2011 - Criando um plugin jQuery](https://reader030.vdocuments.pub/reader030/viewer/2022020106/55a9f0d41a28ab9e418b47cd/html5/thumbnails/2.jpg)
Quem sou eu?
●Guilherme Rey
●Corinthiano
●Computeiro
![Page 3: TDC 2011 - Criando um plugin jQuery](https://reader030.vdocuments.pub/reader030/viewer/2022020106/55a9f0d41a28ab9e418b47cd/html5/thumbnails/3.jpg)
Por que plugins?
![Page 4: TDC 2011 - Criando um plugin jQuery](https://reader030.vdocuments.pub/reader030/viewer/2022020106/55a9f0d41a28ab9e418b47cd/html5/thumbnails/4.jpg)
![Page 5: TDC 2011 - Criando um plugin jQuery](https://reader030.vdocuments.pub/reader030/viewer/2022020106/55a9f0d41a28ab9e418b47cd/html5/thumbnails/5.jpg)
Primeiro passo
jQuery.fn.meuplugin = function () { // Meu super plugin
};
![Page 6: TDC 2011 - Criando um plugin jQuery](https://reader030.vdocuments.pub/reader030/viewer/2022020106/55a9f0d41a28ab9e418b47cd/html5/thumbnails/6.jpg)
O sinal
● Mas e o $? Posso usar numa boa?
![Page 7: TDC 2011 - Criando um plugin jQuery](https://reader030.vdocuments.pub/reader030/viewer/2022020106/55a9f0d41a28ab9e418b47cd/html5/thumbnails/7.jpg)
O sinal
● Mas e o $? Posso usar numa boa?● Até pode, mas e se conflitar?
![Page 8: TDC 2011 - Criando um plugin jQuery](https://reader030.vdocuments.pub/reader030/viewer/2022020106/55a9f0d41a28ab9e418b47cd/html5/thumbnails/8.jpg)
O sinal
● Mas e o $? Posso usar numa boa?● Até pode, mas e se conflitar?● Mas assim: (com closure)
(function( $ ) { $.fn.seuplugin = function () { // Seu super plugin }; })(jQuery);
![Page 9: TDC 2011 - Criando um plugin jQuery](https://reader030.vdocuments.pub/reader030/viewer/2022020106/55a9f0d41a28ab9e418b47cd/html5/thumbnails/9.jpg)
O sinal
● Mas e o $? Posso usar numa boa?● Até pode, mas e se conflitar?● Mas assim: (com closure)
● É perfeito!
(function( $ ) { $.fn.seuplugin = function () { // Seu super plugin }; })(jQuery);
![Page 10: TDC 2011 - Criando um plugin jQuery](https://reader030.vdocuments.pub/reader030/viewer/2022020106/55a9f0d41a28ab9e418b47cd/html5/thumbnails/10.jpg)
Contexto● Temos que pensar no contexto
● É perfeito!
$('elemento').seuplugin(); (function( $ ) { $.fn.seuplugin = function () { // Aqui o this é um objeto jQuery // $(this) = $($(this))
// Isso funciona: this.show('fast', function(){ // Aqui, this é um elemento DOM }); }; })(jQuery);
![Page 11: TDC 2011 - Criando um plugin jQuery](https://reader030.vdocuments.pub/reader030/viewer/2022020106/55a9f0d41a28ab9e418b47cd/html5/thumbnails/11.jpg)
Como diria o Tite...
● ... vamos manter a "Correntabilidade"!
as
● Assim, a corrente continua! $(obj).metodo().metodo()...
(function( $ ) { $.fn.seuplugin = function () { return this.each(function () { // Seu super plugin }); }; })(jQuery);
![Page 12: TDC 2011 - Criando um plugin jQuery](https://reader030.vdocuments.pub/reader030/viewer/2022020106/55a9f0d41a28ab9e418b47cd/html5/thumbnails/12.jpg)
Code!
● Let's code!
![Page 13: TDC 2011 - Criando um plugin jQuery](https://reader030.vdocuments.pub/reader030/viewer/2022020106/55a9f0d41a28ab9e418b47cd/html5/thumbnails/13.jpg)
Obrigado!@guilhermerey
www.guilhermerey.com.br