学步园

今天为大家带来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") );
            }
        })
    }
});