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();

                    };

                });

            }

        });

    }

})();

时间: 2024-11-05 12:13:05

js加载更多的相关文章

iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼的问题,给点提示 :#wrapper,以及#scroller-content要注意) html如下: <div class="viewport"> <div id="wrapper" class="wrapper"> <

下拉加载更多DEMO(js实现)

项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判断滚动条滚到底呢? 当滚动条的高度加上滚动条到div顶部的高度等于div的可滚动高度时,说明滚动条到底部了.公式如下. [javascript] view plain copy this.scrollHeight <= $(this).scrollTop() + $(this).height() 给

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件.iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.iScroll的强大毋庸置疑,本人也非常欢迎大家使用iScr

phpcms列表页js实现加载更多效果

先看一下效果: 默认显示6条数据,点击一次加载更多追加显示6条,直到数据全部显示完全,隐藏加载更多按钮. 列表页引入一下文件: <script type="text/javascript" src="../jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../jquery.showMore.js"><

原生js移动端touch事件实现上拉加载更多

大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: 1 //获取要操作的元素 2 var objSection = document.getElementsByTagName("div")[0]; 3 //给元素绑定监听事件 个人习惯把监听事件写在一块 4 objSection.addEventListener("touchstart", touchStart, false); 5 objSect

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

html: <div id="more"> <div class="single_item"> <div class="date"></div> <div class="author"></div> <div class="title"></div> </div> <a href="j

基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=

【前端】上拉加载更多dropload.min.js的使用

代码如下:入职代码修改接口及html为自己的即可(下面主要展示js部分) <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum

js点击加载更多可以增加几条数据的显示

<div class="list"> <div class="one"> <div class="img"> <img src="../img/b6c.png"/> </div> <div class="infor"> <p class="detail">2018年8月陕西延长石油延安能源化工有限责任公司