jquery.페이지 페이지 만들기

(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('
"javascript:;" class="prevPage"> ');
                }else{
                    /*obj.remove('.prevPage');*/
                    obj.append('
"javascript:;" class="disabled"> ');
                }
                // 
                if(args.current != 1 && args.current >= 4 && args.pageCount != 4){ obj.append('
"javascript:;" class="tcdNumber">'+1+''); } if(args.current-2 &gt; 2 && args.current <= args.pageCount && args.pageCount > 5){ obj.append('
...
'); } var start = args.current -2,end = args.current+2; if((start &gt; 1 && args.current < 4)||args.current == 1){ end++; } if(args.current &gt; args.pageCount-4 && args.current >= args.pageCount){ start--; } for (;start <= end; start++) { if(start &lt;= args.pageCount && start >= 1){ if(start != args.current){ obj.append('
"javascript:;" class="tcdNumber">'+ start +''); }else{ obj.append('
"current">'+ start +''); } } } if(args.current + 2 &lt; args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){ obj.append('
...
'); } if(args.current != args.pageCount &amp;& args.current < args.pageCount -2 && args.pageCount != 4){ obj.append('
"javascript:;" class="tcdNumber">'+args.pageCount+''); } //  if(args.current &lt; args.pageCount){ obj.append('
"javascript:;" class="nextPage"> '); }else{ /*obj.remove('.nextPage');*/ obj.append('
"javascript:;" class="disabled"> '); } })(); }, //  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);

.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;
}

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