2013-04-25 144 views
0

我已經查看了很多其他相關的問題,但仍然無法使其工作。從另一個.js文件調用插件內部的函數

這是插件:

(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);"> 

據我所知,使用選擇抓住click事件是優選的。

如何正確調用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> 
+0

你是如何初始化插件的? – iGanja 2013-04-25 22:41:47

回答

1

showStep是不是在全球範圍內,這就是爲什麼DOM0結合不起作用可見。

工作是,如果你在全球範圍內,這就要求改變插件裏面的源代碼暴露showStep功能的唯一途徑。

+0

是否可以添加一個可以暴露於全局範圍但從變量中拉出的新函數? – DirtyRedz 2013-04-25 22:38:51

+0

不是。變量是函數作用域;根據定義,它們不能在它們所在的函數之外訪問。 – 2013-04-25 22:45:47

+0

您是否認爲在插件中添加類/標識處理程序將起作用? – DirtyRedz 2013-04-25 22:57:38

相關問題