Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Criando um plugin
Quem sou eu?● Guilherme Rey● Corinthiano● Computeiro
Por que plugins?
Primeiro passo   jQuery.fn.meuplugin = function () {        // Meu super plugin   };
O sinal● Mas e o $? Posso usar numa boa?
O sinal● Mas e o $? Posso usar numa boa?● Até pode, mas e se conflitar?
O sinal● Mas e o $? Posso usar numa boa?● Até pode, mas e se conflitar?● Mas assim: (com closure)    (function( $ ) {     ...
O sinal● Mas e o $? Posso usar numa boa?● Até pode, mas e se conflitar?● Mas assim: (com closure)     (function( $ ) {    ...
Contexto● Temos que pensar no contexto    $(elemento).seuplugin();    (function( $ ) {        $.fn.seuplugin = function ()...
Como diria o Tite...● ... vamos manter a "Correntabilidade"!     (function( $ ) {         $.fn.seuplugin = function () {  ...
Code!● Lets code!
Obrigado!    @guilhermereywww.guilhermerey.com.br
TDC 2011 - Criando um plugin jQuery
Upcoming SlideShare
Loading in …5
×

TDC 2011 - Criando um plugin jQuery

336 views

Published on

  • Be the first to comment

  • Be the first to like this

TDC 2011 - Criando um plugin jQuery

  1. 1. Criando um plugin
  2. 2. Quem sou eu?● Guilherme Rey● Corinthiano● Computeiro
  3. 3. Por que plugins?
  4. 4. Primeiro passo jQuery.fn.meuplugin = function () { // Meu super plugin };
  5. 5. O sinal● Mas e o $? Posso usar numa boa?
  6. 6. O sinal● Mas e o $? Posso usar numa boa?● Até pode, mas e se conflitar?
  7. 7. 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);
  8. 8. 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);● É perfeito!
  9. 9. Contexto● Temos que pensar no contexto $(elemento).seuplugin(); (function( $ ) { $.fn.seuplugin = function () { // Aqui o this é um objeto jQuery // $(this) = $($(this)) // Isso funciona: this.show(fast, function(){● É perfeito! // Aqui, this é um elemento DOM }); }; })(jQuery);
  10. 10. Como diria o Tite...● ... vamos manter a "Correntabilidade"! (function( $ ) { $.fn.seuplugin = function () { return this.each(function () { // Seu super plugin }); }; })(jQuery);as● Assim, a corrente continua! $(obj).metodo().metodo()...
  11. 11. Code!● Lets code!
  12. 12. Obrigado! @guilhermereywww.guilhermerey.com.br

×