<!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实现点击列表加载更多效果的更多相关文章

  1. jquery Mobile点击显示加载等待效果

    点击某个按钮或链接时,触发等待加载效果: <script> <!-- $(document).bind("mobileinit", function(){ }); ...

  2. 微信小程序列表加载更多

    概述 基于小程序开发的列表加载更多例子. 详细 代码下载:http://www.demodashi.com/demo/13632.html 一.前言 基于小程序开发的列表加载更多例子. 二.运行效果 ...

  3. JS实现点击加载更多效果

    适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊)   点击加载更多效果:         第一个和第二个参数分别是btn和ul的DOM(必填)     ...

  4. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  5. apiCloud实现加载更多效果，基本完美~

    apiCloud实现加载更多效果 1.接口支持,加入参数page. $page = $this->_request('page','trim','1'); $pagesize = 10; // ...

  6. JS 判断滚动底部并加载更多效果。。。。。。。。。

    JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...

  7. 使用jquery.more.js上滑加载更多

    html: <div id="more"> <div class="single_item"> <div class=" ...

  8. html ajax请求 php 下拉 加载更多数据 （也可点击按钮加载更多）

    <input type="hidden" class="total_num" id="total" value="{$tot ...

  9. jquery页面滑到底部加载更多

    $(window).scroll(function(){ var _scrolltop = $('body').scrollTop();if(_scrolltop+_winHeight>_doc ...

随机推荐

  1. input输入框自动获取焦点

    只要在该input标签后添加autofocus="autofocus"即可 代码实例: <html> <head></head> <bod ...

  2. MYSQL 企业常用架构与调优经验分享

    一.选择Percona Server.MariaDB还是MYSQL  mysql应用源码:http://www.jinhusns.com/Products/Download/?type=xcj 1.M ...

  3. Linux系统诊断必备技能之二：tcpdump抓包工具详解

    一.简述 TcpDump可以将网络中传送的数据包完全截获下来提供分析.它支持针对网络层.协议.主机.网络或端口的过滤,并提供and.or.not等逻辑语句来帮助你去掉无用的信息. Linux作为网络服 ...

  4. MongoDB 3.6.9 集群搭建 - 切片+副本集

    1. 环境准备 在Mongo的官网下载Linux版本安装包,然后解压到对应的目录下:由于资源有限,我们采用Replica Sets + Sharding方式来配置高可用.结构图如下所示: 这里我说明下 ...

  5. 数据结构Java实现04---树及其相关操作

    首先什么是树结构? 树是一种描述非线性层次关系的数据结构,树是n个数据结点的集合,这些集结点包含一个根节点,根节点下有着互相不交叉的子集合,这些子集合便是根节点的子树. 树的特点 在一个树结构中,有且 ...

  6. [数学杂志]AML

    Copied from: http://www.elsevier.com/journals/applied-mathematics-letters/0893-9659/guide-for-author ...

  7. nc工具使用

    0x00 功能说明: 功能强大的网络工具,在网络工具中有“瑞士军刀”美誉,其有Windows和Linux的版本.因为它短小精悍,功能实用,被设计为一个简单.可靠的网络工具,可通过TCP或UDP协议传输 ...

  8. tp5入门

    runtime目录里的文件是临时文件,可随时删除 在tp5里,命名空间对应了文件的所在目录,app命名空间通常代表了文件的起始目录为application,而think命名空间则代表了文件的起始目录为 ...

  9. LeetCode第十二题-将数字转化为罗马数字

    Integer to Roman 问题简介:将输入的int类型数字转化为罗马数字 问题详解:罗马数字由七个不同的符号表示:I,V,X,L,C,D和M 符号-数值 I - 1 V - 5 X -10 L ...

  10. 「luogu2680」[NOIp2015] 运输计划

    题目大意:给定一棵n个节点的树,输入m组一条链的两个端点:把树上的某个边权改为0,求m条链长度的最大值的最小值: 一.考虑二分: 1.对于需要判断是否为可行方案的 mid,所有链长不大于 mid 的链 ...