如何制作jq mobile新闻列表点击加载更多效果！

想制作一个新闻加载更多的效果，只想在一个.net页面里实现。不加载其它URL页面，我用这个.net程序默认循环出100条数据，我想要的效果是第一屏显示10条，然后下方有个加载更多。然后再加载第11-20条数据。我是想用jq mobile，哪位可以指导我一下哦。或者有这么面的例子更好了。

相当于我的页面已经有100条循环出来的数据了。
<li>新闻列表数据1</li>
<li>新闻列表数据2</li>
<li>新闻列表数据3</li>
<li>新闻列表数据4</li>
<li>新闻列表数据5</li>
<li>新闻列表数据6</li>
<li>新闻列表数据7</li>
<li>新闻列表数据8</li>
<li>新闻列表数据9</li>
<li>新闻列表数据10</li>
<li>点击加载更多</li>
这时只显示这里的数据。当点击加载更多后。

<li>新闻列表数据1</li>
<li>新闻列表数据2</li>
<li>新闻列表数据3</li>
<li>新闻列表数据4</li>
<li>新闻列表数据5</li>
<li>新闻列表数据6</li>
<li>新闻列表数据7</li>
<li>新闻列表数据8</li>
<li>新闻列表数据9</li>
<li>新闻列表数据10</li>
<li>新闻列表数据11</li>
<li>新闻列表数据12</li>
<li>新闻列表数据13</li>
<li>新闻列表数据14</li>
<li>新闻列表数据15</li>
<li>新闻列表数据16</li>
<li>新闻列表数据17</li>
<li>新闻列表数据18</li>
<li>新闻列表数据19</li>
<li>新闻列表数据20</li>
就显示这样。请教了。前提是我已经用.net循环出100条数据了。

13 个解决方案

#1

10条之后的设置<li style=" display:none">新闻列表数据15</li>

然后没点击一次显示10条

#2

我的数据都是一样的<li> 没判断了。不能直接用jq 插件分段显示吗

#3

我写了一个简单的分段显示插件，
用法很简单：
1，把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这种
这个pagesizie有一个默认值10。可以不写
如

        <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>
        </ul>

2,页面尾部引用这个插件js文件(在之前要先引入jquery)
   <script type="text/javascript"  src="js/jquery.showmorechildren.js"></script>
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;//返回还剩余的隐藏子元素的数量
                }

                //对页中现有的class=showMorehandle的元素，在之后添加显示更多条，并绑定点击行为
                $(".showMoreNChildren").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();
                            };
                        });
                    }
                });
            })();

#4

显示更多这一条你可以自定义样式。
<div class='showMorehandle' >显示更多</div>

#5

我试看下。。效果

#6

wzhiyuan，你真牛，赞

#7

把“点击加载更多”与上面的所有<li>都应该分开，例如在ul外边用<div>区分开。这样你增加<li>是就不会丢失“点击加载更多”。

#8

引用 3 楼 wzhiyuan 的回复:

我写了一个简单的分段显示插件，
用法很简单：
1，把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这种
这个pagesizie有一个默认值10。可以不写
如

        <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>
        </ul>

2,页面尾部引用这个插件js文件(在之前要先引入jquery)
   <script type="text/javascript"  src="js/jquery.showmorechildren.js"></script>
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;//返回还剩余的隐藏子元素的数量
                }

                //对页中现有的class=showMorehandle的元素，在之后添加显示更多条，并绑定点击行为
                $(".showMoreNChildren").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();
                            };
                        });
                    }
                });
            })();

谢谢大神，正好需要，不过这个JQ适合单页加载，如果单页里面有个地方需要加载更多的话，还要把下面的JQ复制一段，换个CSS名才行，大神指点下，能不能作成一个封装好的插件，加个CLASS，就直接调用了

#9

引用 8 楼 lwk6995845 的回复:

Quote: 引用 3 楼 wzhiyuan 的回复:

我写了一个简单的分段显示插件，
用法很简单：
''''''''''
[/code]

谢谢大神，正好需要，不过这个JQ适合单页加载，如果单页里面有个地方需要加载更多的话，还要把下面的JQ复制一段，换个CSS名才行，大神指点下，能不能作成一个封装好的插件，加个CLASS，就直接调用了

应你的要求，我再次封装了一下，更像个插件的样子。
用法示例如下html，

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

#10

该回复于2015-08-12 13:20:49被管理员删除

#11

引用 9 楼 wzhiyuan 的回复:

Quote: 引用 8 楼 lwk6995845 的回复:

Quote: 引用 3 楼 wzhiyuan 的回复:

我写了一个简单的分段显示插件，
用法很简单：
''''''''''
[/code]

谢谢大神，正好需要，不过这个JQ适合单页加载，如果单页里面有个地方需要加载更多的话，还要把下面的JQ复制一段，换个CSS名才行，大神指点下，能不能作成一个封装好的插件，加个CLASS，就直接调用了

应你的要求，我再次封装了一下，更像个插件的样子。
用法示例如下html，

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

如果能再加一个收起就完美了

#12

确实写的不错，但我的完美只是想做动态加载。。。。。。。，缺callback呢

#13

如何触发显示更多