toly插件01之Jquery分页插件--toly-span

0.效果

1.使用

1-1.引用

    <!--jquery.js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="plugs/toly-span/span.css">

1-2.使用

<script src="plugs/toly-span/span.js"></script>
<script>
    $(function () {
        new Span();
    });
</script>

1-3.html的结构：

<div class="container">
    <!--div[toly-span-id="$"]{Page$}*26-->
    <div toly-span-id="1" id="active">Page1</div>
    <div toly-span-id="2">Page2</div>
    <div toly-span-id="3">Page3</div>
    <div toly-span-id="4">Page4</div>
    <div toly-span-id="5">Page5</div>
    <div toly-span-id="6">Page6</div>
    <div toly-span-id="7">Page7</div>
    <div toly-span-id="8">Page8</div>
    <div toly-span-id="9">Page9</div>
    <div toly-span-id="10">Page10</div>
    <div toly-span-id="11">Page11</div>
    <div toly-span-id="12">Page12</div>
    <div toly-span-id="13">Page13</div>
    <div toly-span-id="14">Page14</div>
    <div toly-span-id="15">Page15</div>
    <div toly-span-id="16">Page16</div>
    <div toly-span-id="17">Page17</div>
    <div toly-span-id="18">Page18</div>
    <div toly-span-id="19">Page19</div>
    <div toly-span-id="20">Page20</div>
</div>

1-4.html的样式

    .container {
        width: 400px;
        height: 400px;
        background-color: aquamarine;
        border: 1px solid red;
        margin: 0 auto;
        text-align: center;
    }

额外说一下，三个配置参数

    $(function () {
        new Span({
            MaxLength: 10,//自定义每页显示数目
            slh_p:'<<',//自定义前面省略号
            slh_n:'>>'//自定义后面省略号
        });
    });

源码详见：
link：https://github.com/toly1994328/toly-span.git

到这就能实现上面的效果了。本人写的插件源码见下：

span.js

//使用方法：在需要换页的元素上添加属性：toly-span-id
//注,从1开始，依次往后
(function ($) {
    var Span = function (options) {
        var self = this;//1

        this.dotCount = 0;
        this.options = {//设置默认参数
            MaxLength: 10,
            slh_p:'p...',
            slh_n: '...n'

        };
        $.extend(this.options, options || {});//加载设置用户自定义参数

        var $spans = $('[toly-span-id]');
        var $activeSpans = $('#active');
        $activeSpans.show();

        this.spanDiv = $('<div id="span0-bar">');
        this.bodyNode = $(document.body);
        this.renderDOM($spans.length);//使用方法,为dom添加节点
        this.handleIgnore($spans.length);
        this.handleClick(this, $spans.length);

        //绑定键盘切换事件
        $(window).keyup(function (e) {
            var keyValue = e.keyCode;
            if (keyValue === 37 || keyValue === 38) {

                self.toPer($spans.length);
            }
            if (keyValue === 39 || keyValue === 40) {
                self.toNext($spans.length);
            }
        })
    };

    Span.prototype = {
        //...的点击
        expande: function (num) {
            this.dotCount++;
            $('a').show();
            var $a = $('#span0-bar a');
            for (var i = 0; i < $a.length; i++) {
                var $ai = $($a[i]);
                try {
                    var aiid = parseInt($ai.attr("toly-a-id"));
                } catch (e) {

                }
                var number = this.options.MaxLength * this.dotCount;
                if (aiid < number || (aiid > number + this.options.MaxLength && aiid != num)) {
                    $ai.hide();
                    $($a[num]).text(this.options.slh_n);
                }
            }

            var $showItem = $('a:not([style="display: none;"])');
            console.log($showItem.length);

            if ($showItem.length<=this.options.MaxLength+4) {
                $($showItem[1]).text(this.options.slh_p)

            }

            if ($showItem.length < this.options.MaxLength+3) {
                $($a[num]).text(num);
            }

        },
        //p...的点击
        close: function (num) {
            this.dotCount--;
            $('a').show();
            var $a = $('#span0-bar a');
            for (var i = 0; i < $a.length; i++) {
                var $ai = $($a[i]);
                try {
                    var aiid = parseInt($ai.attr("toly-a-id"));
                } catch (e) {

                }
                var number = this.options.MaxLength * this.dotCount;
                if (aiid < number || (aiid > number + this.options.MaxLength && aiid != num)) {
                    $ai.hide();
                    $($a[num]).text(this.options.slh_n);
                }
            }

            var $showItem = $('a:not([style="display: none;"])');
            $($showItem[1]).text(this.options.slh_p)
            $($showItem[$showItem.length - 3]).text($($showItem[$showItem.length - 3]).attr("toly-a-id"));
            $($a[1]).text(1);


        },
        handleIgnore: function (num) {
            var $activeItem = $('#active');
            var currentId = parseInt($activeItem.attr('toly-span-id'));
            var $a = $('#span0-bar a');
            $($a[num]).text(this.options.slh_n);
            for (var i = 0; i < $a.length; i++) {
                var $ai = $($a[i]);
                try {
                    var aiid = parseInt($ai.attr("toly-a-id"));
                } catch (e) {

                }
                if (aiid > this.options.MaxLength && aiid < num) {
                    $ai.hide();
                }
            }

        },
        toNext: function (num) {
            var $activeItem = $('#active');
            var currentId = parseInt($activeItem.attr('toly-span-id'));

            if (currentId === num) {
                return;
            }

            var $selectItem = $('[toly-span-id=' + (currentId + 1) + ']');

            $selectItem.show();
            $activeItem.hide();
            $activeItem.attr('id', 'no-active');
            $selectItem.attr('id', 'active');


            var $currentA = $('#span0-bar .active');
            var currentAId = parseInt($currentA.attr('toly-a-id'));
            var $nextA = $('[toly-a-id=' + (currentAId + 1) + ']');
            $currentA.removeClass('active');
            $nextA.addClass('active');

            if (currentAId + 1 > this.options.MaxLength * (this.dotCount + 1)) {
                this.expande(num);
            }

        },

        toPer: function (num) {
            var $activeItem = $('#active');
            var currentId = parseInt($activeItem.attr('toly-span-id'));

            if (currentId === 1) {
                return;
            }

            var $selectItem = $('[toly-span-id=' + (currentId - 1) + ']');

            $selectItem.show();
            $activeItem.hide();
            $activeItem.attr('id', 'no-active');
            $selectItem.attr('id', 'active');


            var $currentA = $('#span0-bar .active');
            var currentAId = parseInt($currentA.attr('toly-a-id'));

            var $nextA = $('[toly-a-id=' + (currentAId - 1) + ']');
            $currentA.removeClass('active');
            $nextA.addClass('active');
            console.log("{currentAId}--{" + (currentAId) + "}");
            console.log("{this.dotCount}--{" + (this.dotCount) + "}");
            if (currentAId-2 < this.options.MaxLength * (this.dotCount)) {
                this.close(num);
            }
        },

        toHere: function (innerText, a) {
            var $activeItem = $('#active');
            var $selectItem = $('[toly-span-id=' + innerText + ']');
            var activedId = $activeItem.attr('toly-span-id');
            if (innerText != activedId) {
                $selectItem.show();
                $('#active').hide();

                $('#active').attr('id', 'no-active');
                $selectItem.attr('id', 'active');

                $('.active').removeClass('active');
                $(a).addClass('active');
            }
        },
        renderDOM: function (num) {//定义方法1

            var perBtn = '<a class="span1-btn-pre">&lt;</a>';
            var nextBtn = '<a class="span1-btn-next">&gt;</a>';
            //根据toly-span-id元素数量动态获取数量
            var innerli = '';
            for (var i = 1; i <= num; i++) {
                var innerli_a = '<a >';

                innerli_a += i;
                var innerli_z = '</a>\n';
                innerli_a += innerli_z;
                innerli += innerli_a;
            }
            var spanDivDom = '    <ul>\n' +
                '        <li>\n' + perBtn + innerli + nextBtn +
                '        </li>\n' +
                '    </ul>';

            this.spanDiv.html(spanDivDom);
            this.bodyNode.append(this.spanDiv);

            //为#span0-bar下a元素补添toly-a-id，以便寻找元素
            var $a = $('#span0-bar a');
            for (var i = 0; i < $a.length; i++) {
                $($a[i]).attr("toly-a-id", $($a[i]).text());
            }

            $('[toly-a-id=1]').addClass('active')

        },
        handleClick: function (self, num) {
            $('a').click(function (e) {
                var innerText = e.target.innerText;

                console.log(self.options.slh_n);
                switch (innerText) {
                    case '>':
                        self.toNext(num);
                        break;
                    case '<':
                        self.toPer(num);
                        break;
                    case self.options.slh_n:
                        self.expande(num);
                        break;
                    case self.options.slh_p:
                        self.close(num);
                        break;
                    default:
                        self.toHere(innerText, this);
                        break;
                }
            });

            $('a').mouseenter(function (e) {
                $(this).addClass('hover');
            });

            $('a').mouseleave(function (e) {
                $(this).removeClass('hover');
            })

        },
    };
    window["Span"] = Span;//将插件加载到window
})(jQuery);

span.css()

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}


article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

#span0-bar {
  position: relative;
  height: 50px;
  width: 900px;
  margin: 20px auto;
  text-align: center;
}

#span0-bar ul {
  display: inline;
}

#span0-bar ul li {
  height: 50px;
}

#span0-bar ul li a {
  height: 40px;
  width: 40px;
  background: ghostwhite;
  padding: 10px;
  border-radius: 3px;
  margin-left: 10px;
}

#span0-bar ul li a.active {
  background: #ACBFED;
  color: #F85353;
  -moz-box-shadow: 2px -2px 2px gray inset;
  -webkit-box-shadow: 2px -2px 2px gray inset;
  box-shadow: 2px -2px 2px gray inset;
}

#span0-bar ul li a.hover {
  background: #ACBFED;
}

[toly-span-id] {
  display: none;
}