一款实用的jQuery蓝色步骤进度条插件,一共有4种不同风格的分步步骤样式,每一种都可以控制当前显示在哪一步,适合分步注册或操作流程的页面场景。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791