[英]Calling a Function thats inside a plugin from another .js file
I have reviewed many other related question, but still am unable to get this to work. 我已经审查了许多其他相关问题,但仍然无法解决这个问题。
This is the Plugin: 这是插件:
(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);
This is how I am calling: 这就是我所说的:
<span class="LinkMe" onclick="showStep(0);">
I understand that using a selector to grab the click event is preferable. 我知道最好使用选择器来捕获click事件。
How do I properly call the showStep() function, or is it not possible? 如何正确调用showStep()函数,还是不可能?
EDIT: 编辑:
<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>
showStep
is not visible in the global scope, which is why DOM0 binding doesn't work. showStep
在全局范围内不可见,这就是DOM0绑定不起作用的原因。
The only way this will work is if you expose the showStep
function in the global scope, which requires changing the source code inside the plugin. 这将工作的唯一方法是,如果你暴露showStep
在全球范围内,这就要求改变插件里面的源代码的功能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.