jquery.page创建分页

来源：互联网发布：php 上传txt 编辑：程序博客网时间：2024/05/18 02:05

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

(function($){    var ms = {        init:function(obj,args){            return (function(){                if (args.pageCount &gt; 1) {                    ms.fillHtml(obj,args);                    ms.bindEvent(obj,args);                }            })();        },        //填充html        fillHtml:function(obj,args){            return (function(){                obj.empty();                //上一页                           if(args.current &gt; 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>

阅读全文

0 0