【前言】
分享个显示更多的插件
原理,将后台数据整个发到前端。所以缺点就是不适用于大数据页面
【主体】
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery.more.js 显示更多</title> <style> *{margin:0;padding:0} ul,li{list-style:none} .box{width:400px;margin:0 auto;} .box h2{text-align:center;font: 22px/2.7 "Microsoft Yahei"} .box li {background:#c2ccc2;padding: 0 5px; border-bottom:1px solid #ddd;margin-bottom:10px;display:none} .box .showMorehandle{ text-align:center; cursor:pointer;margin-bottom: 20px;} </style> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery.more.js"></script> </head> <body> <div class="box"> <h2>jquery.more.js插件 显示更多</h2> <ul class="showMoreNChildren" pagesize="3"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> <li>j</li> <li>k</li> <li>l</li> <li>m</li> <li>n</li> <li>o</li> <li>p</li> <li>q</li> <li>r</li> <li>s</li> <li>t</li> <li>u</li> <li>v</li> <li>w</li> <li>x</li> <li>y</li> <li>z</li> </ul> <ul class="mynews" pagesize="4"> <li>news 11</li> <li>news 12</li> <li>news 13</li> <li>news 14</li> <li>news 21</li> <li>news 22</li> <li>news 23</li> <li>news 24</li> <li>news 31</li> <li>news 32</li> <li>news 33</li> <li>news 34</li> </ul> </div> <script type="text/javascript"> //调用显示更多插件。参数是标准的 jquery 选择符 $.showMore(".showMoreNChildren,.mynews"); </script> </body> </html>
(function () { var showMoreNChildren = function ($children, n) { //显示某jquery元素下的前n个隐藏的子元素 var $hiddenChildren = $children.filter(":hidden"); var cnt = $hiddenChildren.length; for ( var i = 0; i < n && i < cnt ; i++) { $hiddenChildren.eq(i).slideDown(); } return cnt-n;//返回还剩余的隐藏子元素的数量 } //对页中现有的class=showMorehandle的元素,在之后添加显示更多条,并绑定点击行为 $.showMore = function (selector) { if (selector == undefined) { selector = ".showMoreNChildren" } $(selector).each(function () { var pagesize = $(this).attr("pagesize") || 10; console.log(pagesize); $(this).find("li:lt("+pagesize+")").show(); var $children = $(this).children(); if ($children.length > pagesize) { for (var i = pagesize; i < $children.length; i++) { $children.eq(i).hide(); } $("<div class='showMorehandle'>显示更多</div>").insertAfter($(this)).click(function () { if (showMoreNChildren($children, pagesize) <= 0) { //如果目标元素已经没有隐藏的子元素了,就隐藏“点击更多的按钮条” $(this).hide(); }; }); } }); } })()
至于jquery版本,1.8以上即可
扫描二维码关注公众号,回复:
199399 查看本文章
.