jQuery 显示加载更多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
(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).show();
}
return cnt - n;//返回还剩余的隐藏子元素的数量
}
jQuery.showMore = function (selector) {
if (selector == undefined) { selector = ".showMoreNChildren" }
//对页中现有的class=showMorehandle的元素，在之后添加显示更多条，并绑定点击行为
$(selector).each(function () {
var pagesize = $(this).attr("pagesize") || 10;
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();
};
});
}
});
}
})()
</script>
</head>
<body>
<ul class="showMoreNChildren" pagesize="5">
<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>m</li>
<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>m</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> -->
<script type="text/javascript">
//调用显示更多插件。参数是标准的 jquery 选择符
$.showMore(".showMoreNChildren,.mynews");
</script>
</body>
</html>
jQuery 显示加载更多的更多相关文章
- jQuery 显示加载更多(节流) 实现预加载
(function () { var showMoreNChildren = function ($children, n) { //显示某jquery元素下的前n个隐藏的子元素 var $hidde ...
- jQuery自动加载更多程序
1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...
- jQuery自动加载更多程序（转）
jQuery自动加载更多程序 1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据 ...
- jquery 显示“加载状态 结束”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery实现加载更多效果
情况是当滑动条滑动到最底部的时候,数据显示出一部分的更多 思路:获取到浏览器屏幕的高度client,文档的高度h和滑动距离顶部的距离scroll,当h<=client+scroll的时候就是滑动 ...
- IOS - UITableView分批显示数据 实现点击加载更多
Phone屏幕尺寸是有限的,如果需要显示的数据很多,可以先数据放到一个table中,先显示10条,table底部有一察看更多选项,点击察看更多查看解析的剩余数据.基本上就是数据源里先只放10条, 点击 ...
- Android之Socket通信、List加载更多、Spinner下拉列表
Android与服务器的通信方式主要有两种,一是Http通信,一是Socket通信.两者的最大差异在于,http连接使用的是“请求—响应方式”,即在请求时建立连接通道,当客户端向服务器发送请求后,服务 ...
- tableView 加载更多
在ios开中中,由于屏幕尺寸限制,如果需要显示的数据很多,需要用到分页加载. 原理:先数据放到一个table中,先显示10条,table底部有一察看更多选项,点击察看更多查看解析的剩余数据.基本上就是 ...
- 【jquery ，ajax，php】加载更多实例
jquery $(function() { //初始化 getData(0); var index = 1; $("#more").click(function() { getDa ...
随机推荐
- jQuery基础学习8——层次选择器next()和prev()方法
$('.one + div').css("background","#bbffaa"); //和next()方法是等价的,前后关系,和prev()方法是对立的 ...
- Nginx 禁止IP访问
我们在使用的时候会遇到很多的恶意IP攻击,这个时候就要用到Nginx 禁止IP访问了.下面我们就先看看Nginx的默认虚拟主机在用户通过IP访问,或者通过未设置的域名访问(比如有人把他自己的域名指向了 ...
- freemaker遍历嵌套list的map
<#if disMap?exists> <#list disMap?keys as key> <#if ((disMap[key]))??&&((disM ...
- mime type 概要介绍
内容类型 内容类型(Content-Type),这个头部领域用于指定消息的类型.一般以下面的形式出现. Content-Type: [type]/[subtype]; parameter type t ...
- Visifire的一些使用心得
1.如何让图表的Y轴不从0开始显示:有时一系列的数据差别很小,如果从0开始显示,在Y轴上,会一堆数据都堆在某一个区间.例如期货的蜡烛图.将ViewportRangeEnabled设为true即可解决此 ...
- LinkedList类
LinkedList类 LinkedList类和ArrayList,Vector基本相同,都有增.删.改.查等方法.LinkedList是继承List接口. import java.util.*; p ...
- ADO.NET 快速入门（二）：执行命令
Commands发出针对数据库的数据存储动作.例如,你可以执行一条命令插入或者删除数据.获取更多从数据库移动数据相关的信息,请参考“Update a Database from a DataSet”. ...
- 文件映射spring 使用classpath方式加载hibernate映射文件
在改章节中,我们主要介绍文件映射的内容,自我感觉有个不错的建议和大家分享下 <!-- 批量指定到classpath下面 --> <property name="mappin ...
- 第一周：读取XML深度数据并将其重建为三维点云
本周主要任务:学习PCL点云库,掌握利用PCL对点云处理的方法 任务时间:2014年9月1日-2014年9月7日 任务完成情况:完成了读取单幅xml深度数据,并重建三维点云并显示 任务涉及基本方法: ...
- SAP ABAP程序下载器（增强版）
在实际的项目中运用过几次 Mass download 这个程序,发现下载ABAP代码还真是利器,目前最新的版本是1.4.4,已经n年没有更新过了.使用过程中,发现其导出的HTML格式的代码有问题,包括 ...