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

2016/07/14 浏览数(2,842) 分类：AngularJS 已关闭评论

效果预览：

用法：

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>approvalProgress</title>
<!-- 代码开始 1/2 -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/jquery.ap.css">
<script src="js/jquery.min.js"></script><!-- 这个jQuery不能少 -->
<script src="js/angular.js"></script>
<script src="data.js"></script>
<script src="js/ngAp.js"></script>
<!-- <script src="js/ngAp-delay.js"></script> 动态获取数据时用 -->
<!-- 代码结束 1/2 -->
<style>
.panel {margin-top: 30px;}
.panel-heading .btn-group {float: right;}
</style>
</head>
<body ng-controller="ctrl">
	<div class="container">
		<div class="row">
			<div class="panel panel-default">
				<div class="panel-heading">
					<div class="btn-group btn-group-xs">
						<a href="javascript:;" class="btn btn-default"></i>按钮1</a>
						<a href="javascript:;" class="btn btn-default"></i>按钮2</a>
					</div>
					<h3 class="panel-title">审核进度 Approval Progress</h3>
				</div>
				<div class="panel-body">
					<!-- 代码开始 2/2 -->
					<div approval-progress="approvalProgress" list="data.Data.ApprovalList" model="data.Data.Model"></div>
					<!-- 代码结束 2/2 -->
				</div>
			</div>
		</div>
	</div>
</body>
</html>

下载地址：

下载：ng-ap.zip

注意：

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

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

支持转接的V2版：

V2下载：ng-ap-v2.zip