Question

我试图找出如何根据用户的步骤调整背景大小，以便为每个步骤显示所有字段。是否可以根据它们的步骤调整尺寸？我已经尝试过css和js而且失败了，只是彻底破坏了我的目标。任何人都可以指导我如何根据它们的步骤来回调整背景大小？

在Js中我尝试添加这样的东西

onStepChanged: function (event, currentIndex, priorIndex)
                {
                    if (currentIndex === 2)
                    {
                        $(".wizard-big.wizard > .content").css("min-height", "530px");
                    }
                },

或者像这样：

onStepChanged: function (event, currentIndex, priorIndex)
                {
                    $(".wizard-big.wizard > .content").css({
                        height: $("#div").height()
                    });
                },

HTML5

<form id="form" action="#" class="wizard-big">
    <h1>Employee</h1>
      <fieldset>
          <h2>Employee Information</h2>

          <div class="row">
              <div class="col-lg-6">
                  <div class="form-group">
                      <label>Name</label>
                      <input id="name" name="name" type="text" class="form-control required">
                  </div>
              </div>
              <div class="col-lg-6">
                  <div class="form-group">
                      <label>Date</label>
                      <input id="todaysDate" name="todaysDate" type="text" class="form-control required">
                  </div>
              </div>
          </div>

          <div class="row">
              <div class="col-lg-6">
                  <div class="form-group">
                      <label>Job Title</label>
                      <input id="title" name="title" type="text" class="form-control required">
                  </div>
              </div>
              <div class="col-lg-6">
                  <div class="form-group">
                      <label>Department</label>
                      <input id="department" name="department" type="text" class="form-control required">
                  </div>
              </div>
          </div>

          <div class="row">
              <div class="col-lg-6">
                  <div class="form-group">
                      <label>Date Hired</label>
                      <input id="hiredDate" name="hiredDate" type="text" class="form-control required">
                  </div>
              </div>
              <div class="col-lg-6">
                  <div class="form-group">
                      <label>Termination Date</label>
                      <input id="termDate" name="termDate" type="text" class="form-control required">
                  </div>
              </div>
          </div>

      </fieldset>
    <h1>Reasons</h1>
    <fieldset>
        <h2>Reason for Leaving</h2>
        <div class="row">
            <div class="col-lg-12">
                <div class="form-group">
                    <label>What is your reason for leaving?</label>
                    <input id="reasonLeaving" name="reasonLeaving" type="text" class="form-control required">
                </div>
            </div>
            <div class="col-lg-12">
                <div class="form-group">
                    <label>How do you feel about your pay?</label>
                    <input id="feelPay" name="feelPay" type="text" class="form-control required">
                </div>
            </div>
            <div class="col-lg-12">
                <div class="form-group">
                    <label>How do you feel about your progress here?</label>
                    <input id="progressHere" name="progressHere" type="text" class="form-control required">
                </div>
            </div>
       </div>
       <div class="row">
            <div class="col-lg-3">
                <div class="form-group">
                    <label>Do you have another job?</label>
                    <input id="anotherJob" name="anotherJob" type="text" class="form-control required">
                </div>
            </div>
            <div class="col-lg-9">
                <div class="form-group">
                    <label>If yes, how does it compare with ours?</label>
                    <input id="compare" name="compare" type="text" class="form-control required">
                </div>
            </div>
       </div>
       <div class="row">
            <div class="col-lg-12">
                <div class="form-group">
                    <label>Will you be receiving a higher salary at your new job?</label>
                    <input id="higherSalary" name="higherSalary" type="text" class="form-control required">
                </div>
            </div>
            <div class="col-lg-12">
                <div class="form-group">
                    <label>What could we have done to prevent your leaving?</label>
                    <input id="preventLeaving" name="preventLeaving" type="text" class="form-control required">
                </div>
            </div>
       </div>
    </fieldset>

JS

<script>
    $(document).ready(function(){
        $("#form").steps({
            bodyTag: "fieldset",
            transitionEffect: "slideLeft",
            onStepChanging: function (event, currentIndex, newIndex)
            {
                // Always allow going backward even if the current step contains invalid fields!
                if (currentIndex > newIndex)
                {
                    return true;
                }

                var form = $(this);

                // Clean up if user went backward before
                if (currentIndex < newIndex)
                {
                    // To remove error styles
                    $(".body:eq(" + newIndex + ") label.error", form).remove();
                    $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
                }

                // Disable validation on fields that are disabled or hidden.
                form.validate().settings.ignore = ":disabled,:hidden";

                // Start validation; Prevent going forward if false
                return form.valid();
            },
            onFinishing: function (event, currentIndex)
            {
                var form = $(this);

                // Disable validation on fields that are disabled.
                // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
                form.validate().settings.ignore = ":disabled";

                // Start validation; Prevent form submission if false
                return form.valid();
            },
            onFinished: function (event, currentIndex)
            {
                var form = $(this);

                // Submit form input
                form.submit();
            }
        }).validate({
                    errorPlacement: function (error, element)
                    {
                        element.before(error);
                    },
                    rules: {
                        confirm: {
                            equalTo: "#password"
                        }
                    }
                });
   });
</script>

第一步

第二步（显示字段被切断）

非常感谢任何帮助！

Answer 1

如果我理解你的问题，这是一个jquery-steps的老问题。此链接将包含许多信息和分辨率：https://github.com/rstaib/jquery-steps/issues/8#issuecomment-39273777。

我根据该链接的评论制作了自己的解决方案，你可以使用它，我认为它能够很好地工作，因为它为我工作了一年多。

请执行这些修改：

1.创建名为 jquery.steps.fix.js 的文件。将下面的代码放在上面并加载 AFTER 原始 jquery.steps.js （或 jquery.steps.min.js ）。< / p>

function resizeJquerySteps() {
     $('.wizard .content').animate({
        height: $('.body.current').outerHeight()
    }, 'slow');
}

$(window).resize($.debounce(250, resizeJquerySteps));

2.您需要 REPLACE 原始 jquery.steps.css 的某些部分。

这里（想想就在第140行）：

.wizard > .content
{
    background: #eee;
    display: block;
    margin: 0.5em;

    // comment or remove this
    /*min-height: 35em;*/

    overflow: hidden;
    position: relative;
    width: auto;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

在这里（想想就在第163行）：

.wizard > .content > .body
{
    float: left;
    position: absolute;
    width: 95%;

    // comment or remove this
    /*height: 95%;*/

    padding: 2.5%;
}

3.现在你需要从插件的事件中调用我们的函数 resizeJquerySteps（），准确地在 onInit（）， onStepChanging（）和 onStepChanged（）。

onInit: function(event, currentIndex) {
    resizeJquerySteps();
},
onStepChanging: function(event, currentIndex, newIndex) {
    resizeJquerySteps();
},
onStepChanged: function (event, currentIndex, priorIndex) {
    resizeJquerySteps();
}

调整步骤大小以使所有字段都适合

1 个答案: