纸上得来终觉浅，绝知此事要躬行。

 

闲来无聊花了30分钟写的分页

直接贴上代码，因为没什么好说的：

 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>分页</title>
    <style type="text/css">
        body{font-size:12px; font-family:"Courier New", Courier, monospace;}
        #custom_page div{margin-left:5px; margin-right:5px; padding:3px; float:left; cursor:default; padding-top:5px\9;
            height:20px; width:65px;}
        #custom_page span{border:1px solid #999; margin-left:5px; margin-right:5px; padding:3px;
            display:block; cursor:default; min-width:15px; float:left; text-align:center; padding-top:5px\9;}
        .current_item{background-color:#cccccc;}
        .pre_btn_class{background-image:url(pre.gif); background-position:-73px -2px; background-repeat:no-repeat;}
        .pre_btn_class_none{background-image:url(pre.gif); background-position:-1px -2px; background-repeat:no-repeat;}
        .next_btn_class{background-image:url(next.gif); background-position:-73px -2px; background-repeat:no-repeat;}
        .next_btn_class_none{background-image:url(next.gif); background-position:-1px -2px; background-repeat:no-repeat;}
    </style>
    <script type="text/javascript">
        (function(){
            window.custom = {};
            custom.init = function(page_body_id,callback){
                var page_body = document.getElementById(page_body_id);
                custom.total_pages = 10;    // 总页数
                custom.current_page = 1;    // 当前页
                custom.first_page = 1;        // 第一页第一个页码
                custom.last_page = 10;        // 第一页最后一个页码
                custom.before = null;        // 点击的前一个元素
                custom.pre_page = null;        // 表示上一页元素
                custom.next_page = null;    // 表示下一页元素
                
                // 上一页Click事件
                custom.pre_page_click = function(e){
                    custom.before.style.backgroundColor="#ffffff";
                    if(custom.current_page > custom.first_page){
                        custom.current_page = custom.current_page - 1;
                        custom.before.previousSibling.style.backgroundColor="#cccccc";
                        custom.before = custom.before.previousSibling;
                        custom.next_page.style.backgroundColor="#ffffff";
                        custom.update_pre_pages(e);
                        callback(custom.current_page);
                    }else{
                        custom.before.style.backgroundColor = "#cccccc";
                        //custom.sl("first");    
                    }
                    if(custom.next_page.className != "next_btn_class"){
                        custom.next_page.className = "next_btn_class";
                    }
                };
                // 下一页Click事件
                custom.next_page_click = function(e){
                    if(custom.current_page === custom.total_pages){
                        return;    
                    }
                    custom.before.style.backgroundColor="#ffffff";
                    if(custom.current_page != custom.total_pages){
                        custom.current_page = custom.current_page + 1;
                        custom.before.nextSibling.style.backgroundColor="#cccccc";
                        custom.before = custom.before.nextSibling;
                        custom.pre_page.style.backgroundColor="#ffffff";
                        custom.update_next_pages(e);
                        if(custom.current_page > 1){
                            custom.pre_page.className = "pre_btn_class";    
                        }
                        callback(custom.current_page);
                    }else{
                        custom.before.style.backgroundColor = "#cccccc";
                        //custom.sl("last");    
                    }
                };
                // 页码Click事件
                custom.go_page = function(e){
                    if(custom.before != null){
                        custom.before.style.backgroundColor="#ffffff";
                        custom.before = e;
                        custom.current_page = parseInt(e.innerHTML);
                        callback(custom.current_page);
                    }
                    switch(custom.current_page){
                        case 1:
                            custom.pre_page.className = "pre_btn_class_none";
                            custom.next_page.className = "next_btn_class";
                            break;
                        case custom.total_pages:
                            custom.pre_page.className = "pre_btn_class";
                            custom.next_page.className = "next_btn_class_none";
                            break;
                        case custom.first_page:
                            custom.update_pre_pages(e);
                            break;
                        case custom.last_page:
                            custom.update_next_pages(e);
                            break;
                        default:
                            custom.pre_page.className = "pre_btn_class";
                            custom.next_page.className = "next_btn_class";
                            break;
                    }
                    e.style.backgroundColor="#cccccc";
                };
                // 生成页码
                custom.build_page_items = function(start,end,cp){
                    custom.current_page = cp;
                    custom.first_page = start;
                    custom.last_page = end;
                    var tempHTML = "<div class='pre_btn_class' onclick='custom.pre_page_click(this)'></div>";
                    for(var i = start; i <= end; i++){
                        if(i === custom.current_page){
                            tempHTML += ("<span class='current_item' onclick='custom.go_page(this)'>" + i + "</span>");    
                        }else{
                            tempHTML += ("<span onclick='custom.go_page(this)'>" + i + "</span>");        
                        }
                    }
                    tempHTML += ("<div class='next_btn_class' onclick='custom.next_page_click(this)'></div>");
                    page_body.innerHTML = tempHTML;
                    if(custom.current_page != custom.first_page){
                        page_body = document.getElementById(page_body_id);
                    }
                    custom.pre_page = page_body.childNodes[0];
                    custom.pre_page.className = ((custom.current_page === custom.first_page) ? "pre_btn_class_none" : "pre_btn_class");
                    custom.next_page = page_body.lastChild;
                    //custom.before = page_body.childNodes[1];
                    for(var nodeNum = 0;nodeNum < page_body.childNodes.length; nodeNum++){
                        if(page_body.childNodes[nodeNum].className === "current_item"){
                            custom.before = page_body.childNodes[nodeNum];
                            return;
                        }
                    }
                };
                // 点击下一页当需要时更新当前显示的页码
                custom.update_next_pages = function(e){
                    if(custom.current_page === custom.total_pages){
                        e.className = "next_btn_class_none";
                    }else if(custom.current_page === custom.last_page){
                        //e.className = "next_btn_class_none";
                        var tempV = 1;
                        while(true){
                            tempV = tempV + 1;
                            custom.first_page = custom.first_page + 1;
                            custom.last_page = custom.last_page + 1;
                            if(custom.last_page === custom.total_pages){
                                break;
                            }else if(tempV === 5){
                                break;
                            }
                        }
                        custom.build_page_items(custom.first_page,custom.last_page,custom.current_page);
                    }
                };
                // 点击上一页当需要时更新当前显示的页码
                custom.update_pre_pages = function(e){
                    if(custom.current_page === 1){
                        custom.pre_page.className = "pre_btn_class_none";
                    }else if(custom.current_page === custom.first_page){
                        var tempV = 1;
                        while(true){
                            tempV = tempV + 1;
                            custom.first_page = custom.first_page - 1;
                            custom.last_page = custom.last_page - 1;
                            if(custom.first_page === 1){
                                break;
                            }else if(tempV === 5){
                                break;
                            }
                        }
                        custom.build_page_items(custom.first_page,custom.last_page,custom.current_page);
                    }
                };
            };
        })();
    </script>
</head>

<body>
    <div id="custom_page"></div>
    <script type="text/javascript">
        custom.init("custom_page",callback);
        custom.total_pages=25;
        custom.build_page_items(1,15,1);
        function callback(current_page){
            document.getElementById("test").innerHTML = "callback value is : <font color='red'>" + current_page + "</font>";
        }
    </script>
    <div id="test"></div>
</body>
</html>

 

效果图如下：

使用方法相当简单调用init函数、设置总页数、生成页码，在生成页码的同时要给一个回调函数。这个回调函数传回的是当前页码。

下载地址：源码

posted on 2012-08-15 12:19  JRoger  阅读(309)  评论(0)  编辑  收藏  举报

导航