mass Framework pagination插件

今天為大家帶來mass Framework的分頁插件，非常小巧，不到100行。

參數：

duration

必需。Number。一共有多少個需要進行分頁的物件（如貼子，圖片什么）。

hash

可選。Object。配置對象。

返回值：

mass實例

hash中有如下可選參數:

鍵名	值
show_last:	當分頁過多時，是否顯示最后一頁。
show_first:	當分頁過多時，是否顯示第一頁。
show_next:	當分頁過多時，是否顯示下一頁鏈接。
show_prev:	當分頁過多時，是否顯示上一頁鏈接。
link_class:	普通分頁的類名，默認為link。
prev_class:	上一頁鏈接的類名，默認為prev_page。
next_class:	下一頁鏈接的類名，默認為next_page。
prev_text:	上一頁鏈接的顯示文本，默認為下一頁>。
next_text:	下一頁鏈接的顯示文本，默認為<上一頁。
curr_page:	當前頁面，注意為了符合普通人的常識，強制最小值是1。
per_pages:	每頁顯示多少條目（貼子，圖片什么的）。
show_pages:	顯示多少個頁碼，默認為10，建議取最中間的那個頁碼,比如是說11取6,可以確保視覺上的對稱性。
show_jump:	是否顯示跳轉框。默認是false。
fill_text：	當分頁過多時，在第一頁與顯示頁之間或者最后一頁與顯示頁之間的用於表示省略的文本，默認是"..."
callback:	當點擊分頁欄中的鏈接或跳轉框時觸發的回調，第一個參數是事件對象，第二參數是分頁欄對象，第三個參數是頁碼， this指向當前點擊的元素節點。

在回調函數中，我們可以調用分頁欄對象的render方法重新渲染自身。

例子

                <div id="box"></div">
            

            .pagination a , .pagination span{
                border: 1px solid #9AAFE5;
                color: #2E6AB1;
                margin: 0 2px;
                padding: 2px 5px;
                text-decoration: none;
            }
            .pagination span{
                background-color: #2E6AB1;
                border: 1px solid navy;
                color: #FFFFFF;
                font-weight: bold;
            }
            .pagination input{
                width:20px;
            }
            

            $.require("ready,more/pagination",function(){
                $("#box").pagination(120,{
                    curr_page:7,
                    per_pages:10,
                    show_pages:8,
                    show_jump:true,
                    callback: function(e, ui, i){
                        e.preventDefault();
    
                        ui.curr_page = i;
                        ui.render();
                        return false;
                    }
                })
            })
            

//by 司徒正美 2012.2.22
$.define("pagination","event",function(){
    var defaults = {
        show_last: true,
        show_first:true,
        show_prev: true,
        show_next: true,
        link_class: "link",
        prev_class: "prev_page",
        next_class: "next_page",
        next_text: "下一頁>",
        prev_text: "<上一頁",
        curr_page: 1,//都是從1開始的
        per_pages: 10,//每頁顯示多少條目
        show_pages:10,//顯示多少個頁碼,建議取最中間的那個頁碼,比如是說11取6,可以確保視覺上的對稱性
        fill_text:"...",
        show_jump:false,//是否顯示跳轉框
        callback: function(e, ui , i){}
    }
    function createLink(tag, index, text, cls){
        return tag == "a" ?  $.format('<#{tag} class="#{cls}" data-page="#{index}" href="?page=#{index}">#{text}<\/#{tag}>',{
            tag: tag,
            index: index,
            text: text,
            cls: cls
        }) : text
    }
    var Pager = $.factory({
        init: function( target, total, option ){
            if( isFinite( total ) ){
                this.total = total;
            }else{
                throw "第一個參數必須是一個正整數"
            }
            var opt = $.Object.merge( {}, defaults, option || {});
            this.target = target;
            for(var i in opt){
                this[i] = opt[i];
            }
            this.render();
        },
        render: function(){
            var max = this.total_pages = Math.ceil( this.total / this.per_pages),//計算總頁數
            count = this.show_pages = Math.min( this.show_pages, this.total_pages ),//計算還剩下多少頁要生成
            curr = this.curr_page, add_more = false, link = this.link_class;
            curr = this.curr_page = curr < 1 ? 1 : curr > this.total_pages ? this.total_pages : curr;
            //生成當前頁
            var html = [ createLink( "span", curr ,curr,"current_page") ], left = curr-1,  right = curr + 1;
            --count ;
            //當成中間要顯示的頁
            while( count > 0 ) {
                if( left >= 1 && count != 0 ) {//在日常生活是以1開始的
                    html.unshift( createLink( "a", left--, left + 1, link ) );
                    --count
                }
                if( right <= max && count != 0 ) {
                    html.push( createLink( "a", right, right++ , link ) );
                    --count;
                }
            }
            var space = left ;
            if( space > 1 ){//如果有至少兩個位置,則可以用它放置第一頁與省略號
                html.unshift( createLink( "code", 0, this.fill_text ) );//添加省略號
                add_more = true;//如果有省略號肯定能向前翻
            }
            if( space >= 1 && this.show_first ) {//只要留有至少一個空位,就可以顯示最后一頁
                html.unshift( createLink("a", 1, 1, link ) );
            }
            if( add_more  && this.show_prev ) {//如果允許顯示上一頁
                html.unshift( createLink("a", curr - 1, this.prev_text, this.prev_class ) );
            }
            space = max - (right-1), add_more = false;
            if( space > 1 ) {//如果有至少兩個位置,則可以用它放置最后一頁與省略號
                html.push( createLink( "code", 0, this.fill_text ) );//添加省略號
                add_more = true;//如果有省略號肯定能向后翻
            }
            if( space >= 1 && this.show_last ) {//只要留有至少一個空位,就可以顯示最后一頁
                html.push( createLink( "a",max, max, link ) );
            }
            if( add_more  && this.show_next ) {//如果允許顯示下一頁
                html.push( createLink( "a", curr + 1, this.next_text, this.next_class ) );
            }
            if( this.show_jump ){
                html.push( "<kbd>跳轉到第<input \/>頁<\/kbd>" );
            }
            html.unshift( '<div class="pagination">' );
            html.push( '<\/div>' );
            this.target.html( html.join("") );//每次都會清空目標元素,因此記得找個空標簽來放分頁欄啊
        }
    });

    $.fn.pagination = function( total, opt ){
        var ui = new Pager( this, total, opt );
        return this.delegate("a,input", "click",function(e){
            if( typeof ui.callback == "function" ){
                return ui.callback.call( this, e, ui, ~~this.getAttribute("data-page") );
            }
        })
    }
});