进度步骤条

Posted 2021-02-10 required

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了进度步骤条相关的知识，希望对你有一定的参考价值。

效果图

页面

js部分

//进度条数据
var data = [{"id": "1","name": "基本信息","getUrlFunc":"doFunc1();","getValFunc":"Func1()"},
{"id": "2","name": "规则配置","getUrlFunc":"doFunc2();","getValFunc":"Func2()"},
{"id": "3","name": "规则测试","getUrlFunc":"doFunc3();","getValFunc":"Func3()"}
];

//-----------------------返回链接--------------------------

//返回上一步
function backStep() {
$("#steps").step_01("previous");
}

//下一步
function nextStep() {
$("#steps").step_01("next");
}

//进度条
$(function () {
initStep();
//$("#steps").step_01("goto");
});

function initStep() {
$("#steps").step_01({
data:data,
initStep: 1
});
}

js文件

//---------------------------------------------------------步骤进度条开始------------------------------------------------
;(function (data) {
/**
* 自定义
* @param method
* @returns {*}
*/
$.fn.step_01 = function (method) {
//你自己的插件代码
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === ‘object‘ || !method) {
return methods.init.apply(this, arguments);
} else {
$.error(‘Method ‘ + method + ‘ does not exist on jQuery.tooltip‘);
}
};

/**
* 默认值
* @type {{stepNames: [*], initStep: number}}
*/

var defStep ;
/**
* 函数
* @type {{init: init, next: next, previous: previous, goto: goto}}
*/
var methods;
methods = {

/**
* 初始化
* @param options
*/
init: function (options) {
defStep = options;
// 初始化参数为空，使用默认设置
if (!options) {
options = defStep;
} else {
// 步骤名称判断
if (!options.data || typeof options.data !== "object") {
options.data = defStep.data;
}
// 初始化步骤判断
if (!options.initStep || isNaN(options.initStep) || options.initStep < 0) {
options.initStep = defStep.initStep;
}
// 初始化步骤大于最大值
if (options.initStep > options.data.length) {
options.initStep = options.data.length;
}
}
// 初始化样式
var html = ‘‘;
html += ‘<ul class="progressbar">‘;
$.each(options.data, function (index, obj) {
var barId= obj.id;
var name= obj.name;
html += ‘<li id=‘+barId+‘ param=‘+(index+1)+‘‘;
if (index < options.initStep) {
html += ‘ class="active" ‘;
}
html += ‘>‘;
html += name;
html += ‘</li>‘;
});
html += ‘</ul>‘;
this.empty().append(html);

// 计算宽度
$(".progressbar li").css("width", 100 / options.data.length + "%");

//初始化page
var html1 = ‘‘;
$.each(options.data, function (index,obj) {
var url= obj.url;
var pageId= ‘page‘+obj.id;
html1 += ‘<div id=‘+pageId+‘ sign=‘+(index+1)+‘ status="0" class="hide"‘;
html1 += ‘>‘;
html1 += url;
html1 += ‘</div>‘;
});
$("#page").append(html1);

$("#page1").removeClass("hide");
/*$("#page1").load(options.data[0].url);*/
var funcUrl = eval(options.data[0].getUrlFunc);
// $("#page1").load(funcUrl);
$("#page1").load(funcUrl, function() {
$(".form-group select").select2();
$(".form-item select").select2();
});
$("#page1").attr("status","1");

},

goto: function (options) {

if (!options) {
options = defStep;
} else {
// 步骤名称判断
if (!options.data || typeof options.data !== "object") {
options.data = defStep.data;
}
// 初始化步骤判断
if (!options.initStep || isNaN(options.initStep) || options.initStep < 0) {
options.initStep = defStep.initStep;
}
// 初始化步骤大于最大值
if (options.initStep > options.data.length) {
options.initStep = options.data.length;
}
}

if (index == flag) {
if(status == "0") {

$(‘#page‘ + $(this).attr("param")).load(funcUrl, function() {
$(".form-group select").select2();
$(".form-item select").select2();
});
$(‘#page‘ + $(this).attr("param")).attr("status", "1");
$(‘#page‘ + $(this).attr("param")).removeClass("hide").siblings().addClass("hide");
}else if(status == "1"){
$(‘#page‘ + $(this).attr("param")).removeClass("hide").siblings().addClass("hide");

}

}

if (flag == 0) {
$("#btnBack").addClass("hide");
} else {
$("#btnBack").removeClass("hide");
}
if ((flag + 1) >= options.data.length) {
$("#btnNext").addClass("hide");
$("#btnok").removeClass("hide");
$("#btntest").removeClass("hide");
} else {
$("#btnNext").removeClass("hide");
$("#btnok").addClass("hide");
$("#btntest").addClass("hide");
}

})

});

},

next: function (options) {
if (!options) {
options = defStep;
} else {
// 步骤名称判断
if (!options.data || typeof options.data !== "object") {
options.data = defStep.data;
}
// 初始化步骤判断
if (!options.initStep || isNaN(options.initStep) || options.initStep < 0) {
options.initStep = defStep.initStep;
}
// 初始化步骤大于最大值
if (options.initStep > options.data.length) {
options.initStep = options.data.length;
}
}

var index = this.find("li.done").length+1;
if (index == this.find("li").length) {
return;
}

var status1 = $(‘#page‘+(index+1)).attr("status");
var flag = $(‘.active‘).attr("param");

$("#btnNext").addClass("hide");
$("#btnok").removeClass("hide");
$("#btntest").removeClass("hide");

}else{
$("#btnok").addClass("hide");
$("#btnNext").removeClass("hide");
$("#btntest").addClass("hide");
}

/**
* 执行函数
* 返回值
* true 继续进行下一步
* false 停留在原页面
*/

//eval(funcValue+"()");

/**
*说明：
*第一个页面只有“下一步”
*中间页面有“上一步”，“下一步”
*最后页面有“上一步”，“测试”，“关闭”
*以上按钮
*/

},
/**
* 上一步
*/
previous: function (options) {
if (!options) {
options = defStep;
} else {
// 步骤名称判断
if (!options.data || typeof options.data !== "object") {
options.data = defStep.data;
}
// 初始化步骤判断
if (!options.initStep || isNaN(options.initStep) || options.initStep < 0) {
options.initStep = defStep.initStep;
}
// 初始化步骤大于最大值
if (options.initStep > options.data.length) {
options.initStep = options.data.length;
}
}

var index1 = this.find("li.done").length+1;
if (index1 == 1) {
return;
}
this.find("li").eq(index1-2).removeClass("done").addClass("active");
this.find("li").eq(index1-1).removeClass("active");

var status1 = $(‘#page‘+(index1-1)).attr("status");
var flag = $(‘.active‘).attr("param");
var funcUrl = eval(options.data[flag-1].getUrlFunc);

if(status1 == "0") {
$(‘#page‘+(index1-1)).load(funcUrl,function() {
$(".form-group select").select2();
$(".form-item select").select2();
});
$(‘#page‘+(index1-1)).attr("status","1");
$(‘#page‘+(index1-1)).removeClass("hide").siblings().addClass("hide");

}else if(status1 == "1"){
$(‘#page‘+(index1-1)).removeClass("hide").siblings().addClass("hide");

}

$("#btntest").addClass("hide");
$("#btnok").addClass("hide");
$("#btnNext").removeClass("hide");
if((index1-1)==1){
$("#btnBack").addClass("hide");
}

}

};

}());
//---------------------------------------------------------步骤进度条结束------------------------------------------------

以上是关于进度步骤条的主要内容，如果未能解决你的问题，请参考以下文章

进度步骤条

超赞圆形动画进度条，爱了爱了(使用HTMLCSS和bootstrap框架)

python程序的处理进度可视化管理，对运行步骤一目了然！

拆分不同颜色的自定义 UIView

Android基础控件——AlertDialogProgressDialog实现单选对话框多选对话框进度条对话框输入框对话框