实用的jQuery蓝色步骤进度条插件

来源:https://www.sucaihuo.com/js/2904.html 2017-09-03 13:43浏览(6583) 收藏

一款实用的jQuery蓝色步骤进度条插件,一共有4种不同风格的分步步骤样式,每一种都可以控制当前显示在哪一步,适合分步注册或操作流程的页面场景。
实用的jQuery蓝色步骤进度条插件
分类:css3 > 进度条 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入bootstrap和style样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/lib/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="css/less/style.css"/>

页面的body部分,一个div容器里放入了多个ul无序列表,用来显示不同的分步样式效果,代码如下:

<div class="container">
	<ul class="nav nav-pills nav-justified step step-arrow">
		<li>
			<a>步骤 1</a>
		</li>
		<li>
			<a>步骤 2</a>
		</li>
		<li>
			<a>步骤 3</a>
		</li>
		<li>
			<a>步骤 4</a>
		</li>
		<li>
			<a>步骤 5</a>
		</li>
	</ul>
	<ul class="nav nav-pills nav-justified step step-square" data-step="2">
		<li>
			<a>步骤 1</a>
		</li>
		<li>
			<a>步骤 2</a>
		</li>
		<li>
			<a>步骤 3</a>
		</li>
		<li>
			<a>步骤 4</a>
		</li>
		<li>
			<a>步骤 5</a>
		</li>
	</ul>
	<ul class="nav nav-pills nav-justified step step-round" data-step="3">
		<li>
			<a>步骤 1</a>
		</li>
		<li>
			<a>步骤 2</a>
		</li>
		<li>
			<a>步骤 3</a>
		</li>
		<li>
			<a>步骤 4</a>
		</li>
		<li>
			<a>步骤 5</a>
		</li>
	</ul>
	<ul class="nav nav-pills nav-justified step step-progress" data-step="4">
		<li>
			<a>步骤 1<span class="caret"></span></a>
		</li>
		<li>
			<a>步骤 2<span class="caret"></span></a>
		</li>
		<li>
			<a>步骤 3<span class="caret"></span></a>
		</li>
		<li>
			<a>步骤 4<span class="caret"></span></a>
		</li>
		<li>
			<a>步骤 5<span class="caret"></span></a>
		</li>
	</ul>
</div>

页面的底部,需引入jQuery库和必要的JS文件,并启用步骤插件,代码如下:

<script type="text/javascript" src="js/lib/jquery.min.js"></script>
<script type="text/javascript" src="js/lib/lib.js"></script>
<script type="text/javascript">
$(function() {
	bsStep();
	//bsStep(i) i 为number 可定位到第几步 如bsStep(2)/bsStep(3)
})
</script>
标签: 分步步骤进度
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2