基于jQuery实现点击列表加载更多效果
<!DOCTYPE html>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<
title
>jquery showMore 显示更多</
title
>
<
script
type
=
"text/javascript"
src
=
"js/jquery-1.8.3.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"js/jquery.showMore.js"
></
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
>
JavaScript code
(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();
};
});
}
});
}
})();
基于jQuery实现点击列表加载更多效果的更多相关文章
- jquery Mobile点击显示加载等待效果
点击某个按钮或链接时,触发等待加载效果: <script> <!-- $(document).bind("mobileinit", function(){ }); ...
- 微信小程序列表加载更多
概述 基于小程序开发的列表加载更多例子. 详细 代码下载:http://www.demodashi.com/demo/13632.html 一.前言 基于小程序开发的列表加载更多例子. 二.运行效果 ...
- JS实现点击加载更多效果
适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊) 点击加载更多效果: 第一个和第二个参数分别是btn和ul的DOM(必填) ...
- 基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type=" ...
- apiCloud实现加载更多效果,基本完美~
apiCloud实现加载更多效果 1.接口支持,加入参数page. $page = $this->_request('page','trim','1'); $pagesize = 10; // ...
- JS 判断滚动底部并加载更多效果。。。。。。。。。
JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...
- 使用jquery.more.js上滑加载更多
html: <div id="more"> <div class="single_item"> <div class=" ...
- html ajax请求 php 下拉 加载更多数据 (也可点击按钮加载更多)
<input type="hidden" class="total_num" id="total" value="{$tot ...
- jquery页面滑到底部加载更多
$(window).scroll(function(){ var _scrolltop = $('body').scrollTop();if(_scrolltop+_winHeight>_doc ...
随机推荐
- pytest 12 函数传参和fixture传参数request
前沿: 有的case,需要依赖于某些特定的case才可以执行,比如,登陆获取到的cookie,每次都需要带着他,为了确保是同一个用户,必须带着和登陆获取到的同一个cookies. 大部分的用例都会先登 ...
- DOS批处理:FOR中的Delims和Tokens参数
在For命令语句的参数F中,最难理解的就是Delims和Tokens两个选项,本文简单的做一个比较和总结. “For /f”常用来解析文本,读取字符串.分工上,delims负责切分字符串,而token ...
- 深入剖析Kubernetes学习笔记:深入理解镜像(08)
一.Python 应用案例环境 [root@k8s-node1 Flask]# pwd /opt/Dockerfile/Flask [root@k8s-node1 Flask]# ll total 1 ...
- Jenkins-在windows上配置自动化部署(Jenkins+Bonobo.Git.Server)
本文配置Jenkins.git服务器采用 Bonobo.Git.Server 1. 登录后,打开Jenkins界面,新建一个任务 2. 配置信息 3. 配置git项目地址,我们先进行其他配置,等会再继 ...
- MongoDB 分片集群技术
在了解分片集群之前,务必要先了解复制集技术! 1.1 MongoDB复制集简介 一组Mongodb复制集,就是一组mongod进程,这些进程维护同一个数据集合.复制集提供了数据冗余和高等级的可靠性,这 ...
- H5_0001:localStorage本地存储
localStorage的优势 1.localStorage拓展了cookie的4K限制 2.localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数 ...
- [物理学与PDEs]第1章第9节 Darwin 模型 9.1 拟静电模型及其修正形式
1. 拟静电模型: 当 $\cfrac{\omega}{c}\ll \cfrac{1}{c}\lra \omega\ll \cfrac{c}{l}$ 时, $$\bex \cfrac{1}{c}\cf ...
- DUMP4 企业级电商项目 —— 对接支付宝扫码支付
延展 <谈谈微信支付曝出的漏洞> [联调 DEMO下载地址]https://docs.open.alipay.com/194/105201/ [内置 一份 说明文档可做参考] [impor ...
- Linux中执行C++程序
参考:https://blog.csdn.net/qq_31125955/article/details/79343498 https://blog.csdn.net/weixin_35477207/ ...
- Contest2158 - 2019-3-14 高一noip基础知识点 测试3 题解版
传送门 预计得分:0 实际得分:90 还行 T1 数学卡精 二分double卡精 反正就是卡精 怎么办?卡回去!! 将double*=1e4,变成一个long long 注意四舍五入的奇技淫巧 代码 ...