MyException - 我的异常网
当前位置:我的异常网» jQuery » jquery.more.js插件 展示更多

jquery.more.js插件 展示更多

www.MyException.Cn  网友分享于:2018-05-16  浏览:0次
jquery.more.js插件 显示更多

【前言】

   分享个显示更多的插件

   原理,将后台数据整个发到前端。所以缺点就是不适用于大数据页面

 

【主体】

<!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以上即可

 

 

 

 

 

 

 

.

文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有