2

jQuery プラグイン 'formwizard' を使用しており、ユーザーがプロセスの特定のステップにジャンプできるようにしたいと考えています。

私がそれを行うと思ったのは、「show」メソッドでした：

$(function(){
    $("#linkId").click(function(){
        $("#demoForm").formwizard("show","newLocationId");
    });
});

ただし、これは、前のステップを非表示にすることなく、ステップを画面に表示するだけです。

「show」を呼び出す前に現在の画面を非表示にする別の方法があれば、それは完璧です。

プラグのホームページはFormWizard Homepageです。

このプラグインに精通していて、フォーム要素からリンクするのではなく、メソッドを使用して特定のステップにジャンプする方法を知っている人はいますか?

4

3 に答える 3

2

バインドしている要素イベントでfalseを返すことを忘れないでください...

$(function(){
    $("#linkId").click(function(){
        $("#demoForm").formwizard("show","newLocationId");
        return false;
    });
});

これは私のために働いた。

于 2012-02-14T19:21:39.260 に答える
1

今日、これを機能させるために数時間を費やしました。この.formwizard("show","new_step")方法を使用して手順をスキップしても、うまくいきませんでした。メソッドでステップ3への移行を防ぎ、フォームのステップ4にオーバーライドすることができなかったため.bind("step_shown",function(){...})、非表示の入力「リンク」クラスアプローチを使用しました。無料または有料のアカウントで特定のラジオボタン（ステップ2）が選択されたときに非表示のフィールドを埋め込みました。これは、ステップ3を完全にスキップできることを意味します（無料アカウントの請求の詳細は必要ありません）。非表示の入力で「link」クラスを使用してジャンプする手順を特定しました。

DOMには、現在表示されているステップのdivにある次のフィールドがあります。

<input type="hidden" id="jump_to_fourth_step" value="fourthStep">

javascriptには次のものがあります。

$('input[name="account_type"]').click(function() {
  //add "link" class to jump to last step and hide billing fields in summary
  if($(this).attr("is_free")==true) {
    $("#jump_to_fourth_step").addClass("link");
    $(".billing_info").hide();
  }
  //remove class "link" from input and show billing fields in summary
  else {
    $('#jump_to_fourth_step').removeClass("link");
    $(".billing_info").show();
  }
});

ラジオボタンはそのときのみ使用可能であるため、このコードはステップ2でのみ実行されることに注意してください。無料アカウントを選択して「次へ」を押すと、ステップ3は正常にスキップされ、ステップ4で戻るボタンを使用すると、ユーザーはステップ2に戻ります。ユーザーが有料アカウントが必要であると判断した場合は、ステップに戻ります。 2をマークすると、非表示の入力が削除され、手順3が次に表示されます（請求情報は概要ページに表示されます）。

十分に文書化されていませんが、「次へ」ボタンがクリックされると、プラグインは現在のステップのアクティブな入力の「値」属性にあるステップに移動します。上記のように、値はfourthStepです。そして、念のために言っておきますが、私はテストを行ったところ、任意の数のステップを飛び越えることが可能であり、戻るボタンを押すと正しい場所に正しく戻ることができます。

于 2012-08-14T20:36:47.893 に答える
0

以下の実際の例からわかるように、正しく実行しています。

thecodemine.org のサンプル コード

発生している問題は、ほとんどの場合、無効な (X)HTML に関連しています (ほとんどの場合、Webkit ベースのブラウザーでのみ表示されます)。もし私があなたなら、HTML をクリーンアップして、それが修正されるかどうかを確認します。_http://validator.w3.org の検証ツールを使用して、HTML を検証します。

お役に立てれば

于 2011-01-11T16:06:31.317 に答える