avalon分頁插件

2024-04-27 15:14:16

字體：大中小

來源：轉載

供稿：網友

從avalon的官方github上搞下來的分頁插件不能直接用在前端，并且存在bug，于是重新封裝了一下提供出來，分別是avalon-ms-pager.js和avalon-ms-pager.CSS

<!DOCTYPE html><html>    <head>        <title>分頁欄</title>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <link href="avalon-ms-pager.css" rel="stylesheet"/>        <script src="./dist/avalon.js"></script>        <script src="avalon-ms-pager.js"></script>    </head>    <body ms-controller="test">        <wbr ms-widget="{is:'ms-pager', onPageClick: @pageclick}"/>    </body>    <script type="text/javascript">        var vm = avalon.define({            $id: 'test',            pageclick: function(e, cur) {                console.log(e, cur);            }        });    </script></html>
avalon-ms-pager.js
;(function(){//*********************************************if(!avalon) {    console.log("請先在當前頁面引用avalon.js！另外請保證您引用了與該組件配套的css樣式！");    return;}function getHashStr(name) {    var url = location.hash; //獲取url中"?"符后的字串    var theRequest = new Object();    if (url.indexOf("?")) {        var str = url.substr(url.indexOf("?") + 1);        var strs = str.split("&");        for (var i = 0; i < strs.length; i++) {            theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);        }    }    return theRequest[name];}function getPages(currentPage) {    var pages = []    var s = this.showPages    var total = this.totalPages    var half = Math.floor(s / 2)    var start = currentPage - half + 1 - s % 2    var end = currentPage + half        // handle boundary case    if (start <= 0) {        start = 1;        //end = s > total ? total : s;    }    if (end > total) {        //start = total - s + 1        end = total    }        var itPage = start;    while (itPage <= end) {        pages.push(itPage)        itPage++    }        return {currentPage: currentPage, pages: pages};}avalon.component('ms-pager', {    template: "" + "       <ul class='pagination' ms-visible='@totalPages>1'>" +"           <li class='first' ms-class='{disabled: @isDisabled(/"first/", 1)}'>" +"               <a ms-attr='{title:@getTitle(/"first/")}'" +"                  ms-click='@cb.pagination {  cursor: pointer;  display: inline-block;  padding-left: 0;  margin: 20px 0;  border-radius: 4px; }  .pagination > li {    float: left;    display: inline; }    .pagination > li > a,    .pagination > li > span {      position: relative;      float: left;      padding: 6px 12px;      line-height: 1.42857;      text-decoration: none;      color: #337ab7;      background-color: #fff;      border: 1px solid #ddd;      margin-left: -1px; }    .pagination > li:first-child > a,    .pagination > li:first-child > span {      margin-left: 0;      border-bottom-left-radius: 4px;      border-top-left-radius: 4px; }    .pagination > li:last-child > a,    .pagination > li:last-child > span {      border-bottom-right-radius: 4px;      border-top-right-radius: 4px; }  .pagination > li > a:hover, .pagination > li > a:focus,  .pagination > li > span:hover,  .pagination > li > span:focus {    z-index: 2;    color: #23527c;    background-color: #eeeeee;    border-color: #ddd; }  .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,  .pagination > .active > span,  .pagination > .active > span:hover,  .pagination > .active > span:focus {    z-index: 3;    color: #fff;    background-color: #337ab7;    border-color: #337ab7;    cursor: pointer; }  .pagination > .disabled > span,  .pagination > .disabled > span:hover,  .pagination > .disabled > span:focus,  .pagination > .disabled > a,  .pagination > .disabled > a:hover,  .pagination > .disabled > a:focus {    color: #777777;    background-color: #fff;    border-color: #ddd;    cursor: not-allowed; }