Skip to content

Commit fddfa0b

Browse files
author
zhangbo
committed
demo编写
1 parent 45d09d6 commit fddfa0b

File tree

7 files changed

+165
-1
lines changed

7 files changed

+165
-1
lines changed

‎bower.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"tests"
2020
],
2121
"devDependencies": {
22-
"angular": "~1.4.3"
22+
"angular": "~1.4.3",
23+
"bootstrap": "~3.3.5"
2324
}
2425
}

‎demo/demo.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<html>
2+
<head>
3+
<meta charset="utf-8">
4+
<title>pagination</title>
5+
<script type="text/javascript" charset="utf-8" src="../bower_components/angular/angular.js">
6+
</script>
7+
<script type="text/javascript" charset="utf-8" src="pagination.js">
8+
</script>
9+
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
10+
<link rel="stylesheet" href="pagination.css">
11+
</head>
12+
<body onload="" ng-app="demo" ng-controller="demoCtro" class="row text-center">
13+
<h1 id="" class="text-center">
14+
{{title}}
15+
</h1>
16+
<div ui-pagination conf="conf"></div>
17+
</body>
18+
</html>
19+
<script type="text/javascript" charset="utf-8">
20+
var app = angular.module('demo' , ['pagination']);
21+
app.controller('demoCtro' , function($scope , pagination){
22+
console.log(pagination)
23+
$scope.title = 'pagination-directive';
24+
$scope.conf = {
25+
total : 100,
26+
currentPage : 1
27+
}
28+
})
29+
</script>

‎demo/pagination.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.pageConf , .pageConf *{
2+
display : inline;
3+
}
4+
.ui-page{
5+
display : inline-flex;
6+
}
7+
.pagination{
8+
margin : 0;
9+
}
10+
.ui-page > * {
11+
margin-right : 10px;
12+
}
13+
.ui-page input[type="text"]{
14+
width : 34px;
15+
height : 34px;
16+
line-height : 34px;
17+
text-align : center;
18+
border : 1px solid #eee;
19+
margin : 0 4px;
20+
}

‎demo/pagination.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<div class="ui-page">
2+
<ul class="pagination" ng-if="conf.total">
3+
<li>
4+
<a href="#" aria-label="Previous">
5+
<span aria-hidden="true">
6+
&laquo
7+
</span>
8+
</a>
9+
</li>
10+
<li ng-repeat="page in pageList">
11+
<a>{{page}}</a>
12+
</li>
13+
<li>
14+
<a href="#" aria-label="Previous">
15+
<span aria-hidden="true">
16+
&raquo
17+
</span>
18+
</a>
19+
</li>
20+
</ul>
21+
<div class="pageConf">
22+
<div>
23+
共<input type="text" ng-model="conf.currentPage">页
24+
</div>
25+
<div >
26+
<div class="name">
27+
到<input type="text" ng-model="conf.currentPage">页
28+
</div>
29+
<button class="btn btn-success">确定</button>
30+
</div>
31+
</div>
32+
</div>

‎demo/pagination.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
(function(){
2+
3+
var pagination = angular.module('pagination' , []);
4+
pagination.factory('pagination' , function(){
5+
return 'pagination';
6+
})
7+
pagination.directive('uiPagination', function() {
8+
return {
9+
restrict : 'EA',
10+
templateUrl : 'pagination.html',
11+
replace : true,
12+
require : '?ngModel',
13+
scope : {
14+
conf : '='
15+
},
16+
link : function(scope , ele , attrs){
17+
console.log(scope.conf)
18+
scope.pageList = [];
19+
scope.pageListFn = function(){
20+
for(var i=1; i<8; i++){
21+
scope.pageList.push(i);
22+
}
23+
}
24+
scope.pageListFn();
25+
}
26+
}
27+
});
28+
29+
})()

‎gulpfile.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
var gulp = require('gulp');
2+
var connect = require('gulp-connect');
3+
4+
gulp.task('connect' , function(){
5+
connect.server({
6+
port : 3000,
7+
livereload : true
8+
});
9+
})
10+
11+
gulp.task('html' , function(){
12+
gulp.src('./demo/*.html')
13+
.pipe(connect.reload);
14+
})
15+
16+
gulp.task('js' , function(){
17+
gulp.src('./demo/*.js')
18+
.pipe(connect.reload);
19+
})
20+
21+
gulp.task('watch' , function(){
22+
gulp.watch(['./demo/*.html'],['html']);
23+
gulp.watch(['./demo/*.js'],['js']);
24+
})
25+
26+
gulp.task('serve' , ['connect' , 'watch'])

‎package.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "angular-pagination",
3+
"version": "1.0.0",
4+
"description": "基于angular扩展的",
5+
"main": "pagination",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "https://github.com/febobo/angular-paganation.git"
12+
},
13+
"keywords": [
14+
"angular",
15+
"pagination",
16+
"directive"
17+
],
18+
"author": "febobo",
19+
"license": "BSD-2-Clause",
20+
"bugs": {
21+
"url": "https://github.com/febobo/angular-paganation/issues"
22+
},
23+
"devDependencies": {
24+
"gulp": "~3.9.0",
25+
"gulp-connect": "~2.2.0"
26+
}
27+
}

0 commit comments

Comments
 (0)