今天为大家带来mass Framework的分页插件，非常小巧，不到100行。

参数：

duration

必需。Number。一共有多少个需要进行分页的物件（如贴子，图片什么）。

hash

可选。Object。配置对象。

返回值：

mass实例

hash中有如下可选参数:

在回调函数中，我们可以调用分页栏对象的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") );}})}
});