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 ...
随机推荐
- 转载IEnumerable与IEnumerator区别
public interface IEnumerable { IEnumerator GetEnumerator(); } public interface IEnumerator { ...
- Codeforces Round #353 (Div. 2) D. Tree Construction (二分，stl_set)
题目链接:http://codeforces.com/problemset/problem/675/D 给你一个如题的二叉树,让你求出每个节点的父节点是多少. 用set来存储每个数,遍历到a[i]的时 ...
- OOP 6大基本原则
1.开闭原则: 对扩展开发.对修改关闭. 2.里氏替换原则:子类替换父类(可以用父类对象的任何地方都可以用子类对象代替) 3.依赖倒置原则:程序要依赖于抽象接口,不要依赖于具体实现.简单的说就是要求对 ...
- CentOS6.5安装图形界面
转载自http://www.cnblogs.com/zydev/p/5128788.html 一.使用网络安装(如果网络比较快,这个方法简单) yum groupinstall "Deskt ...
- Oracle数据库文件恢复与备份思路
怎样才能对Oracle数据库进行备份?如何才能对删除的数据再进行恢复?这是困扰着很多人的问题.大家都知道,任何数据库在长期使用过程中,都会存在一定的安全隐患.对于数据库管理员来说不能仅寄希望于计算机操 ...
- my-view-isnt-reflecting-changes-ive-made-to-the-underlying-tables
FROM http://sqlstudies.com/2013/01/20/my-view-isnt-reflecting-changes-ive-made-to-the-underlying-tab ...
- lightOJ 1030(期望)
题意:有一个迷宫是1×n的格子,一个人每到一个格子就能够把这个格子内的金子所有拿走,刚開始站在第1个格子,然后開始掷骰子得到点数x,他就要从当前位置走到加x的位置.假设发现位置是大于n的就又一次掷骰子 ...
- minify合并js和css文件
压缩 JavaScript 和 CSS,是为减少文件大小,节省流量开销:合并 JavaScript 和 CSS,是为了减少请求数量,减轻服务器压力.而这些枯燥又没有技术含量的工作,我们以前通常会手动处 ...
- android144 360 快捷方式
package com.example; import android.net.Uri; import android.os.Bundle; import android.app.Activity; ...
- Mysql中自增字段（AUTO_INCREMENT)的一些常识
Mysql中自增字段(AUTO_INCREMENT)的一些常识: http://chengxuyuan.naxieshir.com/fenlei/2/p/151.html