jquery.page创建分页

引入jquery.page.js和jquery.page.css，两个文件的内容如下：
jquery.page.js内容为：

(function($){
    var ms = {
        init:function(obj,args){
            return (function(){
                if (args.pageCount > 1) {
                    ms.fillHtml(obj,args);
                    ms.bindEvent(obj,args);
                }
            })();
        },
        //填充html
        fillHtml:function(obj,args){
            return (function(){
                obj.empty();
                //上一页           
                if(args.current > 1){
                    obj.append('<li><a href="javascript:;" class="prevPage">上一页</a></li>');
                }else{
                    /*obj.remove('.prevPage');*/
                    obj.append('<li><a href="javascript:;" class="disabled">上一页</a></li>');
                }
                //中间页码
                if(args.current != 1 &amp;&amp; args.current &gt;= 4 &amp;&amp; args.pageCount != 4){ obj.append('<li><a href="javascript:;" class="tcdNumber">'+1+'</a></li>'); } if(args.current-2 &gt; 2 &amp;&amp; args.current &lt;= args.pageCount &amp;&amp; args.pageCount &gt; 5){ obj.append('<li><span>...</span></li>'); } var start = args.current -2,end = args.current+2; if((start &gt; 1 &amp;&amp; args.current &lt; 4)||args.current == 1){ end++; } if(args.current &gt; args.pageCount-4 &amp;&amp; args.current &gt;= args.pageCount){ start--; } for (;start &lt;= end; start++) { if(start &lt;= args.pageCount &amp;&amp; start &gt;= 1){ if(start != args.current){ obj.append('<li><a href="javascript:;" class="tcdNumber">'+ start +'</a></li>'); }else{ obj.append('<li><span class="current">'+ start +'</span></li>'); } } } if(args.current + 2 &lt; args.pageCount - 1 &amp;&amp; args.current &gt;= 1 &amp;&amp; args.pageCount &gt; 5){ obj.append('<li><span>...</span></li>'); } if(args.current != args.pageCount &amp;&amp; args.current &lt; args.pageCount -2 &amp;&amp; args.pageCount != 4){ obj.append('<li><a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a></li>'); } //下一页 if(args.current &lt; args.pageCount){ obj.append('<li><a href="javascript:;" class="nextPage">下一页</a></li>'); }else{ /*obj.remove('.nextPage');*/ obj.append('<li><a href="javascript:;" class="disabled">下一页</a></li>'); } })(); }, //绑定事件 bindEvent:function(obj,args){ return (function(){ obj.on("click","a.tcdNumber",function(){ var current = parseInt($(this).text()); ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount}); if(typeof(args.backFn)=="function"){ args.backFn(current); } }); //上一页 obj.on("click","a.prevPage",function(){ var current = parseInt(obj.find("span.current").text()); ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount}); if(typeof(args.backFn)=="function"){ args.backFn(current-1); } }); //下一页 obj.on("click","a.nextPage",function(){ var current = parseInt(obj.find("span.current").text()); ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount}); if(typeof(args.backFn)=="function"){ args.backFn(current+1); } }); })(); } } $.fn.createPage = function(options){ var args = $.extend({ pageCount : 10, current : 1, backFn : function(){} },options); ms.init(this,args); } })(jQuery);

jquery.page.css内容为：

.jpage {
    margin-top: 20px;
    width: 100%;
    float:left;
}

ul.jpage,
.jpage ul, 
.jpage ol, 
.jpage li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.jpage li {
    float: left;margin-right: 5px;
}

.jpage li span {
    display: block;
    padding:0 25px;
    text-align: center;
    color: #666;
    height: 35px;line-height: 35px;
}

.jpage li a {
    display: block;
    padding:0 25px;
    text-align: center;
    height: 35px;
    line-height: 35px;
    color: #666;
    /* background: #FFF none repeat scroll 0% 0%;
    border: 1px solid #DADADA; */

    border-radius: 4px;
    border: 1px solid #ddd;

    text-decoration: none;
}

.jpage li a:hover {
    /* display: block;
    padding:0 25px;
    text-align: center;
    height: 35px;
    line-height: 35px; */


    /* color: #fff;
    background: #2CA9E1 none repeat scroll 0% 0%;
    border: 1px solid #2CA9E1; */

    color: #428bca;
    border: 1px solid #428bca;
}

.jpage li .current {
    color: #fff;
    background-color: #428bca;  
    border: 1px solid #428bca;
    border-radius: 4px;
}

.jpage li .disabled {
    color: #bfbfbf;
    background: #f6f6f6;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
}

HTML代码为：

<ul id="page" class="jpage"></ul>
<script>
    $("#page").createPage({
        pageCount:"9",
        current:"2",
        backFn:function(p){
            location.href="xxx.html?pageNo=" + p;
        }
    });
</script>