0

この宝石でウィザードフォームを作成しました: https://github.com/stephenbaldwin/fuelux-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 %>

application.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();
  }
});

上記のコードは、現在のステップに基づいてボタンを表示/非表示にします。

2 番目の質問: application.js//= require_tree .で を指定していますか。はいの場合は、コードを$(document).ready(function(){..code goes here..})

更新上記の更新されたコードを参照してください。これが正しい方法かどうかはわかりませんが、この方法で機能させることができます。

#btnWizardPrev { display: none; }
Assumptionも追加します。フォームには 3 つのステップがあります。さらにケースがある場合は、switch ステートメントにさらにケースを追加する必要があります。基本的に、その場合はcase 2:ステートメントを壊す必要があります。条件は次へのボタンを削除するためのものなので、さらにステップがある場合は、条件を最後から 2 番目のステップに移動しcase 2:ます。nextnext

更新送信ボタンのコードを に置き換えます<%= 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 に答える