jQuery插件:一个仿百度搜索分页插件

jQuery插件:一个仿百度搜索分页插件,风格可以自己设置,推荐使用bootstrap配合使用。

先贴代码:

(function ($) {
    $.fn.pagination = function (curr, all, count) {
        //容错处理
        if (all <= 0) {
            all = 1;
        }
        if (curr <= 0) {
            curr = 1;
        } else if (curr > all) {
            curr = all;
        }
        //默认显示页数为10
        if (!count) {
            count = 10;
        } else if (count < 1) {
            count = 1;
        }
        //计算显示的页数
        var from = curr - parseInt(count / 2);
        var to = curr + parseInt(count / 2) + (count % 2) - 1;
        //显示的页数容处理
        if (from <= 0) {
            from = 1;
            to = from + count - 1;
            if (to > all) {
                to = all;
            }
        }
        if (to > all) {
            to = all;
            from = to - count + 1;
            if (from <= 0) {
                from = 1;
            }
        }
        //写入(可以根据自己需求修改)
        if (curr > 1) {
            var prev = $("
  • «
  • "
    ); this.append(prev); } for (var i = from; i <= to; i++) { if (i == curr) { var li = $("
  • " + i + "
  • "
    ); this.append(li); } else { var li = $("
  • " + i + "
  • "
    ); this.append(li); } } if (curr < all) { var prev = $("
  • »
  • "
    ); this.append(prev); } } })(jQuery);

    使用方法

    $().pagination(curr,all,count); //方法函数
    // $() 是一个jquery对象,如 $(".box")、$("#box")、$("div")
    // 参数curr是当前页数
    // 参数all表示总页数
    // 参数count可选,默认为10,表示显示的最大页数范围

    示例如下:

    
    <html>
        <head>
            <meta charset="utf-8">
            <link rel="stylesheet" type="text/css" href="bootstrap.min.css" /> 
            <script type="text/javascript" src="jquery-2.1.4.min.js">script> 
            <script type="text/javascript" src="pagination.js">script> 
        head>
        <body>
             <div class="pagination" id="p1">div> <br>
             <div class="pagination" id="p2">div> <br>
             <div class="pagination" id="p3">div> <br>
             <div class="pagination" id="p4">div> <br>
             <div class="pagination" id="p5">div> <br>
             <div class="pagination" id="p6">div>
    
             <script type="text/javascript">
                   $("#p1").pagination(0,30,10);
                   $("#p2").pagination(2,5);
                   $("#p3").pagination(2,30,10);
                   $("#p4").pagination(9,30,10);
                   $("#p5").pagination(28,30,10);
                   $("#p6").pagination(40,30,10);   
             script>
        body>
    html>

    示例截图
    jQuery插件:一个仿百度搜索分页插件_第1张图片

    下载DEMO
    http://download.csdn.net/download/peakchen_90/9601276

    你可能感兴趣的:(javascript,jQuery)