1

jquery-form-wizard で使用される HTML 構造があります。

<form>
  <div class='page1'>...</div>
  <div class='page2'>...</div>
  ...
  <div class='pagen'>...</div>

  <button type='reset'>...</button>
  <button type='submit'>...</button>
</form>

現在、リセットおよび送信ボタンは jquery-form-wizard によって管理されています。最初のページにはリセット ボタン (「戻る」というタイトル) が無効になっており、送信ボタンは「次へ」として機能します。page2 に移動すると、両方のボタンが有効になります (サーバー側の検証中に [次へ] ボタンが最初に無効になり、次に両方が有効になります)。これは、Next の代わりに Submit がある最後のページまで続きます。

ここで、最初のページのリセット/戻るボタンの動作を変更したいと思います。無効にする代わりに、非表示にしたいと思います。

jquery-form-wizard のコードに触れずに css 経由で簡単に実現できますか? または、それを変更して「最初の戻るボタンを非表示にする」オプションを追加する必要がありますか?

4

2 に答える 2

0

Css は、私が恐れているトリックを実行しません (つまり、css に関する私の限られた知識から言えば)、しかし、以下のコードのようなものはトリックを実行します。step_shown メソッドは、ボタンを適切に表示/非表示にするために使用されます (ボタンは、最初のステップが表示されたときに一瞬だけ表示されますが、その後非表示になります)。

    <script type="text/javascript">
        $(function(){
            var form = $("#demoForm");

            // hide/show the button appropriately when a step is shown
            form.bind("step_shown", function(e, data){
                if(data != undefined && !data.isFirstStep){
                    form.find(":reset").show();
                }else {
                    form.find(":reset").hide();
                }
            });

            form.formwizard({ 
                formPluginEnabled: true,
                validationEnabled: true,
                focusFirstInput : true,
                formOptions :{
                    success: function(data){$("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })},
                    beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));},
                    dataType: 'json',
                    resetForm: true
                }   
             }
            ).trigger("step_shown"); // trigger once at page load
    });
</script>

これが役立つことを願っています

于 2012-02-25T19:10:03.683 に答える
0

jquery-form-wizard を修正して、ページのクラスをフォームに追加しました ( patch )。

この変更の後、私がする必要があるのは、これをcssに追加することだけです:

form.formwizard-page1 input[type=reset] {
    display:none;
}
于 2012-02-26T08:48:39.130 に答える