jquery 审批进度、审核进度插件 jquery.ap.js

效果预览：

演示：点击这里查看效果

代码：

<script src="jquery.min.js"></script>
<link href="jquery.ap.css" rel="stylesheet" />
<script src="jquery.ap.js"></script>
<script>
	$(function(){
		$('.approvalProgress').ap({step:2});
	});
</script>
<div class="approvalProgress">
	<ol class="progessText">
		<li>
			<span class="title">张小三</span>
			<span class="state">发起申请</span>
			<span class="date">2016-06-30</span>
			<span class="message">叫地主</span>
		</li>
		<li>
			<span class="title">第一个组织</span>
			<span class="state">审批通过</span>
			<span class="date">2019-07-02</span>
			<span class="message">不叫</span>
		</li>
		<li class="reject">
			<span class="title">第二个组织</span>
			<span class="state">审批被拒绝</span>
			<span class="date">2019-07-03</span>
			<span class="message">测试的信息怎么可能会过？</span>
		</li>
		<li>
			<span class="title">第三个组织</span>
			<span class="state">等待审批</span>
			<span class="date">-</span>
			<span class="message">断了？</span>
		</li>
		<li>
			<span class="title"></span>
			<span class="state">审批完成</span>
			<span class="date">-</span>
		</li>
	</ol>
</div>

下载地址：

下载：jquery.ap.zip

注意：

这个插件是为一个 bootstrap 项目做的，因了使用了 box-sizing 和 border-radius 所以兼容性不好。另外，宽度不足时只显示当前审核到的进度项，其它项只显示圆圈。

AngularJS版：AngularJS 审批进度、审核进度插件 ng-ap.js

＜完＞