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"><</a>'; var nextBtn = '<a class="span1-btn-next">></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; }

转载于:https://www.cnblogs.com/toly-top/p/9782013.html

相关资源：FlutterUnit：【Flutter集录指南应用】Flutter的统一，编码器的统一-源码