jQuery Plugin Development Pattern

May 7th, 2009

Here is an example of the Plugin Development Pattern with tabs. You can download a copy of it here.

Tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium aliquet risus a tristique. Proin pellentesque, urna sit amet vestibulum mollis, leo magna placerat ligula, ac tincidunt urna libero in nisi. Quisque blandit lorem id libero pulvinar vel viverra urna consequat. Sed nisl nibh, condimentum vel tincidunt in, bibendum id magna. Pellentesque eleifend est sed odio sollicitudin ultricies. Morbi porta metus nec nulla imperdiet pulvinar. Sed tincidunt augue id dui consectetur eleifend. Sed sit amet eros sit amet est viverra tristique. Quisque lorem tellus, faucibus sed vulputate nec, malesuada ac libero. Nulla facilisi. Morbi tincidunt sagittis enim, in viverra lorem mollis eget. In hac habitasse platea dictumst. Vivamus nec fermentum neque. Nulla facilisi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium aliquet risus a tristique. Proin pellentesque, urna sit amet vestibulum mollis, leo magna placerat ligula, ac tincidunt urna libero in nisi. Quisque blandit lorem id libero pulvinar vel viverra urna consequat. Sed nisl nibh, condimentum vel tincidunt in, bibendum id magna. Pellentesque eleifend est sed odio sollicitudin ultricies. Morbi porta metus nec nulla imperdiet pulvinar. Sed tincidunt augue id dui consectetur eleifend. Sed sit amet eros sit amet est viverra tristique. Quisque lorem tellus, faucibus sed vulputate nec, malesuada ac libero. Nulla facilisi. Morbi tincidunt sagittis enim, in viverra lorem mollis eget. In hac habitasse platea dictumst. Vivamus nec fermentum neque. Nulla facilisi.
Tab 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium aliquet risus a tristique. Proin pellentesque, urna sit amet vestibulum mollis, leo magna placerat ligula, ac tincidunt urna libero in nisi. Quisque blandit lorem id libero pulvinar vel viverra urna consequat. Sed nisl nibh, condimentum vel tincidunt in, bibendum id magna. Pellentesque eleifend est sed odio sollicitudin ultricies. Morbi porta metus nec nulla imperdiet pulvinar. Sed tincidunt augue id dui consectetur eleifend. Sed sit amet eros sit amet est viverra tristique. Quisque lorem tellus, faucibus sed vulputate nec, malesuada ac libero. Nulla facilisi. Morbi tincidunt sagittis enim, in viverra lorem mollis eget. In hac habitasse platea dictumst. Vivamus nec fermentum neque. Nulla facilisi.

Tab 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium aliquet risus a tristique. Proin pellentesque, urna sit amet vestibulum mollis, leo magna placerat ligula, ac tincidunt urna libero in nisi. Quisque blandit lorem id libero pulvinar vel viverra urna consequat. Sed nisl nibh, condimentum vel tincidunt in, bibendum id magna. Pellentesque eleifend est sed odio sollicitudin ultricies. Morbi porta metus nec nulla imperdiet pulvinar. Sed tincidunt augue id dui consectetur eleifend. Sed sit amet eros sit amet est viverra tristique. Quisque lorem tellus, faucibus sed vulputate nec, malesuada ac libero. Nulla facilisi. Morbi tincidunt sagittis enim, in viverra lorem mollis eget. In hac habitasse platea dictumst. Vivamus nec fermentum neque. Nulla facilisi.

  1. (function($){
  2.     $.fn.tabs = function(tabOptions) {
  3.         // support mutltiple elements
  4.         if (this.length > 1){
  5.             this.each(function() { $(this).tabs(tabOptions) });
  6.             return this;
  7.         }
  9.         // SETUP private variabls;
  10.         var tabs = this;
  13.         var baseOptions = {
  14.             tabsClass: ‘.tabList li’,
  15.             tabsSelected: ‘.selected’,
  16.             tabPanels: ‘.tab’,
  17.             tabPrefix: ‘.tab’,
  18.             debug: false
  19.         };
  21.         // SETUP private functions;
  22.         var callbacks = function(thisObject, functionList) {
  23.             var returnValue = true;
  24.             if ($.isFunction(functionList)){
  25.                 returnValue = functionList.call(thisObject);
  26.             }else if ($.isArray(functionList)){
  27.                 for (var i = 0; i < functionList.length; i++){
  28.                     returnValue = functionList[i].call(thisObject);
  29.                 }
  30.             }
  31.             return returnValue;
  32.         };
  34.         // setup options
  35.         var options = $.extend({}, baseOptions, tabOptions);
  36.         
  37.         var intialize = function() {
  38.                 // support MetaData plugin
  39.                 if ($.meta){
  40.                     options = $.extend({}, options, this.data());
  41.                 }
  43.                 // Scope selectors
  44.                 $(options.tabsClass, tabs).click( function(e){
  45.                                                                 tabs.changeTab(this);
  46.                                                             });
  47.                 tabs.changeTab($(options.tabsSelected, tabs).get(0));
  48.         };
  50.         this.changeTab = function(element) {
  51.               var newTabIndex = 0;
  52.               $(options.tabsClass, this).each(function(){
  53.                    if (this == element) {
  54.                         tabs.currentTab = newTabIndex;
  55.                         $(element).addClass(options.tabsSelected);
  56.                    } else {
  57.                         $(this).removeClass(options.tabsSelected);
  58.                    }
  59.                    newTabIndex++;
  60.               });
  62.               var tabOptions = {};
  63.               if (options['tab' + tabs.currentTab] != undefined) {
  64.                    tabOptions = options['tab' + tabs.currentTab];
  65.               }
  67.               if (callbacks(this, tabOptions.beforeLoad)){
  68.                   $(options.tabPanels, this).hide();
  69.                   callbacks(this, tabOptions.onload);
  70.                   $(‘.tab’ + tabs.currentTab, this).show();
  71.                   callbacks(this, tabOptions.afterload);
  72.               }
  73.         };
  75.          
  76.          /**
  77.           * Debug Logging
  78.           * @param {Object} data
  79.           */
  80.          var log = function(data){
  81.               if (options.debug) {
  82.                    try {
  83.                         console.log(“%o: %o”, data, this);
  84.                    } catch (e) {
  85.                         $(‘BODY’).append($(“<div class=’error‘>” + data + “</div>”));
  86.                    }
  87.               }
  88.          };
  90.          this.getCurrentTab = function() {
  91.             return this.currentTab || 0;
  92.          }
  94.          intialize();
  96.         return this;
  97.     }
  98. })(jQuery);
Bookmark and Share
Comments are closed.