jQUERY PLUGIN

OPTIONS

Allow user customize the plugin by using the options

OPTIONS

Using default options:

$.fn[pluginName].defaults = {
    time: 1000,
    key: 'customValue',
    onCallback: onCallBackHandler
};

//your callback function here
function onCallBackHandler() {
    //TODO
}

Default option has priority 03: it can be changed if use the data-* options or initialize by code.

OPTIONS

Using data-* for options:

<div data-plugin 
     data-time='1000' 
     data-key='customValue' 
     data-onCallback='onCallBackHandler'> MY PLUGIN </div>

<script>
    //your callback function here
    function onCallBackHandler() {
        //TODO
    }
</script>

data-* option has priority 02: it can be changed if initialize by code.

OPTIONS

Using options via code:

$('[data-' + pluginName + ']')[pluginName]({
    time: '1000',
    key: 'customValue',
    onCallback: onCallBackHandler
});

//your callback function here
function onCallBackHandler() {
    //TODO
}

data-* option has priority 01: it can rewrite options if they are initialized via default way or data-* way.

OPTIONS

Access options in plugin:

//here is data come for options:
this.options = $.extend({}, $.fn[pluginName].defaults, this.element.data(), options);


//and access data
var time = this.options.time;
var key = this.options.key;

if (this.options.onCallback) {
    //TODO:
    //this.options.onCallback(); 
}

PUBLIC METHODS

Write public methods via prototype:

Plugin.prototype.init = function() {
  //TODO    
};


//or
Plugin.prototype = {
    init: function() {
      //TODO    
    }
};

PUBLIC METHODS

Call public methods in plugin:

Plugin.prototype.init = function() {
    this.play();
};

Plugin.prototype.publicMethod = function() {
    //TODO    
};

PUBLIC METHODS

Call public methods outside:

//replace pluginName by name of your plugin, and the same for play function:
$('[data-' + pluginName + ']')[pluginName]('publicMethod'); 

Pass parameters:

//pass parameter
$('[data-' + pluginName + ']')[publicMethod]('play', {
    firstParam: 1,
    secondParam: 2
}); 


//declare and use params
Plugin.prototype.publicMethod = function(firstParam, secondParam) {
    //TODO    
    //console.log(firstParam, secondParam);
};

PRIVATE VARIABLES & METHODS

Write private methods before plugin constructor:

//private variables and methods should be written here
var privateVar = null;

var privateMethod = function() {
    //TODO
};


//plugin constructor
function Plugin(element, options) {
    this.element = $(element);
    this.options = $.extend({}, $.fn[pluginName].defaults, this.element.data(), options);

    this.init();
};

PRIVATE VARIABLES & METHODS

Access private vars or methods:

//private variables and methods should be written here
var privateVar = null;

var privateMethod = function() {
    //TODO
};


//plugin constructor
function Plugin(element, options) {
    this.element = $(element);
    this.options = $.extend({}, $.fn[pluginName].defaults, this.element.data(), options);

    
    //call private var and method
    if (privateVar) {
        privateMethod();
    }
};

TRIGGER 

Fire event so that the outside can listen:

var EVENT_NAME = 'customEvent';
var data1 = 1;
var data2 = {};

//trigger event here
this.element.trigger(EVENT_NAME, [data1 , data2]);

Fire event so that the outside can listen:

$('[data-' + pluginName + ']').on('customEvent', function(evt, param1, param2) {
    //TODO
    console.log(param1, param2);

});

TRIGGER 

Fire event by jQuery.Event:

var EVENT_NAME = 'customEvent';

var evt = jQuery.Event(EVENT_NAME);
evt.data1 = "foo";
evt.data2 = "bar";

this.element.trigger(evt);

Listen and handle custom event:

$('[data-' + pluginName + ']').on('customEvent', function(evt) {
    //TODO
    console.log(evt.data1, evt.data2);
});

TIPS & TRICKS

Don't forget to keep ';' character, avoid concat error:

;(function($, window, undefined) {
  'use strict';

   ...
};

TIPS & TRICKS

Store the elements to use in plugin:

Plugin.prototype.init = function() {
    this.vars = {
        items: this.elements.find('.item');
    };

    //use variables
    this.vars.items.each(function(item) {
        //TODO
    });
    
};

TIPS & TRICKS

Wrap the other plugin for maintenance:

Plugin.prototype.init = function() {
    this.vars = {
        item: this.elements.find('#item');
    };

    this.vars.item.slick();

    // On swipe event
    this.vars.item.on('swipe', function(event, slick, direction){
      //TODO
    });
    
    // On edge hit
    this.vars.item.on('edge', function(event, slick, direction){
      //TODO
    });
    
    // On before slide change
    this.vars.item.on('beforeChange', function(event, slick, currentSlide, nextSlide){
      //TODO
    });    
};

TIPS & TRICKS

Pass plugin scope to private methods:

function privateMethod() {
    var items =  this.vars.items;
    var time = this.options.time;

    //TODO
};

Plugin.prototype.init = function() {
    var that = this;
      
    this.vars = {
        items: this.element.find('.item')
    };

      
    privateMethod.call(this, []);
};