我已经查看了许多其他相关问题,但仍然无法使其正常工作。
这是插件:
(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;
}
doForwardProgress();
if ($.isFunction(options.onNext)) {
if (!options.onNext.call(this, $(steps))) {
}
}
return false;
});
$(btPrevious).click(function() {
if($(this).hasClass('buttonDisabled')){
return false;
}
doBackwardProgress();
if ($.isFunction(options.onPrevious)) {
if (!options.onPrevious.call(this, $(steps))) {
}
}
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: false, // whether to show a Finish button
enableFinishButton: false, // make finish button enabled always
errorSteps:[], // Array Steps with errors
labelNext:'Next',
labelPrevious:'Previous',
labelFinish:'Finish',
onLeaveStep: null, // triggers when leaving a step
onShowStep: null, // triggers when showing a step
onFinish: null, // triggers when Finish button is clicked
onNext: null, // triggers when Finish button is clicked
onPrevious: null // triggers when Finish button is clicked
};
})(jQuery);
这就是我所说的:
<span class="LinkMe" onclick="showStep(0);">
我知道最好使用选择器来获取点击事件。
如何正确调用 showStep() 函数,还是不可能?
编辑:
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$('#wizard').smartWizard({
selected: 0, // Selected Step, 0 = first step
keyNavigation: true, // Enable/Disable key navigation(left and right keys are used if enabled)
enableAllSteps: true, // Enable/Disable all steps on first load
transitionEffect: 'fade', // Effect on navigation, none/fade/slide/slideleft
contentURL: null, // specifying 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
enableFinishButton: true, // makes finish button enabled always
errorSteps: [], // array of step numbers to highlighting as error steps
labelNext: 'Next', // label for Next button
labelPrevious: 'Previous', // label for Previous button
labelFinish: 'Buy Now', // label for Finish button
// Events
onLeaveStep: null, // triggers when leaving a step
onShowStep: ShowComp_Price, // triggers when showing a step
onFinish: null, // triggers when Finish button is clicked
onNext: NextBtnClick, // triggers when Next button is clicked
onPrevious: PrevBtnClick // triggers when Previous button is clicked
});
})
})(jQuery)
</script>