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 按钮首先被禁用，然后两个按钮都被启用）。这一直持续到最后一页，我们有提交而不是 Next。

现在，我想修改第一页上重置/返回按钮的行为。我不想禁用它，而是想隐藏它。

我可以在不接触 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 回答