brite, a MVC Framework for jQuery

jQuery: Plugin Tutorial

April 18th, 2009 by jeremychone

The code below comes from the following tutorial, read it, it is an exceptionally good tutorial: Learning Query: A Plugin Development Pattern

// create closure
(function($) {
  //
  // plugin definition
  //
  $.fn.hilight = function(options) {
      debug(this);
      // build main options before element iteration
      var opts = $.extend({}, $.fn.hilight.defaults, options);
      // iterate and reformat each matched element
      return this.each(function() {
           $this = $(this);
           // build element specific options
           var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
           // update element styles
          $this.css({
              backgroundColor: o.background,
              color: o.foreground
          });
         var markup = $this.html();
         // call our format function
         markup = $.fn.hilight.format(markup);
         $this.html(markup);

     }); // /return this.each(function()

   }; // /$.fn.hilight = function(options) {

  //
  // private function for debugging
  //
  function debug($obj) {
      if (window.console && window.console.log)
      window.console.log('hilight selection count: ' + $obj.size());
  };

  //
  // define and expose our format function
  //
  $.fn.hilight.format = function(txt) {
      return '<strong>' + txt + '</strong>';
  };

  //
  // plugin defaults
  //
  $.fn.hilight.defaults = {
     foreground: 'red',
     background: 'yellow'
  };
//
// end of closure
//
})(jQuery);

Comments are closed.