如何在向导的 Rails 中使用 JavaScript 隐藏/显示返回/下一步按钮

Question

>我用这个 gem 创建了一个向导表单：https://github.com/stephenbaldwin/fuelux-rails

在进入下一步和上一步方面，一切都在工作。但是，在第一步隐藏"prev"按钮并在最后一步仅显示"提交"按钮的"轨道方式"是什么？这是我在 js 中做的事情吗？

_form.html.erb

<%= form_for(@wizard) do |f| %>
  <div>
    <div id="MyWizard" class="wizard">
      <ul class="steps">
        <li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
        <li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li>
        <li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li>
      </ul>
    </div>
    <div class="step-content">
      <div class="step-pane active" id="step1">
        <div class="field">
          <%= f.label :field1 %><br />
          <%= f.text_field :field1 %>
        </div>
      </div>
      <div class="step-pane" id="step2">
        <div class="field">
          <%= f.label :field2 %><br />
          <%= f.text_field :field2 %>
        </div>
      </div>
      <div class="step-pane" id="step3">
        <div class="field">
          <%= f.label :field3 %><br />
          <%= f.text_field :field3 %>
        </div>
      </div>
      <input type="button" class="btn btn-mini" id="btnWizardPrev" value="prev">
      <input type="button" class="btn btn-mini" id="btnWizardNext" value="next"></br>
      <div>
        <%= f.submit :class => 'btn btn-mini btn-primary' %>
      </div>
    </div>
  </div>
<% end %>

应用程序.js文件：

$(function() {
    $('#MyWizard').on('change', function(e, data) {
        console.log('change');
        if(data.step===3 && data.direction==='next') {
            // return e.preventDefault();
        }
    });
    $('#MyWizard').on('changed', function(e, data) {
        console.log('changed');
    });
    $('#MyWizard').on('finished', function(e, data) {
        console.log('finished');
    });
    $('#btnWizardPrev').on('click', function() {
        $('#MyWizard').wizard('previous');
    });
    $('#btnWizardNext').on('click', function() {
        $('#MyWizard').wizard('next','foo');
    });
    $('#btnWizardStep').on('click', function() {
        var item = $('#MyWizard').wizard('selectedItem');
        console.log(item.step);
    });
});

旁注/问题 - 有没有办法将此.js放在我的资产管道中而不将其存储在应用程序中.js？我试图在javascripts下创建一个单独的.js，但它没有拉进来。

Answer 1

在你的javascript文件中替换这个块

$('#MyWizard').on('change', function(e, data) {
    console.log('change');
    if(data.step===3 && data.direction==='next') {
        // return e.preventDefault();
    }
});

具有以下块：（更新）

$('#MyWizard').on('change', function(e, data) {
  console.log('change');
  $('#wizard-submit').hide(); //hide the submit button on each step.
  if(data.step === 3 && data.direction === 'next') {
    // return e.preventDefault();
    $('#wizard-submit').show(); //show the submit button only on last(3rd in your case) step.
  }
  switch(data.step) {
    case 1:
      if(data.direction === 'next')
        $('#btnWizardPrev').show();
      else
        $('#btnWizardPrev').hide();
      $('#btnWizardNext').show();
      break;
    case 2:
      if(data.direction === 'next') {
        $('#btnWizardPrev').show();
        $('#btnWizardNext').hide();
      }
      else {
        $('#btnWizardPrev').hide();
        $('#btnWizardNext').show();
      }
      break;
    case 3:
      // I would recommend to show the prev button on last step but hide the next button.
      if(data.direction === 'next')
        $('#btnWizardNext').hide();
      else
        $('#btnWizardNext').show();
      $('#btnWizardPrev').show();
      break;
    default:
      $('#btnWizardPrev').show();
      $('#btnWizardNext').show();
  }
});

上面的代码将根据您所处的步骤显示/隐藏按钮。

对于您的第二个问题：您是否在应用程序中指定了//= require_tree ..js。如果是，请尝试将代码括在$(document).ready(function(){..code goes here..})

更新 请参阅上面的更新代码。我不确定这是否是正确的方法，但我能够让它以这种方式工作。

同时添加#btnWizardPrev { display: none; }
假设：表单中有三个步骤。如果有更多，则需要在 switch 语句中添加更多案例。基本上，在这种情况下，您需要打破大小写 2： 语句。case 2: next条件是删除下一步按钮，因此如果有更多步骤，请将next条件移动到倒数第二步。

更新 将您的提交按钮代码替换为 <%= f.submit :class => 'btn btn-mini btn-primary', :id => 'wizard-submit' %> 。这将简单地将 id 属性添加到您的提交按钮。您可以使用任何值作为其 ID。然后只需通过添加此 css #wizard-submit { dispay: none }隐藏提交按钮，然后在 javascript 文件中使用上面更新的 jquery 代码。

Answer 2

向导插件已经禁用了第一步中的上一个按钮。它查找位于向导容器中的button.btn-prev

<div id="myWizard" class="wizard">
  <div class="actions">
    <button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
    <button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
  </div>

如果你想隐藏禁用的上一个按钮，你可以用css定位它以避免javascript

.wizard button.btn-prev[disabled] {
  display: none;
}