翻页按钮的完整实现（适配手机）

来源：互联网发布：淘宝怎么指纹支付编辑：程序博客网时间：2024/06/10 05:00
注释我已经写得很想写了，应该都可以看懂，翻页实现的效果很好，还做了手机适配处理<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script><title>pagebar</title><style type="text/css">    body,div,ul,li{        margin:0;        padding:0;        font:14px/1.42857 'Microsoft YaHei','微软雅黑',Arial,'Helvetica Neue','Myriad Pro', 'Hiragino Sans GB',  'WenQuanYi Micro Hei', sans-serif;    }    .page_bar{        text-align:center;    }    .page_bar>ul{        display:inline-block;        margin: 20px 0;    }    .page_bar li{        list-style:none;        background-color: #fff;        border: 1px solid #ddd;        color: #337ab7;        float: left;        display: inline;        margin-left: -1px;        padding: 6px 12px;        position: relative;        text-decoration: none;        cursor:pointer;    }    .page_bar .active{        background-color: #337ab7;        border-color: #337ab7;        color: #fff;        cursor: default;        z-index: 2;    }    .page_bar .disabled{        color: #777;        cursor: not-allowed;        background-color: #fff;        border-color: #ddd;    }    .page_bar li:last-child{        border-bottom-right-radius: 4px;        border-top-right-radius: 4px;    }    .page_bar li:first-child{        border-bottom-left-radius: 4px;        border-top-left-radius: 4px;    }</style></head><body>    <div id="page_bar" class="page_bar"></div> <!--翻页按钮-->    <script>        var page_bar_num =10;//bar按钮的个数        var page = 1;//当前页        var max_page = 25;//最大页        $(function(){            list(max_page,page);        });        $('#page_bar').on('click','#first',function(){//首页按钮触发            if(page<=1){                return ;            }            page = 1;            list(max_page,page);            }        );        $('#page_bar').on('click','#last',function(){//末页按钮触发            if(page>=max_page){                return ;            }            page = max_page;            list(max_page,page);            }        );        $('#page_bar').on('click','#prev',function(){//前一页按钮触发            if(page <= 1){                return;            }            page -= 1;            list(max_page,page);            }        );        $('#page_bar').on('click','#next',function(){//后一页按钮触发            if(page >= max_page){                return;                }            page += 1;            list(max_page,page);            }        );        $('#page_bar').on('click','.numbtn',function(){//数字按钮触发            page = $(this).find('span').html();//找到数字按钮中的数据            page = page - -0;//避免点击下一页时+ 当做字符连接 如3的下一页加成了31说 转换成整型            list(max_page,page);            }        );        function list(max_page,page){//实现page_bar 10格的函数            if(max_page < page_bar_num){//总数目没有bar数目多时：                page_bar_num = max_page;            }            var before = 0;//当下页码前面的页数            var bef_num=Math.floor(page_bar_num/2);//Math.floor取小于其的最大整数  翻页条当前页前面的框数            for(var i = page;i>1;i--){                before += 1;                if(before>(page_bar_num-1)){                    break;                    }            }                    var after = 0;//当下页码后面的页数            var aft_num=(page_bar_num-bef_num-1);//翻页条当后页前面的框数            for(var i = page;i<max_page;i++){                after += 1;                if(after >= (page_bar_num-1)){                    break;                    }            }            var arr_page = [page];//存显示出来的page数组            if(before >=bef_num && after >= aft_num){//前后的页数都大于前后的框数                for(var i=0;i<bef_num;i++){//取出前面的页数放到框里                    var p = page - (i+1);                    arr_page.push(p);                }                for(var i=0;i<aft_num;i++){//取出后面的页数放到框里                    var p = page + (i+1);                    arr_page.push(p);                }            }else if(before > bef_num && after < aft_num){//前面页数大于框数，后面的小于框数                    var new_pre_num = page_bar_num - after - 1;    //前面的新框数                    for(var i=0;i<new_pre_num;i++){                                    var p = page - (i+1);                        arr_page.push(p);                     }                    for(var i=0;i<after;i++){                        var p = page + (i+1);                        arr_page.push(p);                    }            }else if(before < bef_num && after > aft_num){//前面页数小于框数，后面的大于框数                        for(var i=0;i<before;i++){                                            var p = page - (i+1);                            arr_page.push(p);                        }                        for(var i=0;i<page_bar_num-before-1;i++){                            var p = page + (i+1);                            arr_page.push(p);                        }            }else{                        for(var i=0;i<after;i++){//前后页数都小于框数                            var p = page - (i+1);                            arr_page.push(p);                        }                        for(var i=0;i<before;i++){                            var p = page + (i+1);                            arr_page.push(p);                        }                    }            arr_page.sort(function compare(a,b){return a-b;});  //排序  function的作用就是比较两个数的大小用的,然后返回结果的正负作为排序的依据  a-b这个函数是升序排序,如果想逆序排序改成return b-a;            var string_html_output = '';            for(var i=0;i<arr_page.length;i++){    //把存储的页数显示出来                if(page ==     arr_page[i]){//当前页显示active样式                    string_html_output += '<li class="active numbtn"><span>' + arr_page[i] + '</span></li>';//当下按钮active                }else{                    string_html_output += '<li class="numbtn"><span>' + arr_page[i] + '</span></li>';                }            }                            var fir_disabled = '';//四个按钮的可用情况            var pre_disabled = '';            var nex_disabled = '';            var las_disabled = '';            if(page <=1 ) {//不可点击                fir_disabled = pre_disabled = 'class="disabled"';            }            if(page >= max_page){//不可点击                nex_disabled = las_disabled = 'class="disabled"';            }                            var fir='<li ' + fir_disabled + '><span id="first"><span>首页</span></span></li>';            var pre='<li ' + pre_disabled + '><span id="prev"><span>上一页</span></span></li>';            var nex='<li ' + nex_disabled + '><span id="next"><span>下一页</span></span></li>';            var las='<li ' + las_disabled + '><span id="last"><span>末页</span></span></li>';            $('#page_bar').html('<ul>' +fir+pre+ string_html_output +nex+las+ '</ul>');//组合成完整的bar                        var width=$(window).width();//适配手机的翻页            if(width<=640){                $(".numbtn").hide();                $(".active").show();            }        }    </script></body></html></html>
0 0