This is sample on how to make a jquery plugin with option. This is a multi step plugin and it is very useful in forms. Hope this will help!..
(function($){
$.fn.rPrevNext = function(options){
// the default options
var defaults = {
autoNavigation:true,
prevCaption:'prev',
nextCaption:'next',
navImage:false,
prevImage:'',
nextImage:'',
pageContainer:'pageCont',
pageOf:false,
pagination:false
}
// to override the defaults of each option
var options = $.extend(defaults, options);
return this.each(function(){
// declaration of variables
var cont = $(this);
var pages = $(this).children();
var pagef = cont.children().first();
var pagel = cont.children().last();
//if TRUE - enable auto navigation , if FALSE - manually put the navigation
//put a class prevP and nextP in your buttons.
if(options.autoNavigation){
//set the navigation either pure text/image
if(options.navImage){
//if TRUE - image
cont.append('<a href="javascript:void(0);" class="prevP"><img src="'+ options.prevImage +'"/></a> <a href="javascript:void(0);" class="nextP"><img src="'+ options.nextImage +'"/></a>');
}
else{
//if false - text
cont.append('<a href="javascript:void(0);" class="prevP">'+ options.prevCaption +'</a> <a href="javascript:void(0);" class="nextP">'+ options.nextCaption +'</a>');
}
}
//if TRUE - display example "Page 1 of 5"
//if FALSE - manually put a <div>,<span>or etc.. and put a class="pageCounter", this will display your current page number
//if FALSE - manually put a <div>,<span>or etc.. and put a class="pageLength", this will count the number of pages you have
if(options.pageOf){
cont.after('<div class="pageCont">Page <span class="pageCounter"></span> of <span class="pageLength"></span>.</div>');
}
//if TRUE - automatically display pagination after container
//if FALSE - manually put a <div> and class it with pagi
if(options.pagination){
cont.after('<div class="pagi"></div>');
var x=pages.length;
for(var y=1; y<=x;y++){
jQuery(".pagi").append('<a href="javascript:void(0);" class="'+y+'">'+y+'</a>');
}
}
else{
var x=pages.length;
for(var y=1; y<=x;y++){
jQuery(".pagi").append('<span><a href="javascript:void(0);" rel="'+y+'">'+y+'</a></span>');
}
}
// set the page containers class
pages.each(function(){
$(this).addClass(''+ options.pageContainer +'').css("display","none");
});
// onload functions, css or any codes
cont.ready(function(){
$(".current").css("display","block");
cont.css("clear","both");
showFirstPage();
navShowHide();
pageNumber();
$(".pagi a").first().addClass("oncurr");
});
// set onclick for previous
$("a.prevP").click(function(){
$(".current").hide();
$(".current").prev("div").addClass("current").show();
$(".current").eq(1).removeClass("current");
navShowHide();
pageNumber();
addCurr();
});
// set onclick for next
$("a.nextP").click(function(){
$(".current").hide();
$(".current").next("div").addClass("current").show();
$(".current").eq(0).removeClass("current");
navShowHide();
pageNumber();
addCurr();
});
// set onclick for the pagination numbers
$(".pagi a").click(function(){
var z=jQuery(this).attr("rel");
var disPlay=pages.eq(z-1);
$(".pagi a").removeClass("oncurr");
$(this).addClass("oncurr");
pages.removeClass("current").css("display","none");
disPlay.addClass("current").css("display","block");
navShowHide();
pageNumber();
});
// -----R-------------------N------ //
// -----E------FUNCTIONS----E------ //
// -----Y-------------------IL----- //
// for the navigation(next/previous) either show or hide
function navShowHide(){
var isFirst=pagef.hasClass("current");
if(isFirst){
$(".prevP").css("display","none");
}
else{
$(".prevP").show();
}
var isLast=pagel.hasClass("current");
if(isLast){
$(".nextP").css("display","none");
}
else{
$(".nextP").show();
}
}
// to show the first page of the multi-step
function showFirstPage(){
pagef.addClass("current").css("display","block");
}
// to display the current page number(must be inside class="pageCounter")
//and the total number of pages (must be inside class="pageLength")
function pageNumber(){
var pageL=pages.length;
pages.each(function(a,b){
var found =jQuery(this).hasClass("current");
jQuery(".pageLength").text(pageL);
if(found){
jQuery(".pageCounter").text(a+1);
}
});
}
// add class oncurr to the pagination
function addCurr(){
pages.each(function(x,y){
var curr=$(this).hasClass("current");
if(curr){
jQuery(".pagi a").removeClass("oncurr");
jQuery(".pagi a").eq(x).addClass("oncurr");
}
});
}
});
};
})(jQuery);
/*
* NOTE:Don't put any comma(,) after the last option because
* it is considered as an error in IE. Therefore leave it
* blank.
*
* Default setting of the plug-in
* autoNavigation:true,
* prevCaption:'prev',
* nextCaption:'next',
* navImage:false,
* prevImage:'',
* nextImage:'',
* pageContainer:'pageCont',
* pageOf:false,
* pagination:false
*
* How to use this plugin.
* Example:
* jQuery("#container").rPrevNext({
* autoNavigation:true,
* prevCaption:'PREV',
* nextCaption:'NEXT',
* navImage:false,
* pageContainer:'box',
* prevImage:'images/btnPrevious.png',
* nextImage:'images/btnNext.png'
* pageOf:true,
* pagination:true
* });
*/
No comments:
Post a Comment