0

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

一切都在进行下一步和上一步。但是，在第一步隐藏“prev”按钮并在最后一步仅显示“submit”按钮的“rails 方式”是什么？这是我会在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 放入我的资产管道而不将其存储在 application.js 中？我试图在 javascripts 下创建一个单独的 .js，但它并没有引入。

4

2 回答 2

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 .在application.js中指定了。如果是，请尝试将代码包含在$(document).ready(function(){..code goes here..})

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

还要添加#btnWizardPrev { display: none; }
假设：表格中有三个步骤。如果还有更多，则需要在 switch 语句中添加更多案例。基本上你需要打破case 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 代码。

于 2013-02-04T13:59:52.413 回答
0

向导插件已经在第一步禁用了上一个按钮。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;
}
于 2013-02-05T23:21:11.287 回答