标签: smart-wizard

我正在使用SmartWizard 2.0(链接),当用户点击"上一页"按钮或以任何方式向后移动表单时,我需要停止验证.

目前我正在使用

// Triggers whenever you change page/tab in wizard    
function leaveStep(obj) {        
    $("form").validate();
    if ($("form").valid())
        return true;

    return false;
}

我知道我可以用

var currentStep = obj.attr('rel'); // get the current step number

找到currentStep,但我需要知道用户导航的方式 - 所以我需要知道"nextStep".不知道这是否可行.

我正在使用这个 Jquery 插件来创建一个类似向导的界面：

JQuery Bootstrap 智能向导

我在向导中有 5 个步骤。第 3 步和第 4 步在向导首次加载时隐藏。

1. 当用户在步骤 2 中选择“是”单选按钮，然后单击“下一步”按钮时，它应该显示、启用并转到向导中的步骤 4。
2. 当用户在步骤 2 中选择“否”单选按钮，然后单击“下一步”按钮时，它应该显示、启用并转到向导中的步骤 3。

我面临的问题是，隐藏的步骤正在按需显示，但显示为禁用。因此，当我在第 2 步中单击“下一步”时，会显示隐藏的步骤，但未启用，因此会跳到第 5 步。

如何修复它以实现所需的行为？

这是我的代码：

<div id="smartwizard">
<ul>
    <li><a href="#step-1">Step 1<br /><small>Step 1</small></a></li>
    <li><a href="#step-2">Step 2<br /><small>Step 2</small></a></li>
    <li><a href="#step-3">Step 3<br /><small>Step 3</small></a></li>
    <li><a href="#step-4">Step 4<br /><small>Step 4</small></a></li>
    <li><a href="#step-5">Step 5<br /><small>Step 5</small></a></li>                
</ul>

<div>
    <div id="step-1" class="">
        This is the first step and it should be shown all the time.
    </div>
    <div id="step-2" class="">
        <div>Would you …

我正在使用jquery smartwizard ，当用户单击名为“创建”的按钮时，向导将在对话框中打开。当用户再次单击该按钮时，我希望向导重置并启动一个新的向导，但它保持其状态。如果我重新初始化它，那么它将再次添加下一个，上一个和完成按钮，并弄乱了整个向导UI。有什么想法可以重置智能向导吗？

所以我使用 smart-wizard https://github.com/mstratman/jQuery-Smart-Wizard。

我已将其包含在 js-popup 中，因此当我打开弹出窗口时，它不会显示第一步。我需要转到第二步，然后返回查看第一步

我在我的应用程序的表单中包含了 smartwizard，在插入过程中它运行良好。但是，在更新期间，我想显示访问过的所有步骤，以便用户无需单击下一步按钮，而是可以直接进入他/她想要的选项卡。我怎样才能做到这一点？我知道我可能需要在主 js 文件中的_setEvents函数中进行更改，即 jquery.smartWizard.min.js，但我似乎无法弄清楚..

我看到很多人在显示隐藏的 div 时遇到调整大小的问题，但我遇到了一个稍微不同的问题，需要不同的解决方案。我的谷歌地图正常工作，但我现在正在构建一个向导，一次只显示我的页面的步骤。当我启用隐藏 div 时，地图在显示之前会保持一段时间，有时根本不加载，但随后我将其从隐藏 div 移到主体部分，并立即加载。我不明白，它没有显示任何错误。请帮忙。刷新地图通常可以解决问题，但是

<div id="step-3" onshow="setTimeout(google.maps.event.trigger(map, 'resize'), 3000)">
    <h2 class="StepTitle">Step 3 Content</h2>
    <label>Select Job Locations: </label>
    <div id="map-canvas" style="width:100%; height:400px;"></div>
    <br>
    <label>Zip codes in region:</label><small> (manually add zipcodes seperated in comma space form)</small>
    <br>
    <textarea id="zipcodes"style="width:100%;"></textarea><br>
</div>

不会像我想象的那样修复它。

我在 jquery 中很新。这是来自智能向导的jquery ：

/ 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,
        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
        enableFinishButton: false, // make finish button enabled …

如果ajax调用成功，我想转到下一步，但是我无法在ajax调用内调用智能向导方法。我的代码在这里。

var wizard = $("#listing_wizard").smartWizard({onLeaveStep:stepSubmit});

    //stepsubmit
    function stepSubmit(){
      var that = this;
      //that.goForward  ------- working here
      var step_no = this.curStepIdx+1;
      var form_data = $("#step_"+step_no+"_form").serialize();

      $.ajax({
        type:'post',
        url:"<?php echo URL_ADMIN ?>ajax.php",
        data:form_data,
        success:function(data){
          return that.goForward; //not working here
        }
      });
    }

我认为问题出在这些“ this”中，因此在ajax调用后如何调用智能向导this.goForward

我想以动态方式更改（步骤 div 的）高度，但它无法以我尝试过的任何方式工作。我需要这个，因为我有一个表，我用 ajax 插入数据并重新加载，这个表在数据表中。

我已经尝试更改 css 中的高度，将 height:auto; 但它没有用，滚动条总是出现；这是我使用的库智能向导， https://github.com/mstratman/jQuery-Smart-Wizard

按照代码来实例化智能向导：

<script>
     $('#wizard').smartWizard({
      // Properties
        selected: 0,  // Selected Step, 0 = first step   
        keyNavigation: true, // Enable/Disable key navigation(left and right 
        keys are used if enabled)
        enableAllSteps: false,  // Enable/Disable all steps on first load
        transitionEffect: 'none', // Effect on navigation, 
      none/fade/slide/slideleft
        contentURL:null, // specifying content url enables ajax content loading
        contentURLData:null, // override ajax query parameters
        contentCache:true, // cache step contents, if false content is fetched 
      always …

我想在最后一步显示一个“完成”按钮。我正在使用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 …