avalon2
Version:
an elegant efficient express mvvm framework
55 lines (52 loc) • 1.97 kB
HTML
<html lang="en">
<head>
<link href="//cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="../../dist/avalon.js"></script>
<script type="text/javascript">
var test_vm = avalon.define({
$id:'test'
});
avalon.component("ms-pager", {
template: '<div class="pagination">'+
'<ul><li ms-for="el in @pages" ms-attr="{class:(el == @current_page ? \'active\' : \'\')}"><a href="#" ms-click="@gotoPage(el, $event)">{{el}}</a></li></ul>'+
'</div>',
defaults: {
total_page: 25,
current_page: 1,
show_page: 7,
pages:[1,2,3,4,5,6,7],
gotoPage: function(page, e){
this.current_page = page;
this.pages = this.getPages();
},
getPages: function() {
var pages = [];
var s = this.show_page, l = this.current_page, r = this.current_page, c = this.total_page;
pages.push(l);
while(true) {
if(pages.length >= s) {
break;
}
if(l > 1) {
pages.unshift(--l);
}
if(pages.length >= s) {
break;
}
if(r < c) {
pages.push(++r);
}
}
return pages;
}
}
});
</script>
</head>
<body>
<div ms-controller="test">
<xmp ms-widget="{is:'ms-pager'}"></xmp>
</div>
</body>
</html>