找出最后一步 Jquery 智能向导 5?

cho*_*bo2 0 jquery smart-wizard

我想在最后一步显示一个“完成”按钮。我正在使用jquery 智能向导

我没有看到任何内置方法来确定我是否处于最后一步?我错过了什么吗?

$(文档).ready(函数(){

  // Toolbar extra buttons
  var btnFinish = $('<button></button>').text('Finish')
                                   .addClass('btn btn-info')
                                   .on('click', function(){ alert('Finish Clicked'); });
  var btnCancel = $('<button></button>').text('Cancel')
                                   .addClass('btn btn-danger')
                                   .on('click', function(){ $('#smartwizard').smartWizard("reset"); });

  // Step show event
  $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
      $("#prev-btn").removeClass('disabled');
      $("#next-btn").removeClass('disabled');
      if(stepPosition === 'first') {
          $("#prev-btn").addClass('disabled');
      } else if(stepPosition === 'last') {
          $("#next-btn").addClass('disabled');
      } else {
          $("#prev-btn").removeClass('disabled');
          $("#next-btn").removeClass('disabled');
      }
  });

  // Smart Wizard
  $('#smartwizard').smartWizard({
      selected: 0,
      theme: 'arrows',
      transition: {
          animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
      },
      toolbarSettings: {
          toolbarPosition: 'both', // both bottom
          toolbarExtraButtons: [btnFinish, btnCancel]
      }
  });

  // External Button Events
  $("#reset-btn").on("click", function() {
      // Reset wizard
      $('#smartwizard').smartWizard("reset");
      return true;
  });

  $("#prev-btn").on("click", function() {
      // Navigate previous
      $('#smartwizard').smartWizard("prev");
      return true;
  });

  $("#next-btn").on("click", function() {
      // Navigate next
      $('#smartwizard').smartWizard("next");
      return true;
  });


  // Demo Button Events
  $("#got_to_step").on("change", function() {
      // Go to step
      var step_index = $(this).val() - 1;
      $('#smartwizard').smartWizard("goToStep", step_index);
      return true;
  });

  $("#is_justified").on("click", function() {
      // Change Justify
      var options = {
        justified: $(this).prop("checked")
      };

      $('#smartwizard').smartWizard("setOptions", options);
      return true;
  });

  $("#dark_mode").on("click", function() {
      // Change dark mode
      var options = {
        darkMode: $(this).prop("checked")
      };

      $('#smartwizard').smartWizard("setOptions", options);
      return true;
  });

  $("#animation").on("change", function() {
      // Change theme
      var options = {
        transition: {
            animation: $(this).val()
        },
      };
      $('#smartwizard').smartWizard("setOptions", options);
      return true;
  });

  $("#theme_selector").on("change", function() {
      // Change theme
      var options = {
        theme: $(this).val()
      };
      $('#smartwizard').smartWizard("setOptions", options);
      return true;
  });
Run Code Online (Sandbox Code Playgroud)

});

小智 5

这就是我检测最后一步的方式

    $("#smartwizard").on("leaveStep", function(e, anchorObject, currentStepIndex, nextStepIndex, stepDirection) {
            if(anchorObject.prevObject.length - 1 == nextStepIndex){
                alert('this is the last step'); 
            }else{
                alert('this is not the last step');                
            }
        });
Run Code Online (Sandbox Code Playgroud)