首页 » 工作 » 方法 » 正文

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

发布者:站点默认
2016/06/30 浏览数(1,973) 分类:方法 jquery 审批进度、审核进度插件 jquery.ap.js已关闭评论

效果预览:

jquery.ap

演示:点击这里查看效果

代码:

<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

<完>

点击返回顶部
  1. 留言
  2. 联系方式