JavaScript面向對象：分頁器類封裝

時間  2019-11-17
標籤 javascript 面向對象 分頁 封裝 欄目 JavaScript 简体版
原文   原文鏈接

查看效果javascript

百度網盤demo下載php

html代碼：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分頁器</title>
    <link href="pager.css" rel="stylesheet"/>
</head>
<body>
    <div id="pager"></div>
    <script src="pager.js"></script>
    <script> function doChangePage(obj){ //TO DO } var pagerBox = document.getElementById('pager'); var pager = new Pager({ index: 1, total: 15, parent: pagerBox, onchange: doChangePage }); </script>
</body>
</html>

css代碼：html

.pager-box:after{ display:block; height:0; visibility:hidden; clear:both; content:''; }
.pager{ float:left; position:relative; left:50%; font-family:微軟雅黑; }
.pager a,.pager span{ position:relative; left:-50%; display:block; float:left; margin-left:5px; border:1px solid #b6bcc1; padding: 5px 10px; text-decoration:none; color:#b6bcc1; border-radius:3px; }
.pager span{ border:0; }
.pager a.js-selected{ background:#b6bcc1; color:#fff; cursor:default; }
.pager a.js-disabled{ background:#f1f1f1; border-color:#f1f1f1; cursor:default; color:#fff; }

pager.js代碼java

(function(window, undefined){

    /** * 建立元素節點並返回 */
    function create(tagName, className, parent){
        var element = document.createElement(tagName);
        element.className = className;
        parent.appendChild(element);
        return element;
    }

    /** * 數組消除重複 */
    function clearRepeat(arr){
        var obj = {},
            result = [];
        for(var i = 0, len = arr.length; i < len; i++){
            obj[arr[i]] = 1;
        }
        for(var i in obj){
            result.push(i);
        }
        return result;
    }

    /** * 添加類名 */
    function addClassName(element, className){
        var aClass = element.className.split(' ');
        aClass.push(className);
        aClass = clearRepeat(aClass);
        element.className = aClass.join(' ');
    }
    /** * 刪除類名 */
    function delClassName(element, className){
        var aClass = element.className.split(' '),
            index = aClass.indexOf(className);
        if(index > 0) aClass.splice(index, 1);
        element.className = aClass.join(' ');
    }

    /** * 檢查是否含有類名 * @param element * @param className * @returns {boolean} */
    function hasClassName(element, className){
        var aClass = element.className.split(' '),
            index = aClass.indexOf(className);
        if(index > 0) return true;
        return false;
    }

    var Pager = function(obj){

        this.__total = obj.total || 1;
        this.__index = obj.index || 1;
        this.__parent = obj.parent;
        this.__onchange = obj.onchange;
        //初始化分頁器
        this.__init(obj);

    };

    var pro = Pager.prototype;
    /** * 初始化分頁器 */
    pro.__init = function(obj){
        if(this.__total < this.__index) return;
        //存儲數字
        this.__numbers = [];
        //儲存省略號
        this.__dots = [];
        this.__wrapper = create('div', 'pager-box', this.__parent);
        this.__body = create('div', 'pager', this.__wrapper);
        //存儲上一頁
        this.__preBtn = create('a', 'prev', this.__body);
        this.__preBtn.href = 'javascript:void(0);';
        this.__preBtn.innerText = (obj.label && obj.label.prev) || '上一頁';
        //存儲數字
        if(this.__total < 8){
            for(var i = 0; i < this.__total; i++){
                var t = create('a', 'number', this.__body);
                t.href = 'javascript:void(0);';
                t.innerText = i + 1;
                this.__numbers.push(t);
            }
        }else{
            for(var i = 0; i < 2; i++){
                var t = create('span', 'dots', this.__body);
                t.innerText = '...';
                this.__dots.push(t);
            };
            for(var i = 0; i < 7; i++){
                var t = create('a', 'number', this.__body);
                t.href = 'javascript:void(0);';
                this.__numbers.push(t);
            }

        }
        //存儲下一頁
        this.__nextBtn = create('a', 'next', this.__body);
        this.__nextBtn.href = 'javascript:void(0);';
        this.__nextBtn.innerText = (obj.label && obj.label.next) || '下一頁';
        //
        this._$setIndex(this.__index);
        //
        this.__body.onclick = this.__doClick.bind(this);
    };

    pro.__doClick = function(e){
        var e = e || window.event,
            target = e.target || e.srcElement;
        //點擊省略號
        if(target.tagName.toLowerCase() == 'span') return;
        //點擊了不能點擊的上一頁或者下一頁
        if(hasClassName(target, 'js-disabled')) return;
        //點擊了當前頁
        if(hasClassName(target, 'js-selected')) return;

        if(target == this.__preBtn){
            //點擊了上一頁
            this._$setIndex(this.__index - 1);
        }else if(target == this.__nextBtn){
            //點擊了下一頁
            this._$setIndex(this.__index + 1);
        }else{
            //點擊了數字
            var index = target.innerText;
            this._$setIndex(index);
        }

    };

    /** * 跳轉頁數 */
    pro._$setIndex = function(index){

        index = parseInt(index);
        //更新信息
        if(index != this.__index){
            this.__last = this.__index;
            this.__index = index;
        }
        //處理
        delClassName(this.__preBtn, 'js-disabled');
        delClassName(this.__nextBtn, 'js-disabled');
        if(this.__total < 8){
            //總頁數小於8的狀況
            if(this.__last) delClassName(this.__numbers[this.__last - 1], 'js-selected');
            addClassName(this.__numbers[this.__index - 1], 'js-selected');
            if(this.__index == 1) addClassName(this.__preBtn, 'js-disabled');
            if(this.__index == this.__total) addClassName(this.__nextBtn, 'js-disabled');

        }else{
            this.__dots[0].style.display = 'none';
            this.__dots[1].style.display = 'none';
            for(var i = 0; i < 7; i++){
                delClassName(this.__numbers[i], 'js-selected');
            };
            if(this.__index < 5){
                for(var i = 0; i < 6; i++){
                    this.__numbers[i].innerText = i + 1;
                }
                this.__numbers[6].innerText = this.__total;
                this.__dots[1].style.display = 'block';
                this.__body.insertBefore(this.__dots[1], this.__numbers[6]);
                addClassName(this.__numbers[this.__index - 1], 'js-selected');
                if(this.__index == 1) addClassName(this.__preBtn, 'js-disabled');
            }else if(this.__index > this.__total - 4){
                for(var i = 1; i < 7; i++){
                    this.__numbers[i].innerText = this.__total + i -6;
                }
                this.__numbers[0].innerText = '1';
                this.__dots[0].style.display = 'block';
                this.__body.insertBefore(this.__dots[0], this.__numbers[1]);
                addClassName(this.__numbers[this.__index + 6 - this.__total], 'js-selected');
                if(this.__index == this.__total) addClassName(this.__nextBtn, 'js-disabled');
            }else{
                this.__numbers[0].innerText = '1';
                for(var i = 1; i < 6; i++){
                    this.__numbers[i].innerText = this.__index - 3 + i;
                    if(i == 3) addClassName(this.__numbers[i], 'js-selected');
                }
                this.__numbers[6].innerText = this.__total;
                this.__dots[0].style.display = 'block';
                this.__body.insertBefore(this.__dots[0], this.__numbers[1]);
                this.__dots[1].style.display = 'block';
                this.__body.insertBefore(this.__dots[1], this.__numbers[6]);
            }

        }
        if(typeof this.__onchange == 'function'){
            this.__onchange({
                index: this.__index,
                last: this.__last,
                total: this.__total
            })
        }

    };
    /** * 獲得總頁數 */
    pro._$getIndex = function(){
        return this.__index;
    };
    /** * 獲得上一個頁數 */
    pro._$getLast = function(){
        return this.__last;
    };
    //變成全局
    window.Pager = Pager;

})(window);

主要思路：數組

分頁器共分爲如下4種狀況：markdown

這裏寫圖片描述

狀況1，當total < 8 時，全部的頁碼所有顯示。app

狀況2，當total >= 8 且 index < 5時，顯示1-6和最後一頁。函數

狀況3，當total >= 8 且 index > total - 4時，顯示1和最後6項。this

狀況4，當total >= 8 且 5 <= index <= total - 4時，顯示1和最後一頁，和中間5項。

Pager類實例化時傳入一個設置對象：

{
    parent: element,  //給分頁器設置父節點
    index: index,    //設置當前頁
    total: total,    //設置總頁數
    onchange: function(){}   //頁數變化回調函數
}

當咱們實例化Pager時，執行Pager函數體內的語句，首先賦值，而後就執行初始化函數：

var Pager = function(obj){
    //賦值
    this.__total = obj.total || 1;
    this.__index = obj.index || 1;
    this.__parent = obj.parent;
    this.__onchange = obj.onchange;
    //初始化分頁器
    this.__init(obj);
};

初始化函數this.__init結構：

Pager.prototype.__init = function(obj){

    (根據上面分析的狀況進行處理)
    ...
    this._$setIndex(this.__index);  //跳轉到初始頁
    //綁定分頁器點擊函數
    this.__body.onclick = this.__doClick.bind(this);
};

初始化完成，點擊後就會作出相應的判斷，並使用this._$setIndex(index)進行跳轉

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程