You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
200 lines
6.5 KiB
200 lines
6.5 KiB
/* ========================================================
|
|
* easyWizard v1
|
|
* http://st3ph.github.com/jquery.easyWizard
|
|
* ========================================================
|
|
* Copyright 2012 Stéphane Litou
|
|
*
|
|
* Dual licensed under the MIT or GPL Version 2 licenses.
|
|
* http://www.opensource.org/licenses/mit-license.php
|
|
* http://www.opensource.org/licenses/GPL-2.0
|
|
* ======================================================== */
|
|
(function( $ ) {
|
|
var arrSettings = new Array();
|
|
var easyWizardMethods = {
|
|
init : function(options) {
|
|
var settings = $.extend( {
|
|
'stepClassName' : 'step',
|
|
'showSteps' : true,
|
|
'stepsText' : '{n} {t}',
|
|
'showButtons' : true,
|
|
'buttonsClass' : '',
|
|
'prevButton' : '« Back',
|
|
'nextButton' : 'Next »',
|
|
'debug' : false,
|
|
'submitButton': true,
|
|
'submitButtonText': 'Submit',
|
|
'submitButtonClass': '',
|
|
before: function(wizardObj, currentStepObj, nextStepObj) {},
|
|
after: function(wizardObj, prevStepObj, currentStepObj) {},
|
|
beforeSubmit: function(wizardObj) {
|
|
wizardObj.find('input, textarea').each(function() {
|
|
if(!this.checkValidity()) {
|
|
this.focus();
|
|
step = $(this).parents('.'+thisSettings.stepClassName).attr('data-step');
|
|
easyWizardMethods.goToStep.call(wizardObj, step);
|
|
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
}, options);
|
|
|
|
arrSettings[this.index()] = settings;
|
|
|
|
return this.each(function() {
|
|
thisSettings = settings;
|
|
|
|
$this = $(this); // Wizard Obj
|
|
$this.addClass('easyWizardElement');
|
|
$steps = $this.find('.'+thisSettings.stepClassName);
|
|
thisSettings.steps = $steps.length;
|
|
thisSettings.width = $(this).width();
|
|
|
|
if(thisSettings.steps > 1) {
|
|
// Create UI
|
|
$this.wrapInner('<div class="easyWizardWrapper" />');
|
|
$this.find('.easyWizardWrapper').width(thisSettings.width * thisSettings.steps);
|
|
$this.css({
|
|
'position': 'relative',
|
|
'overflow': 'hidden'
|
|
}).addClass('easyPager');
|
|
|
|
$stepsHtml = $('<ul class="easyWizardSteps">');
|
|
|
|
$steps.each(function(index) {
|
|
step = index + 1;
|
|
$(this).css({
|
|
'float': 'left',
|
|
'width': thisSettings.width,
|
|
'height': '1px'
|
|
}).attr('data-step', step);
|
|
|
|
if(!index) {
|
|
$(this).addClass('active').css('height', '');
|
|
}
|
|
|
|
stepText = thisSettings.stepsText.replace('{n}', '<span>'+step+'</span>');
|
|
stepText = stepText.replace('{t}', $(this).attr('data-step-title'));
|
|
$stepsHtml.append('<li'+(!index?' class="current"':'')+' data-step="'+step+'">'+stepText+'</li>');
|
|
});
|
|
|
|
if(thisSettings.showSteps) {
|
|
$this.prepend($stepsHtml);
|
|
}
|
|
|
|
if(thisSettings.showButtons) {
|
|
paginationHtml = '<div class="easyWizardButtons">';
|
|
paginationHtml += '<button class="prev '+thisSettings.buttonsClass+'">'+thisSettings.prevButton+'</button>';
|
|
paginationHtml += '<button class="next '+thisSettings.buttonsClass+'">'+thisSettings.nextButton+'</button>';
|
|
paginationHtml += thisSettings.submitButton?'<button type="submit" class="submit '+thisSettings.submitButtonClass+'">'+thisSettings.submitButtonText+'</button>':'';
|
|
paginationHtml += '</div>';
|
|
$paginationBloc = $(paginationHtml);
|
|
$paginationBloc.css('clear', 'both');
|
|
$paginationBloc.find('.prev, .submit').hide();
|
|
$paginationBloc.find('.prev').bind('click.easyWizard', function(e) {
|
|
e.preventDefault();
|
|
|
|
$wizard = $(this).parents('.easyWizardElement');
|
|
easyWizardMethods.prevStep.apply($wizard);
|
|
});
|
|
|
|
$paginationBloc.find('.next').bind('click.easyWizard', function(e) {
|
|
e.preventDefault();
|
|
|
|
$wizard = $(this).parents('.easyWizardElement');
|
|
easyWizardMethods.nextStep.apply($wizard);
|
|
});
|
|
$this.append($paginationBloc);
|
|
}
|
|
|
|
$formObj = $this.is('form')?$this:$(this).find('form');
|
|
|
|
// beforeSubmit Callback
|
|
$this.find('[type="submit"]').bind('click.easyWizard', function(e) {
|
|
$wizard = $(this).parents('.easyWizardElement');
|
|
thisSettings.beforeSubmit($wizard);
|
|
return true;
|
|
});
|
|
}else if(thisSettings.debug) {
|
|
console.log('Can\'t make a wizard with only one step oO');
|
|
}
|
|
});
|
|
},
|
|
prevStep : function( ) {
|
|
thisSettings = arrSettings[this.index()];
|
|
$activeStep = this.find('.active');
|
|
if($activeStep.prev('.'+thisSettings.stepClassName).length) {
|
|
prevStep = parseInt($activeStep.attr('data-step')) - 1;
|
|
easyWizardMethods.goToStep.call(this, prevStep);
|
|
}
|
|
},
|
|
nextStep : function( ) {
|
|
thisSettings = arrSettings[this.index()];
|
|
$activeStep = this.find('.active');
|
|
if($activeStep.next('.'+thisSettings.stepClassName).length) {
|
|
nextStep = parseInt($activeStep.attr('data-step')) + 1;
|
|
easyWizardMethods.goToStep.call(this, nextStep);
|
|
}
|
|
},
|
|
goToStep : function(step) {
|
|
thisSettings = arrSettings[this.index()];
|
|
|
|
$activeStep = this.find('.active');
|
|
$nextStep = this.find('.'+thisSettings.stepClassName+'[data-step="'+step+'"]');
|
|
currentStep = $activeStep.attr('data-step');
|
|
|
|
// Before callBack
|
|
thisSettings.before(this, $activeStep, $nextStep);
|
|
|
|
// Define direction for sliding
|
|
if(currentStep < step) { // forward
|
|
leftValue = thisSettings.width * -1;
|
|
}else { // backward
|
|
leftValue = thisSettings.width;
|
|
}
|
|
|
|
// Slide !
|
|
$activeStep.animate({
|
|
height: '1px'
|
|
}).removeClass('active');
|
|
|
|
$nextStep.css('height', '').addClass('active');
|
|
|
|
this.find('.easyWizardWrapper').animate({
|
|
'margin-left': thisSettings.width * (step - 1) * -1
|
|
});
|
|
|
|
// Defines steps
|
|
this.find('.easyWizardSteps .current').removeClass('current');
|
|
this.find('.easyWizardSteps li[data-step="'+step+'"]').addClass('current');
|
|
|
|
// Define buttons
|
|
$paginationBloc = this.find('.easyWizardButtons');
|
|
if($paginationBloc.length) {
|
|
if(step == 1) {
|
|
$paginationBloc.find('.prev, .submit').hide();
|
|
$paginationBloc.find('.next').show();
|
|
}else if(step < thisSettings.steps) {
|
|
$paginationBloc.find('.submit').hide();
|
|
$paginationBloc.find('.prev, .next').show();
|
|
}else {
|
|
$paginationBloc.find('.next').hide();
|
|
$paginationBloc.find('.submit').show();
|
|
}
|
|
}
|
|
|
|
// After callBack
|
|
thisSettings.after(this, $activeStep, $nextStep);
|
|
}
|
|
};
|
|
|
|
$.fn.easyWizard = function(method) {
|
|
if ( easyWizardMethods[method] ) {
|
|
return easyWizardMethods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
|
} else if ( typeof method === 'object' || ! method ) {
|
|
return easyWizardMethods.init.apply( this, arguments );
|
|
} else {
|
|
$.error( 'Method ' + method + ' does not exist on jQuery.easyWizard' );
|
|
}
|
|
};
|
|
})(jQuery); |