initial commit
This commit is contained in:
chenjinsong
347
WebRoot/js/jquery.smartWizard-2.0.js
Normal file
347
WebRoot/js/jquery.smartWizard-2.0.js
Normal file
@@ -0,0 +1,347 @@
|
||||
/*
|
||||
* SmartWizard 2.0 plugin
|
||||
* jQuery Wizard control Plugin
|
||||
* by Dipu
|
||||
*
|
||||
* http://www.techlaboratory.net
|
||||
* http://tech-laboratory.blogspot.com
|
||||
*/
|
||||
|
||||
(function($){
|
||||
$.fn.smartWizard = function(action) {
|
||||
var options = $.extend({}, $.fn.smartWizard.defaults, action);
|
||||
var args = arguments;
|
||||
|
||||
return this.each(function(){
|
||||
var obj = $(this);
|
||||
var curStepIdx = options.selected;
|
||||
var steps = $("ul > li > a[href^='#step-']", obj); // Get all anchors in this array
|
||||
var contentWidth = 0;
|
||||
var loader,msgBox,elmActionBar,elmStepContainer,btNext,btPrevious,btFinish;
|
||||
|
||||
elmActionBar = $('.actionBar',obj);
|
||||
if(elmActionBar.length == 0){
|
||||
elmActionBar = $('<div></div>').addClass("actionBar");
|
||||
}
|
||||
|
||||
msgBox = $('.msgBox',obj);
|
||||
if(msgBox.length == 0){
|
||||
msgBox = $('<div class="msgBox"><div class="content"></div><a href="#" class="close">X</a></div>');
|
||||
elmActionBar.append(msgBox);
|
||||
}
|
||||
|
||||
$('.close',msgBox).click(function() {
|
||||
msgBox.fadeOut("normal");
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
// Method calling logic
|
||||
if (!action || action === 'init' || typeof action === 'object') {
|
||||
init();
|
||||
}else if (action === 'showMessage') {
|
||||
//showMessage(Array.prototype.slice.call( args, 1 ));
|
||||
var ar = Array.prototype.slice.call( args, 1 );
|
||||
showMessage(ar[0]);
|
||||
return true;
|
||||
}else if (action === 'setError') {
|
||||
var ar = Array.prototype.slice.call( args, 1 );
|
||||
setError(ar[0].stepnum,ar[0].iserror);
|
||||
return true;
|
||||
} else {
|
||||
$.error( 'Method ' + action + ' does not exist' );
|
||||
}
|
||||
|
||||
function init(){
|
||||
var allDivs =obj.children('div'); //$("div", obj);
|
||||
obj.children('ul').addClass("anchor");
|
||||
allDivs.addClass("content");
|
||||
// Create Elements
|
||||
loader = $('<div>Loading</div>').addClass("loader");
|
||||
elmActionBar = $('<div></div>').addClass("actionBar");
|
||||
elmStepContainer = $('<div></div>').addClass("stepContainer");
|
||||
btNext = $('<a>'+options.labelNext+'</a>').attr("href","#").addClass("buttonNext");
|
||||
btPrevious = $('<a>'+options.labelPrevious+'</a>').attr("href","#").addClass("buttonPrevious");
|
||||
btFinish = $('<a>'+options.labelFinish+'</a>').attr("href","#").addClass("buttonFinish");
|
||||
// highlight steps with errors
|
||||
if(options.errorSteps && options.errorSteps.length>0){
|
||||
$.each(options.errorSteps, function(i, n){
|
||||
setError(n,true);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
elmStepContainer.append(allDivs);
|
||||
elmActionBar.append(loader);
|
||||
obj.append(elmStepContainer);
|
||||
obj.append(elmActionBar);
|
||||
if (options.includeFinishButton) {
|
||||
elmActionBar.append(btFinish);
|
||||
}
|
||||
elmActionBar.append(btNext).append(btPrevious);
|
||||
contentWidth = elmStepContainer.width();
|
||||
|
||||
$(btNext).click(function() {
|
||||
if($(this).hasClass('buttonDisabled')){
|
||||
return false;
|
||||
}
|
||||
if(checkDate(curStepIdx+1)){
|
||||
doForwardProgress();
|
||||
}
|
||||
return false;
|
||||
});
|
||||
$(btPrevious).click(function() {
|
||||
if($(this).hasClass('buttonDisabled')){
|
||||
return false;
|
||||
}
|
||||
doBackwardProgress();
|
||||
return false;
|
||||
});
|
||||
$(btFinish).click(function() {
|
||||
if(!$(this).hasClass('buttonDisabled')){
|
||||
if($.isFunction(options.onFinish)) {
|
||||
if(!options.onFinish.call(this,$(steps))){
|
||||
return false;
|
||||
}
|
||||
}else{
|
||||
var frm = obj.parents('form');
|
||||
if(frm && frm.length){
|
||||
frm.submit();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$(steps).bind("click", function(e){
|
||||
if(steps.index(this) == curStepIdx){
|
||||
return false;
|
||||
}
|
||||
var nextStepIdx = steps.index(this);
|
||||
var isDone = steps.eq(nextStepIdx).attr("isDone") - 0;
|
||||
if(isDone == 1){
|
||||
LoadContent(nextStepIdx);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
// Enable keyboard navigation
|
||||
if(options.keyNavigation){
|
||||
$(document).keyup(function(e){
|
||||
if(e.which==39){ // Right Arrow
|
||||
doForwardProgress();
|
||||
}else if(e.which==37){ // Left Arrow
|
||||
doBackwardProgress();
|
||||
}
|
||||
});
|
||||
}
|
||||
// Prepare the steps
|
||||
prepareSteps();
|
||||
// Show the first slected step
|
||||
LoadContent(curStepIdx);
|
||||
}
|
||||
|
||||
function prepareSteps(){
|
||||
if(!options.enableAllSteps){
|
||||
$(steps, obj).removeClass("selected").removeClass("done").addClass("disabled");
|
||||
$(steps, obj).attr("isDone",0);
|
||||
}else{
|
||||
$(steps, obj).removeClass("selected").removeClass("disabled").addClass("done");
|
||||
$(steps, obj).attr("isDone",1);
|
||||
}
|
||||
|
||||
$(steps, obj).each(function(i){
|
||||
$($(this).attr("href"), obj).hide();
|
||||
$(this).attr("rel",i+1);
|
||||
});
|
||||
}
|
||||
|
||||
function LoadContent(stepIdx){
|
||||
var selStep = steps.eq(stepIdx);
|
||||
var ajaxurl = options.contentURL;
|
||||
var hasContent = selStep.data('hasContent');
|
||||
stepNum = stepIdx+1;
|
||||
if(ajaxurl && ajaxurl.length>0){
|
||||
if(options.contentCache && hasContent){
|
||||
showStep(stepIdx);
|
||||
}else{
|
||||
$.ajax({
|
||||
url: ajaxurl,
|
||||
type: "POST",
|
||||
data: ({step_number : stepNum}),
|
||||
dataType: "text",
|
||||
beforeSend: function(){ loader.show(); },
|
||||
error: function(){loader.hide();},
|
||||
success: function(res){
|
||||
loader.hide();
|
||||
if(res && res.length>0){
|
||||
selStep.data('hasContent',true);
|
||||
$($(selStep, obj).attr("href"), obj).html(res);
|
||||
showStep(stepIdx);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}else{
|
||||
showStep(stepIdx);
|
||||
}
|
||||
}
|
||||
|
||||
function showStep(stepIdx){
|
||||
var selStep = steps.eq(stepIdx);
|
||||
var curStep = steps.eq(curStepIdx);
|
||||
if(stepIdx != curStepIdx){
|
||||
if($.isFunction(options.onLeaveStep)) {
|
||||
if(!options.onLeaveStep.call(this,$(curStep))){
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (options.updateHeight)
|
||||
elmStepContainer.height($($(selStep, obj).attr("href"), obj).outerHeight());
|
||||
if(options.transitionEffect == 'slide'){
|
||||
$($(curStep, obj).attr("href"), obj).slideUp("fast",function(e){
|
||||
$($(selStep, obj).attr("href"), obj).slideDown("fast");
|
||||
curStepIdx = stepIdx;
|
||||
SetupStep(curStep,selStep);
|
||||
});
|
||||
} else if(options.transitionEffect == 'fade'){
|
||||
$($(curStep, obj).attr("href"), obj).fadeOut("fast",function(e){
|
||||
$($(selStep, obj).attr("href"), obj).fadeIn("fast");
|
||||
curStepIdx = stepIdx;
|
||||
SetupStep(curStep,selStep);
|
||||
});
|
||||
} else if(options.transitionEffect == 'slideleft'){
|
||||
var nextElmLeft = 0;
|
||||
var curElementLeft = 0;
|
||||
if(stepIdx > curStepIdx){
|
||||
nextElmLeft1 = contentWidth + 10;
|
||||
nextElmLeft2 = 0;
|
||||
curElementLeft = 0 - $($(curStep, obj).attr("href"), obj).outerWidth();
|
||||
} else {
|
||||
nextElmLeft1 = 0 - $($(selStep, obj).attr("href"), obj).outerWidth() + 20;
|
||||
nextElmLeft2 = 0;
|
||||
curElementLeft = 10 + $($(curStep, obj).attr("href"), obj).outerWidth();
|
||||
}
|
||||
if(stepIdx == curStepIdx){
|
||||
nextElmLeft1 = $($(selStep, obj).attr("href"), obj).outerWidth() + 20;
|
||||
nextElmLeft2 = 0;
|
||||
curElementLeft = 0 - $($(curStep, obj).attr("href"), obj).outerWidth();
|
||||
}else{
|
||||
$($(curStep, obj).attr("href"), obj).animate({left:curElementLeft},"fast",function(e){
|
||||
$($(curStep, obj).attr("href"), obj).hide();
|
||||
});
|
||||
}
|
||||
|
||||
$($(selStep, obj).attr("href"), obj).css("left",nextElmLeft1);
|
||||
$($(selStep, obj).attr("href"), obj).show();
|
||||
$($(selStep, obj).attr("href"), obj).animate({left:nextElmLeft2},"fast",function(e){
|
||||
curStepIdx = stepIdx;
|
||||
SetupStep(curStep,selStep);
|
||||
});
|
||||
} else{
|
||||
$($(curStep, obj).attr("href"), obj).hide();
|
||||
$($(selStep, obj).attr("href"), obj).show();
|
||||
curStepIdx = stepIdx;
|
||||
SetupStep(curStep,selStep);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function SetupStep(curStep,selStep){
|
||||
$(curStep, obj).removeClass("selected");
|
||||
$(curStep, obj).addClass("done");
|
||||
|
||||
$(selStep, obj).removeClass("disabled");
|
||||
$(selStep, obj).removeClass("done");
|
||||
$(selStep, obj).addClass("selected");
|
||||
$(selStep, obj).attr("isDone",1);
|
||||
adjustButton();
|
||||
if($.isFunction(options.onShowStep)) {
|
||||
if(!options.onShowStep.call(this,$(selStep))){
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function doForwardProgress(){
|
||||
var nextStepIdx = curStepIdx + 1;
|
||||
if(steps.length <= nextStepIdx){
|
||||
if(!options.cycleSteps){
|
||||
return false;
|
||||
}
|
||||
nextStepIdx = 0;
|
||||
}
|
||||
LoadContent(nextStepIdx);
|
||||
}
|
||||
|
||||
function doBackwardProgress(){
|
||||
var nextStepIdx = curStepIdx-1;
|
||||
if(0 > nextStepIdx){
|
||||
if(!options.cycleSteps){
|
||||
return false;
|
||||
}
|
||||
nextStepIdx = steps.length - 1;
|
||||
}
|
||||
LoadContent(nextStepIdx);
|
||||
}
|
||||
|
||||
function adjustButton(){
|
||||
if(!options.cycleSteps){
|
||||
if(0 >= curStepIdx){
|
||||
$(btPrevious).addClass("buttonDisabled");
|
||||
}else{
|
||||
$(btPrevious).removeClass("buttonDisabled");
|
||||
}
|
||||
if((steps.length-1) <= curStepIdx){
|
||||
$(btNext).addClass("buttonDisabled");
|
||||
}else{
|
||||
$(btNext).removeClass("buttonDisabled");
|
||||
}
|
||||
}
|
||||
// Finish Button
|
||||
if(!steps.hasClass('disabled') || options.enableFinishButton){
|
||||
$(btFinish).removeClass("buttonDisabled");
|
||||
}else{
|
||||
$(btFinish).addClass("buttonDisabled");
|
||||
}
|
||||
}
|
||||
|
||||
function showMessage(msg){
|
||||
$('.content',msgBox).html(msg);
|
||||
msgBox.show();
|
||||
}
|
||||
|
||||
function setError(stepnum,iserror){
|
||||
if(iserror){
|
||||
$(steps.eq(stepnum-1), obj).addClass('error')
|
||||
}else{
|
||||
$(steps.eq(stepnum-1), obj).removeClass("error");
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Default Properties and Events
|
||||
$.fn.smartWizard.defaults = {
|
||||
selected: 0, // Selected Step, 0 = first step
|
||||
keyNavigation: true, // Enable/Disable key navigation(left and right keys are used if enabled)
|
||||
enableAllSteps: false,
|
||||
updateHeight: true,
|
||||
transitionEffect: 'fade', // Effect on navigation, none/fade/slide/slideleft
|
||||
contentURL:null, // content url, Enables Ajax content loading
|
||||
contentCache:true, // cache step contents, if false content is fetched always from ajax url
|
||||
cycleSteps: false, // cycle step navigation
|
||||
includeFinishButton: true, // whether to show a Finish button
|
||||
enableFinishButton: false, // make finish button enabled always
|
||||
errorSteps:[], // Array Steps with errors
|
||||
labelNext:'下一步',
|
||||
labelPrevious:'上一步',
|
||||
labelFinish:'完成',
|
||||
onLeaveStep: null, // triggers when leaving a step
|
||||
onShowStep: null, // triggers when showing a step
|
||||
onFinish: null // triggers when Finish button is clicked
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user