懒人之家--可能是JS网页特效代码收集最全的懒站!

jQuery流程步骤进度条网页特效

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2017-09-13
jQuery流程步骤进度条网页特效是一款可以上一步可以下一步,也可以支持跳到第二步第三步的步骤进度条样式代码。


js代码

<script src="js/jquery.step.min.js"></script>
<script type="text/javascript">
	var $step = $("#step");
	var $index = $("#index");

	$step.step({
		index: 0,
		time: 500,
		title: ["填写申请表", "上传资料", "待确认", "已确认", "预约完成"]
	});

	$index.text($step.getIndex());

	$("#prevBtn").on("click", function() {
		$step.prevStep();
		$index.text($step.getIndex());
	});

	$("#nextBtn").on("click", function() {
		$step.nextStep();
		$index.text($step.getIndex());
	});

	$("#btn1").on("click", function() {
		$step.toStep(1);
		$index.text($step.getIndex());
	});

	$("#btn2").on("click", function() {
		$step.toStep(2);
		$index.text($step.getIndex());
	});
</script>