`

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

 

 

 

 

 

 

 

.

分享到:
评论

相关推荐

    php+mysql+jquery.more.js下拉加载带sql数据完整流程带mysql测试数据

    `js`目录则包含了除`jquery.more.js`之外的其他JavaScript文件,比如可能有一些辅助脚本或自定义的业务逻辑。 总的来说,这个项目展示了如何将前端交互(jQuery的下拉加载功能)与后端处理(PHP和MySQL)相结合,...

    jquery.min.js 3.6.4版本

    jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的...

    jquery-3.5.1.js/min.js

    首先,jQuery的核心理念是“Write Less, Do More”,即通过提供一系列简洁的API,让开发者可以更高效地处理DOM操作、事件处理、动画效果以及Ajax交互。在"jquery-3.5.1.js/min.js"中,我们看到的是经过压缩和优化的...

    jquery.infinitescroll.js演示示例以及常用参数

    jQuery Infinite Scroll,也称为`infinitescroll.js`,是一款广泛使用的JavaScript插件,它实现了网页内容的自动滚动加载,即当用户滚动到页面底部时,新的内容会自动加载,无需手动翻页。这种功能常用于博客、新闻...

    Jquery+Jquery.metadata.js

    首先,jQuery的核心理念是"Write Less, Do More",它的API设计简洁而强大,使得开发者可以以更少的代码完成更多的任务。在描述中提到的“验证方式”,通常是指在前端进行表单验证,这是一种提升用户体验并减轻服务器...

    jquery-2.1.1.js 、jquery-2.1.1.min.js 【jquery包 js】

    通过封装常见的DOM操作、事件处理、动画效果和Ajax交互等,jQuery让开发者用更少的代码实现更多的功能。在2.1.1这个版本中,它保持了这一特点,并进行了优化,提高了性能和兼容性。 jQuery的引入通常有两种形式:未...

    jquery-2.1.4.js 、jquery-2.1.4.min.js 【jquery包 js】

    在"jquery-2.1.4.js"中,包含了完整的jQuery库,提供了所有可用的功能和插件支持。这个版本的jQuery修复了一些已知问题,增强了性能,同时保持了向后兼容性,是开发阶段的理想选择,因为其便于调试和测试。 而...

    jquery.infinitescroll滑动加载更多

    `jQuery.InfiniteScroll`是一个流行的JavaScript插件,用于实现网页内容的无限滚动效果。这个插件主要用于提升用户体验,当用户滚动页面到底部时,它会自动加载更多内容,无需手动点击“加载更多”按钮。这种技术常...

    jquery-1.3.2.js和jquery.min-1.3.2.js

    "jquery.min-1.3.2.js"是经过压缩和混淆后的版本,体积更小,加载速度更快,适用于生产环境。而"jquery-1.3.2.js"则是未压缩的源码版本,更适合学习和调试。这两个文件在项目中根据需求进行选择。 jQuery的事件处理...

    Jquery和jquery的常用插件

    这些插件进一步扩展了jQuery的功能,提供了更多实用的组件和功能,以满足Web开发中的各种需求。 1. **zTree**:zTree是一个强大的基于jQuery的树形插件,广泛应用于网站的导航菜单、数据展示、文件目录管理等场景。...

    jquery.js 工具文件

    jQuery的核心理念是"Write Less, Do More",即用更少的代码实现更多的功能。它的设计目标是使JavaScript编程变得更加简单,通过封装JavaScript常用的功能代码,提供了一种更方便的操作DOM(文档对象模型)、处理事件...

    jquery.1.11.1.js 和 jquery.1.11.1.min.js

    jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的...

    jquery-1.10.2.min.js

    6. **插件生态**:jQuery拥有丰富的插件生态系统,如jQuery UI、jQuery Validate等,它们为开发者提供了更多扩展功能,满足多样化的需求。 三、jQuery 1.10.2.min.js的版本意义 版本号1.10.2表明这是一个稳定版,...

    jquery.loadmore.js

    今天我们将详细探讨一个自编的jQuery插件——jquery.loadmore.js,尽管它在实际应用中的效果并不尽如人意,但我们可以从中学习到一些基础原理和技巧,为以后的开发积累经验。 一、jQuery插件的基本结构 jQuery插件...

    jQuery/jquery-1.7.2.min.js jquery-1.7.2.js 文件

    jQuery的核心理念是"Write Less, Do More",它通过简洁的API使得开发者能够用更少的代码实现更多的功能。 **版本解析** 在提供的文件中,我们有两个版本的jQuery:`jquery-1.7.2.min.js`和`jquery-1.7.2.js`。这两...

    jQuery内容显示与隐藏插件readmore.js

    《jQuery内容显示与隐藏插件readmore.js详解》 在网页设计中,处理大量文本的显示与隐藏是一项常见的需求。为了提升用户体验,开发者们通常会采用"阅读更多"的交互方式,让页面保持简洁,同时给予用户选择是否展开...

    Bootstrap.js以及JQuery.js中文文档.rar

    Bootstrap.js和jQuery.js是Web开发中的两个重要框架,它们极大地简化了前端开发的复杂性,提高了效率。这里我们主要探讨这两个库的中文文档及其在CHM格式中的内容。 首先,让我们了解一下jQuery.js。jQuery是一个轻...

    jQuery移动端下拉刷新、上拉加载更多插件

    **jQuery移动端下拉刷新、上拉加载更多插件——dropload.js详解** 在移动设备上,用户经常需要滚动页面以查看更多的内容或者刷新数据。为了提高用户体验,许多开发者引入了下拉刷新(Pull-to-Refresh)和上拉加载更...

    jquery-1.2.1.js和ajaxfileupload.js

    jQuery的核心理念是"Write Less, Do More",即用更少的代码实现更多的功能。在jQuery 1.2.1这个版本中,它提供了许多实用的功能,如选择器(用于查找HTML元素)、遍历(遍历DOM树)、属性操作、事件绑定等。此外,这...

    jquery.1.11.1.js

    综上所述,jQuery 1.11.1.js 文件作为这个库的一个版本,包含了许多实用的功能,对于理解和使用 JavaScript 进行网页开发有着重要的意义。学习并熟练掌握 jQuery,能显著提高开发效率,简化前端工作流程。

Global site tag (gtag.js) - Google Analytics