Advance jquery-plugin

Advance Jquery Plugins

- Overview Jquery Plugin

- How to create a Jquery plugin

- How to apply, custom Jquery plugins

- Share some knowledge to debug issues related javascript/jquery

www.exoplatform.com - Copyright 2012 eXo Platform 2

Agenda

- Introduce some common jquery plugins

- Some rules of Jquery plugins development

- How to create a Jquery plugin

- How to custom Jquery plugins

- Share some knowledge related
javascript/jquery


Overview some jquery plugin

- Jquery plugin simple slideshow

- Jquery plugin rotator slider

- Jquery plugin modal/lightbox

- Jquery plugin dropdown menu


Some rules of Jquery plugin development


Naming your file


Naming prefix for all related files with your plugin

jquery.myplugin.js

jquery.myplugin.css


Register in Jquery.fn

(function($){
//Attach this new method to jQuery
$.fn.myplugin = function(instanceSettings) {
// code plugin in here...
}
})(jQuery);


Some rules of Jquery plugin development (Continue...)


Register in Jquery.fn(Continue...) :
(function($){
$.fn.extend({
// pluginname is myplugin – constructor should be myplugin
myplugin: function() {
}
});
})(jQuery);




Jquery plugin name same the method constructor
(function($){
$.fn.extend({
// pluginname is myplugin – constructor should be myplugin
}
});
})(jQuery);



Be aware, when use $ instead of Jquery, should be make sure it noConflict
var $ = jQuery.noConflict();

Recommend based on the fluent interface of Jquery plugin
(function($){
$.fn.extend({
return this.each(function() {
});
}
});
})(jQuery);



Handle sets one or multiple elements
(function($){
$.fn.extend({
return this.each(function() { //set for one or multiple elements
});
}
});
})(jQuery);




Make default options accessible from outside
function($){

$.fn.extend({

myplugin: function(options) {

var defaults = { speed: '500' ; color: '#ffff00'; }

var options = $.extend(defaults, options);


var o = options;

alert(o.color);

});

}

});

})(jQuery);

Create a JQuery plugin

Syntax:

(function($){
$.fn.extend({

//This is where you write your plugin's name
pluginname: function() {

//Iterate over the current set of matched elements
//code to be here
});
}
});
})(jQuery);


Create a Jquery plugin (continue...)

Optional:

(function($){
$.fn.extend({
//pass the options variable to the function
myplugin: function(options) {
//Set the default values, use comma to separate the settings, example:
var defaults = {
'foo' : 'bar'
}
var options = $.extend(defaults, options);
var o = options;
alert(o.foo);
});
}
});
})(jQuery);


Create a Jquery Plugin (Continue...)

Another way to create a simple plugin :

var myplugin = {
init: function() {
// initialize options, trigger on here
},
overlay: function(options) {
// Check options and call function with the option
},
withoutMask : function(object, option) {
// Create overlay popup without mask
},
maskEffect : function(object) {
// Cretae overlay popup with mask
}
}


Create a Jquery plugin (continue)

Use :

$(document).ready(function() {
$('#selector').myplugin({foo: 'foobar'});
});

$(document).ready(function() {
$(“.links”).click(function(e){
e.preventDefault();
// do something here
}) ;
});


Custom a Jquery plugin

- Use the unpack version of jquery plugin to custom.

- See the comment description default options of jquery plugin to understand what
does it mean.

- Try the function Constructor of the plugin to see initializations.

- Find the function animate to see how it works

- Custom jquery plugin follow your requirement.


Custom a Jquery plugin (Continue...)

Example: Custom jquery scrollContent plugin:

http://swip.codylindley.com/scrollContentDemo.html

- Custom a scrollContent to simple jquery slideshow

demo by code

- Custom a scrollContent to jquery slider

demo by code

- Custom animations and transitions

demo by code


Some ways debug and fixed issues related javascript


Use Firebug


Use function Console.log() to see the output


Use alert message of javascript


Demo by code


Question & Answer


Advance jquery-plugin

Recommended

More Related Content

What's hot (19)

Viewers also liked (7)

Similar to Advance jquery-plugin (20)

More from adm_exoplatform (8)

Recently uploaded (20)

Advance jquery-plugin