jQuery预约进度条简单实用

所属分类:UI,其他-加载,杂项

 15592  204  查看评论 (0)
分享到微信朋友圈
X
jQuery预约进度条简单实用 ie兼容7

更新时间:2019-12-15 22:48:18

使用方法

需要调用3个外部文件,它们分别是jquery.step.css,jquery-1.10.2.js,jquery.step.min.js

<link rel="stylesheet" type="text/css" href="css/jquery.step.css" />
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.step.min.js"></script>

html

<div class="main">
	<div id="step"></div>
	<div class="btns">
		<button id="prevBtn">上一步</button>
		<button id="nextBtn">下一步</button>
		<button id="btn1">跳到第二步</button>
		<button id="btn2">跳到第三步</button>
	</div>
	<div class="info">index:<span id="index"></span></div>
</div>

js

var step1 = $("#step");
var index1 = $("#index");

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

index1.text(step1.getIndex());

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

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

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

$("#btn2").on("click", function() {
    step1.toStep(2);
    index1.text(step1.getIndex());
});
相关插件-加载,杂项

jQuery顶部加载动画插件loadBar.js

loadBar是一个轻量级的(最小2KB)jQuery插件,当加载内容时,页面顶部显示一个漂亮的动画条。
  加载
 29717  364

jQuery nprogress.js页面加载进度条

jQuery nprogress.js页面加载进度条显示当前网页的加载进度
  加载
 64908  406

3D立体环形进度图表

3D立体环形进度图表,只要传入0100的整数,就能显示对应的百分比,大小自适应。
  加载
 33739  329

jquery实现图片预加载

jquery实现图片预加载
  加载
 49929  446

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复