Developing a jQuery Plugin

Old presentation from the archives.

Transcript

1. Introduc)on  to  jQuery  
2. Developing  a  Plugin  
3. The  Original  Func)on   /*  Make  Element  Standout  */   func)on  standout(element){          element.style.border  =  “1px  solid  #f00”;   }     standout(document.getElementById(‘myelement’) );  
4. Steps   1.  Convert  to  Plugin   2.  Encapsulate  Plugin  Specific  Code   3.  Support  Chaining   4.  Expose  Global  Defaults   5.  Support  “Per-­‐Call”  ConfiguraCon   6.  Support  “Per-­‐Element”  ConfiguraCon  
5. As  a  Plugin     /*  plugin  code  */   $.fn.standout  =  func)on()          this.css(“border”,  “1px  solid  #f00”);   }     $(“div”).standout()  
6. Encapsulate  Plugin  Specific  Code   (func)on($){            /*  plugin  code  */          $.fn.standout  =  func)on()                  debug(this);                  this.css(“border”,  “1px  solid  #f00”);          };            /*  private  debug  method  */          func)on  debug(o)  {                  console.log(“Count:”  +  o.length);          }   })(jQuery);    
7. Facilitate  Chaining   (func)on($){            /*  plugin  code  */          $.fn.standout  =  func)on()                  debug(this);                  return  this.css(“border”,  “1px  solid  #f00”);          }            func)on  debug(o)  {  …  }   })(jQuery);       $(“div”).standout().fadeOut()  
8. Expose  Global  Defaults          /*  plugin  code  */          $.fn.standout  =  func)on()                  if($.fn.standout.defaults.debug){  debug(this);  }                    return  this.css(                          "border",  $.fn.standout.defaults.borderStyle                  );          }            /*  global  defaults*/          $.fn.standout.defaults  =  {                  borderStyle  :  "1px  solid  #f00”                  debug:  window.console  &&  window.console.log          }  
9. Support  “Per-­‐Call”  Configura)on          /*  plugin  code  */          $.fn.standout  =  func)on(opts)                    var  o  =  $.extend({},  $.fn.standout.defaults,  opts);                    return  this.css("border",  o.borderStyle);          };            /*  global  defaults  */          $.fn.standout.defaults  =  {                  borderStyle  :  "1px  solid  #f00”                  debug:  window.console  &&  window.console.log          }              $(“div”).standout({debug:false})  
10. Support  “Per-­‐Element”  Configura)on          /*  plugin  code  */          $.fn.standout  =  func)on(opts)                    var  o  =  $.extend({},  $.fn.standout.defaults,  opts);                    return  this.each(func)on()  {                            var  t  =  $(this);                            var  eo  =  $.meta  ?  $.extend({},  o,  t.data())  :  o;                            t.css("border",  eo.borderStyle);                  });            };     <div  class=“{borderStyle:  ‘1px  solid  blue’}”></div>  
11. Sta)c  Plugins  
12. getParam  Method   (func)on($){          /*  extract  a  parameter  from  URL  */          $.getParam  =  func)on(name)  {                  var  param  =  new  RegExp(                          '[\\?&]'  +  name  +  '=([^&#]*)’                  ).exec(window.loca)on.href);                    return  (param)  ?  param[1]  :  null;          };   })(jQuery);     //  hip://www.mysite.com/?username=jameshu   $.getParam(“username”);    //  <-­‐-­‐  “jameshu”  
13. getParam  Method  (Alterna)ve)          $.extend({                  /*  extract  a  parameter  from  URL  */                    getParam  :  func)on(name)  {                          var  param  =  new  RegExp(                                  '[\\?&]'  +  name  +  '=([^&#]*)’                          ).exec(window.loca)on.href);                            return  (param)  ?  param[1]  :  null;                  }            });  
14. Pseudo  Selectors  
15. Modified  Input  Field  Selector   /*  Add  Modified  Input  Field  Selector*/   $.extend($.expr[':'],  {                  modified:  func)on(el,  idx,  tokens)  {    /*  tokens[3]  =  args*/                              return  $(el).is("input")  &&  el.defaultValue  !=  el.value;                  }   });     /*  Clear  all  modified  input  elements  */   $("input:modified")  .val(“”);  
16. Ques)ons?