Question

Progress bar

我正在尝试使用三个步骤创建基于HTML5的进度条。我想要实现的目标是现场水平进展以及阶梯级进展。因此整个进度条可分为两个部分，第一部分为50％，第二部分为50％，如果总共有20个字段，则进入每个字段后进度条移动5％。由于希望将其实现为以及在这些步骤中包括图像。它不知何故无法解决。

           <div id="tmm-form-wizard" class="container substrate">



                <div class="row stage-container">

                    <div class="stage tmm-current col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="stage-header personaldetails"></div>
                        <div class="stage-content">
                            <h3 class="stage-title angel_font" style="color:#ffffff !important; font-size:14px !important;">Personal Details</h3>

                        </div>
                    </div><!--/ .stage-->

                    <div class="stage col-lg-4  col-md-4 col-sm-4 col-xs-4">
                        <div class="stage-header planselection"></div>

                        <div class="stage-content">
                            <h3 class="stage-title angel_font" style="color:#ffffff !important; font-size:14px !important;">Plan Selection</h3>

                        </div>
                    </div><!--/ .stage-->

                    <div class="stage col-lg-4 col-md-4 col-sm-4 col-xs-4 norightbar">
                        <div class="stage-header reviewpay"></div>
                        <div class="stage-content">
                            <h3 class="stage-title angel_font" style="color:#ffffff !important; font-size:14px !important;">Review and Pay</h3>

                        </div>
                    </div><!--/ .stage-->




                </div><!--/ .row-->




            </div><!--/ .container-->

    </div> <!--LOGO, NEED HELP AND PROGRESS CONTAINER ENDS-->

    </nav><!--FIXED NAVIGATION ENDS-->

            <div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"></div> 

            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 lalign"> 
                 <form action="" method="post" id="step1_form" name="step1_form">

                   <span class="angel_font pan_no">PAN Number</span>
                       <input type="text" class="form-control input_outline" placeholder="Type your PAN Number (eg: BODPM4264E)" id="pan_text" name="pan_text" onblur="checkField(this)" maxlength="10" style="text-transform:uppercase;"/>
                     <p class="angel_font" id="err_msgpan">PAN card must contain a mix of Alphabets (A-Z) and Numbers (0-9)</p>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"></div>


            </div> <!--PAN NUM ENDS-->


        <div class="row"> <!--DOB TEXT STARTS-->

            <div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"></div> 

            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 lalign"> 


                   <span class="angel_font dob">Date of Birth (as per PAN card)</span>

            </div>

            <div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"></div>


        </div> <!--DOB TEXT ENDS-->     


        <div class="row"> <!--DOB FIELD STARTS-->

            <div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"></div>

            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
            <input type="tel" class="input_outline" placeholder="DD" id="dd_text" name="dd_text" maxlength="2"  onkeypress="return isNumber(event)" size="4" onblur="isEmpty(this)"/>  
            <input type="tel" class="input_outline" placeholder="MM" id="mm_text" name="mm_text" maxlength="2"  onkeypress="return isNumber(event)" size="4" onblur="isEmpty(this)"/>
            <input type="tel" class="input_outline" placeholder="YYYY" id="yyyy_text" name="yyyy_text" maxlength="4"  onkeypress="return isNumber(event)" size="6" onblur="isEmpty(this)"/>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"></div>


        </div> <!--DOB FIELD ENDS-->  








/*  Stage  */
    #tmm-form-wizard .stage:before,
    #tmm-form-wizard .stage:after                       { background-color: #ffffff; }  /*  Set color for STAGE LINE  */
    #tmm-form-wizard .stage-header                      { background-color: #d8e3ee;; }  /* Set background color for STAGE HEADER  */
    #tmm-form-wizard .stage-title                       { color: #464646; }             /*  Set color for STAGE TITLE  */
    #tmm-form-wizard .stage-info                        { color: #a8a8a8;}              /*  Set color for STAGE INFO  */
    /*  end Stage  */

    /*  Current stage  */
    #tmm-form-wizard .stage.tmm-current .stage-header       { background-color: #fabf00; }  /*  Set background color for CURRENT STAGE  */  
    #tmm-form-wizard .stage.tmm-current .stage-header.head-number   { color: #fff; }                /*  Set color for CURRENT STAGE TEXT  */
    #tmm-form-wizard .stage.tmm-current:after,
    #tmm-form-wizard .stage.tmm-current:before              { background-color: #fabf00; }  /*  Set background color for CURRENT STAGE LINE  */
    /*  end Current stage  */

    /*  Success stage  */
    #tmm-form-wizard .stage.tmm-success .stage-header       { background-color: #00a33e; }  /*  Set background color for SUCCESS STAGE  */  
    #tmm-form-wizard .stage.tmm-success .stage-header.head-number { color: #3c611b; }               /*  Set color for SUCCESS STAGE TEXT  */
    #tmm-form-wizard .stage.tmm-success:after,
    #tmm-form-wizard .stage.tmm-success:before              { background-color: #fabf00; }  /*  Set background color for SUCCESS STAGE LINE  */
    #tmm-form-wizard .stage.tmm-success .stage-header:after { color: #00a33e; }             /*  Set color for SUCCESS STAGE ICON  */
    /*  end Success stage  */


    #tmm-form-wizard.substrate                          { background-color: transparent !important; }       /*  Set background color for FORM SUBSTRATE  */

Answer 1

如果我理解您的问题，您想根据其他表单字段更改进度值，请注意这些字段是否已填充。试试看这个样本：

$(function() {
	$("input[type='text']").change(function() {
    var progress = parseInt($("progress").val());
		var val = $(this).val();
    // Change the progress value according to the value in the input field
    $("progress").val(val.length > 0 ? (progress + 10) : (progress - 10));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress value="0" max="100"></progress> 
<br/>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />

我使用了HTML5进度，但您可以使用自己的进度，并处理页面中所有输入字段的更改事件。如果某个字段已更改且其值不为空，则我将进度值更新为100％。

Answer 2

您需要执行此算法：

 elements with content / # of elements

每当元素被改变时。

为此，您需要“连接”每个输入，以便在更改其值时，更新进度条：

// When the document is ready
$(function() {

    // Find all the input elements are group them
    // If you are using other input types besides textboxes, update the selector
    var $inputs = $("input[type='text']");

    // Find out how many there are:
    var amount = $inputs.length;

    // Wire up each input to a callback function for
    // when their  value gets changed
    $inputs.change(function() {
        var progress = parseInt($("progress").val());

        // Loop through all the inputs to see how many have values 
        var count = 0;
        $.each(inputs,function(index, value){
            if(value !== ""){
                count++;
            }
        });

    // Calculate the progress %
    var prog = parseInt((count / amount) * 100);
    $("progress").val(prog);
  });
});

具有字段级别进展的HTML5进度条

2 个答案: