zoukankan      html  css  js  c++  java
  • 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 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>
     
    jquery.showMore.js代码如下
    (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();
                        };
                    });
                }
            });
        }
    })();
  • 相关阅读:
    设备像素比devicePixelRatio简单介绍
    详解事件代理委托
    原生dom事件注册和移除事件的封装
    idataway_前端代码规范
    170307、1分钟实现“延迟消息”功能
    170306、wamp中的Apache开启gzip压缩提高网站的响应速度
    170303、PHP微信公众平台开发接口 SDK完整版
    170302、 Apache 使用localhost(127.0.0.1)可以访问,使用本机局域网IP(192.168.2.*)不能访问
    170301、使用Spring AOP实现MySQL数据库读写分离案例分析
    170228、Linux操作系统安装ELK stack日志管理系统--(1)Logstash和Filebeat的安装与使用
  • 原文地址:https://www.cnblogs.com/huangdegen/p/5370951.html
Copyright © 2011-2022 走看看