天天看點
傳回

jQuery翻頁yunm.pager.js，涉及div局部重新整理

版權聲明：歡迎轉載，請注明沉默王二原創。 https://blog.csdn.net/qing_gee/article/details/52180545

前端的翻頁插件有很多，bootstrap的翻頁界面看起來就不錯，做起來也易于上手，但應用于項目中的翻頁實作還有有幾個難點，分别是：

  1. 如何封裝一個翻頁插件，如題中的yunm.pager.js。
  2. 涉及到的div局部重新整理該如何做。

翻頁的總體流程涉及到的知識點很多，這篇文章我們也主要來關注以上兩點，其餘的内容，請自悟。

一、效果1

2、效果2（分局兩側）

二、如何定義局部重新整理的div

翻頁時，我們一般隻會重新整理頁面中涉及到翻頁的父級div，那麼該如何定義呢？

<form rel="support_deal_page" target="turnPageForm" action="${ctx}/initI" method="post">
    <input type="hidden" name="page" value="1" />
    <input type="hidden" name="rows" value="2" />
</form>
<div id="support_deal_page" class="row"></div>
  1. 為div定義id，建議為目前頁面唯一，如果頁面有多個翻頁元件。
  2. 為div建立一個同級的form表單。
    • rel屬性指向div，表明該form表單屬于support_deal_page的div。
    • target屬性為turnPageForm，表明該form為翻頁元件的form。
    • action 參數自然不可或缺。
    • 定義page 的input标簽，表明為第一頁。
    • 定義rows的input标簽，表明每頁有顯示兩個。

div定義完後，頁面加載load的時候，我們就可以請求背景（背景怎麼處理資料，這裡就不羅嗦了），擷取第一頁的分頁資料。

// 根據form的target屬性，擷取需要分頁的div，發起ajax請求。
$("form[target=turnPageForm]", $p).each(function() {
    var $this = $(this);
    YUNM.debug('form[target=turnPageForm]' + $this.selector);

    var rel = $this.attr("rel");
    var $box = $this.parent().find("#" + rel);

    if (rel) {
        $box.ajaxUrl({
            type : "POST",
            // 記錄div的id
            url : $this.attr("action") + "?rel=" + rel,
            data : $this.serializeArray(),
            callback : function() {
            }
        });
    }
});

ajaxUrl : function(op) {
    var $this = $(this);

    $.ajax({
        type : op.type || 'GET',
        url : op.url,
        data : op.data,
        cache : false,
        success : function(response) {
            var json = YUNM.jsonEval(response);

            if (json[YUNM.keys.statusCode] == YUNM.statusCode.error) {
                if (json[YUNM.keys.message])
                    $.showErr(json[YUNM.keys.message]);
            } else {
                // ajax請求擷取成功後，将局部重新整理的内容放到div中
                $this.html(response).initUI();

                if ($.isFunction(op.callback))
                    op.callback(response);
            }
        },
        error : YUNM.ajaxError,
        statusCode : {
            503 : function(xhr, ajaxOptions, thrownError) {
                $.showErr("伺服器目前負載過大或者正在維護!" || thrownError);
            }
        }
    });
},

頁面首次加載的時候，我們将第一頁的資料放到div中，這一步也很簡單。

三、封裝翻頁元件 yunm.pager.js

完成第一步後，如何将翻頁元件封裝，就成為接下來的關鍵步驟了。

(function($) {
    $.fn.extend({
        pager : function(opts) {
            // 可參照bootstrap的翻頁，為了獲得前一頁和後一頁的按鈕元件
            var setting = {
                prev$ : "li.previous",
                next$ : "li.next",
            };
            return this.each(function() {
                var $this = $(this);
                var pc = new Pager(opts);

                // 參照bootstrap翻頁
                $this.html('<ul class="pager">' + '<li class="previous"><a href="#">&larr; 前一頁</a></li>' + '<li class="next"><a href="#">後一頁 &rarr;</a></li>'
                        + '</ul>');

                var $prev = $this.find(setting.prev$);
                var $next = $this.find(setting.next$);

                if (pc.hasPrev()) {
                    // 如果有前一頁，綁定前一頁事件
                    _bindEvent($prev, pc.getCurrentPage() - 1, pc.rel());
                } else {
                    // 否則置灰
                    $prev.addClass("disabled");
                }

                if (pc.hasNext()) {
                    _bindEvent($next, pc.getCurrentPage() + 1, pc.rel());
                } else {
                    $next.addClass("disabled");
                }

            });

            // 綁定點選事件，主要傳遞第幾頁
            function _bindEvent($target, pageNum, rel) {
                $target.bind("click", {
                    pageNum : pageNum
                }, function(event) {
                    yunmPageBreak({
                        rel : rel,
                        data : {
                            pageNum : event.data.pageNum
                        }
                    });
                    event.preventDefault();
                });
            }
        },

    });

    // 翻頁的必要參數
    var Pager = function(opts) {
        this.opts = $.extend({
            rel : "", // 用于局部重新整理div id号
            totalCount : 0,//總數
            numPerPage : 10,// 預設顯示10個
            currentPage : 1,// 目前頁
            callback : function() {
                return false;
            }
        }, opts);
    };

    $.extend(Pager.prototype, {
        rel : function() {
            return this.opts.rel;
        },
        // 每頁顯示多少個
        numPages : function() {
            return Math.ceil(this.opts.totalCount / this.opts.numPerPage);
        },
        // 目前頁
        getCurrentPage : function() {
            var currentPage = parseInt(this.opts.currentPage);
            if (isNaN(currentPage))
                return 1;
            return currentPage;
        },
        // 能否向前翻頁
        hasPrev : function() {
            return this.getCurrentPage() > 1;
        },
        // 向後翻頁
        hasNext : function() {
            return this.getCurrentPage() < this.numPages();
        }
    });
})(jQuery);
           
function yunmPageBreak(options) {
    var op = $.extend({
        rel : "",
        data : {
            pageNum : "",
        },
        callback : null
    }, options);

    if (op.rel) {
        var $box = $("#" + op.rel);

        // 獲得局部重新整理的div後，就可以獲得同級的form表單
        var form = $("form[target=turnPageForm]", $box.parent()).get(0);

        if (form) {
            // 第幾頁
            if (op.data.pageNum)
                form[YUNM.pageInfo.pageNum].value = op.data.pageNum;

            $box.ajaxUrl({
                type : "POST",
                url : $(form).attr("action") + "?rel=" + op.rel,
                data : $(form).serializeArray(),
                callback : function() {
                }
            });
        }
    }
}

四、翻頁應用

封裝了翻頁元件後，我們來看看怎麼使用。

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/components/common/taglib.jsp"%>

<c:forEach items="${deal_page}" var="deal">
    ${deal.name}
</c:forEach>
<div class="turnPagePager" rel="${param.rel}" totalCount="${vo.totalCount}" numPerPage="${vo.numPerPage}"
        currentPage="${vo.pageNum}">
  1. 指定div的class為turnPagePager，頁面load的時候我們将其轉換為pager元件。
  2. 将其關鍵屬性rel、totalCount、numPerPage、currentPage進行指派。

頁面load的時候進行轉換：

$("div.turnPagePager", $p).each(function() {
    var $this = $(this);
    $this.pager({
        rel : $this.attr("rel"),
        totalCount : $this.attr("totalCount"),
        numPerPage : $this.attr("numPerPage"),
        currentPage : $this.attr("currentPage")
    });
});

五、分局兩側的翻頁效果

在一的效果圖中，你可以看到第二種效果圖，就是翻頁處于内容的兩側，這個也很常見，那麼我們來看一下實作方法。

①、yunm.pager.js（新） 

(function($) {
    $.fn.extend({
        pager : function(opts) {
            // 可參照bootstrap的翻頁，為了獲得前一頁和後一頁的按鈕元件
            var setting = {
                prev$ : "li.previous",
                next$ : "li.next",
            };
            return this.each(function() {
                var $this = $(this);
                var pc = new Pager(opts);

                if (pc.type() == 'arrow') {
                    $this.html('<ul class="pager">' + '<li class="previous left"><a href="#"></a></li>' + '<li class="next right"><a href="#"></a></li>'
                            + '</ul>');
                } else {
                    // 參照bootstrap翻頁
                    $this.html('<ul class="pager">' + '<li class="previous"><a href="#">&larr; 前一頁</a></li>'
                            + '<li class="next"><a href="#">後一頁 &rarr;</a></li>' + '</ul>');
                }

                var $prev = $this.find(setting.prev$);
                var $next = $this.find(setting.next$);

                if (pc.hasPrev()) {
                    // 如果有前一頁，綁定前一頁事件
                    _bindEvent($prev, pc.getCurrentPage() - 1, pc.rel());
                } else {
                    // 否則置灰
                    if (pc.type() == 'arrow') {
                        $prev.addClass("hide");
                    } else {
                        $prev.addClass("disabled");
                    }
                }

                if (pc.hasNext()) {
                    _bindEvent($next, pc.getCurrentPage() + 1, pc.rel());
                } else {
                    if (pc.type() == 'arrow') {
                        $next.addClass("hide");
                    } else
                        $next.addClass("disabled");
                }

            });

            // 綁定點選事件，主要傳遞第幾頁
            function _bindEvent($target, pageNum, rel) {
                $target.bind("click", {
                    pageNum : pageNum
                }, function(event) {
                    yunmPageBreak({
                        rel : rel,
                        data : {
                            pageNum : event.data.pageNum
                        }
                    });
                    event.preventDefault();
                });
            }
        },

    });

    // 翻頁的必要參數
    var Pager = function(opts) {
        this.opts = $.extend({
            type : "",// 指定翻頁的類型，目前支援兩種樣式
            rel : "", // 用于局部重新整理div id号
            totalCount : 0,// 總數
            numPerPage : 10,// 預設顯示10個
            currentPage : 1,// 目前頁
            callback : function() {
                return false;
            }
        }, opts);
    };

    $.extend(Pager.prototype, {
        rel : function() {
            return this.opts.rel;
        },
        type : function() {
            return this.opts.type;
        },
        // 每頁顯示多少個
        numPages : function() {
            return Math.ceil(this.opts.totalCount / this.opts.numPerPage);
        },
        // 目前頁
        getCurrentPage : function() {
            var currentPage = parseInt(this.opts.currentPage);
            if (isNaN(currentPage))
                return 1;
            return currentPage;
        },
        // 能否向前翻頁
        hasPrev : function() {
            return this.getCurrentPage() > 1;
        },
        // 向後翻頁
        hasNext : function() {
            return this.getCurrentPage() < this.numPages();
        }
    });
})(jQuery);

②、翻頁應用（新） 

<div class="col-md-12 arrow_page">
    <div class="turnPagePager" type="arrow" rel="${param.rel}" totalCount="${vo.totalCount}" numPerPage="${vo.numPerPage}"
        currentPage="${vo.pageNum}"></div>
</div>
  1. 外層的div上加上arrow_page式樣。
  2. 裡層的div加上type屬性，指定為arrow。

頁面加載時：

$("div.turnPagePager", $p).each(function() {
    var $this = $(this);
    YUNM.debug('div.turnPagePager' + $this.selector);

    $this.pager({
        rel : $this.attr("rel"),
        type : $this.attr("type"),// 設定type
        totalCount : $this.attr("totalCount"),
        numPerPage : $this.attr("numPerPage"),
        currentPage : $this.attr("currentPage")
    });
});

新增式樣

.arrow_page {
    padding: 0;
    height: 0;
}

.pager .left>a,.pager .left>a:HOVER,.pager .right>a,.pager .right>a:HOVER {
    cursor: pointer;
    height: 70px;
    width: 30px;
    background: url(../../assets/images/bgs_2.png) no-repeat;
    display: block;
    border: none;
}

.pager .left>a:HOVER {
    background-position: 0 -70px;
}

.pager .right>a:HOVER {
    background-position: 0 -210px;
}

.pager .left>a {
    left: -30px;
    position: absolute;
    top: -240px;
}

.pager .right>a {
    background-position: 0 -140px;
    position: absolute;
    right: -30px;
    top: -240px;
}
json 前端開發 javascript 資料格式 java jquery指定div java資料前端 jquery div滾動條 jquery div排序 javascript前端開發css
上一篇: jQuery Raty - 不錯的星級評分插件
下一篇: 高性能web建站規則（精簡js）

繼續閱讀