javascript - 进度条重置百分比
问题描述
我有一个进度条，它应该显示填写表格的百分比，分为标签，每个标签都包含一个“表格”。
这个进度条是一个 JQuery 插件（FormProgressBar），它通过填充“必需”参数的字段来激活。
在第一个选项卡中，百分比栏工作得很好，但是当我切换到另一个包含另一个表单的选项卡时，RESET 百分比栏。我希望百分比栏在更改选项卡时不要重置值，并让它继续计数直到表格结束，我该如何解决这个问题？
1-这里的栏在表单的第一个选项卡中正常工作。
2- 当我转到表单的另一个选项卡时，栏会重置。
这是这两个选项卡的表单的HTML代码，我使用“formProgress”类来调用进度条插件。
<form action="/Pasta/SalvarInquerito" method="post" id="FormInquerito" class="formProgress"></form>
<form method="post" action="/Pasta/SalvarCrime" id="FormCrime" class="formProgress"></form>
这是 formProgressBar 的 JS，带有在 HTML 中调用的栏的 CSS 格式。
$(".formProgress").formProgressBar({
percentCounting: true, // default: false
height: 16,// default: 10
// default: 500
transitionTime: 500,
//ease, linear, ease-in, ease-out, ease-in-out
transitionType: 'ease-in',
});
HTML 代码进度条。
<div id='jQueryProgressFormBar'><div></div></div>
插件的基本代码。
$.fn.formProgressBar = function(options) {
var defaults = {
readCount: false,
validClass: 'valid',
invalidClass: 'error',
percentCounting: true,
transitionTime: 0,
height: 10,
transitionType: 'ease', //ease, linear, ease-in, ease-out, ease-in-out
parentElement: "body"
};
var settings = $.extend( {}, defaults, options );
//$(settings.parentElement).prepend("<div id='jQueryProgressFormBar'><div></div></div>")
$("#jQueryProgressFormBar").css("width","100%").css("height",settings.height).css("z-index",10000)
$("#jQueryProgressFormBar>div").css({
WebkitTransition : 'all '+settings.transitionTime+'ms '+settings.transitionType,
MozTransition : 'all '+settings.transitionTime+'ms '+settings.transitionType,
MsTransition : 'all '+settings.transitionTime+'ms '+settings.transitionType,
OTransition : 'all '+settings.transitionTime+'ms '+settings.transitionType,
transition : 'all '+settings.transitionTime+'ms '+settings.transitionType
}).css("height",settings.height);
this.elementsRequied = function () {
var formElements = $(this).find("input[required], textarea[required], select[required]").toArray()
arr = [];
formElements.map(function (item) {
arr[item.name] = 0;
if(item.checked)
arr[item.name] = 1;
})
return arr;
}
this.refresh = function () {
formFields = this.elementsRequied();
}
this.renderBar = function () {
var correctFields = 0
var length = 0;
var error = false;
for(var item in formFields){
if(formFields[item]==1){
correctFields++;
}
if(formFields[item]==-1)
error=true;
length++;
}
var percentOfSuccess = (correctFields/length*100).toFixed(2);
if(settings.percentCounting)
$("#jQueryProgressFormBar>div").text(Math.round(percentOfSuccess)+" %")
$("#jQueryProgressFormBar>div").css("width",percentOfSuccess+"%")
if(error==true)
$("#jQueryProgressFormBar>div").addClass('warn')
else
$("#jQueryProgressFormBar>div").removeClass('warn').removeClass('error')
}
this.bindElements = function () {
var editBar = this.renderBar
$(this).find("input[required], textarea[required], select[required]").change(function () {
if(!settings.readCount){
switch ($(this).prop('nodeName')){
case "INPUT":
switch ($(this).attr("type")){
case "text":
if($(this).val()!=""){
formFields[$(this).attr("name")]=1
}else{
formFields[$(this).attr("name")]=-1
}
break;
case "email":
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(re.test(String($(this).val()).toLowerCase())){
formFields[$(this).attr("name")]=1
}else{
formFields[$(this).attr("name")]=-1
}
break;
case "number":
if($.isNumeric($(this).val())){
formFields[$(this).attr("name")]=1
}else{
formFields[$(this).attr("name")]=-1
}
break;
case "checkbox":
if($(this).is(':checked')){
formFields[$(this).attr("name")]=1
}else{
formFields[$(this).attr("name")]=-1
}
break;
case "radio":
if($(this).is(':checked')){
formFields[$(this).attr("name")]=1
}else{
formFields[$(this).attr("name")]=-1
}
break;
}
break;
case "SELECT":
if($(this).val()!=""){
formFields[$(this).attr("name")]=1
}else{
formFields[$(this).attr("name")]=-1
}
break;
}
}else{
switch ($(this).attr("type")){
case "checkbox":
if($(this).is(':checked')){
formFields[$(this).attr("name")]=1
}else{
formFields[$(this).attr("name")]=-1
}
break;
case "radio":
if($(this).is(':checked')){
formFields[$(this).attr("name")]=1
}else{
formFields[$(this).attr("name")]=-1
}
break;
}
}
editBar();
})
if(settings.readCount) {
var $div = $(this).find("input[required], textarea[required], select[required]");
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.attributeName === "class") {
if ($(mutation.target).hasClass(settings.validClass)) {
formFields[$(mutation.target).attr("name")] = 1
} else if ($(mutation.target).hasClass(settings.invalidClass)) {
formFields[$(mutation.target).attr("name")] = -1
}
editBar();
}
});
});
$div.map(function (item) {
observer.observe($div[item], {
attributes: true
});
})
}
;
$(this).submit(function (e) {
if($("#jQueryProgressFormBar>div").hasClass('warn')){
$("#jQueryProgressFormBar>div").removeClass("warn").addClass("error")
e.preventDefault()
return
}
var correctFields = 0
for(var item in formFields){
if(formFields[item]==1){
correctFields++;
}
length++;
}
if(correctFields!=length){
$("#jQueryProgressFormBar>div").removeClass("warn").addClass("error")
e.preventDefault()
return
}
$("#jQueryProgressFormBar>div").removeClass("warn").removeClass("error")
})
}
var formFields = this.elementsRequied();
this.bindElements()
return this;
};
$.fn.formProgressBar解决方案
推荐阅读
- python - 将 pyspark CommonCrawl 存储库部署到 EMR
- html - html列之间的空间
- php - 如何在php中通过Curl正确插入quickbase
- php - 在 php 中使用 ajax 从数据库中获取数据时，操作链接不起作用
- git - TFS GIT - 从大师那里获取最新信息
- sql - CTE 必要或多个连接
- python - 使用函数创建和编辑不同的变量
- flutter - Flutter，我正在使用 local_auth 0.6.3+2 进行 Touch ID、Face ID 身份验证。但找不到如何打开输入密码按钮
- django - Django REST Framework 基于类的视图继承
- reactjs - 在 JSX 中嵌套 If 语句