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

淳纯 2014-04-23 11:42:53
想制作一个新闻加载更多的效果,只想在一个.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条数据了。


...全文
6765 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
如何触发显示更多
avi9111 2015-12-25
  • 打赏
  • 举报
回复
确实写的不错,但我的完美只是想做动态加载。。。。。。。,缺callback呢
suijimingzi 2015-11-23
  • 打赏
  • 举报
回复
引用 9 楼 wzhiyuan 的回复:
[quote=引用 8 楼 lwk6995845 的回复:] [quote=引用 3 楼 wzhiyuan 的回复:] 我写了一个简单的分段显示插件, 用法很简单: '''''''''' [/code]
谢谢大神,正好需要,不过这个JQ适合单页加载,如果单页里面有个地方需要加载更多的话,还要把下面的JQ复制一段,换个CSS名才行,大神指点下,能不能作成一个封装好的插件,加个CLASS,就直接调用了[/quote] 应你的要求,我再次封装了一下,更像个插件的样子。 用法示例如下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();
                    };
                });
            }
        });
    }
})();
[/quote] 如果能再加一个收起就完美了
wzhiyuan 2014-12-16
  • 打赏
  • 举报
回复
引用 8 楼 lwk6995845 的回复:
[quote=引用 3 楼 wzhiyuan 的回复:] 我写了一个简单的分段显示插件, 用法很简单: '''''''''' [/code]
谢谢大神,正好需要,不过这个JQ适合单页加载,如果单页里面有个地方需要加载更多的话,还要把下面的JQ复制一段,换个CSS名才行,大神指点下,能不能作成一个封装好的插件,加个CLASS,就直接调用了[/quote] 应你的要求,我再次封装了一下,更像个插件的样子。 用法示例如下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();
                    };
                });
            }
        });
    }
})();
lwk6995845 2014-12-11
  • 打赏
  • 举报
回复
引用 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,就直接调用了
  • 打赏
  • 举报
回复
把“点击加载更多”与上面的所有<li>都应该分开,例如在ul外边用<div>区分开。这样你增加<li>是就不会丢失“点击加载更多”。
belive2012 2014-04-24
  • 打赏
  • 举报
回复
wzhiyuan,你真牛,赞
淳纯 2014-04-23
  • 打赏
  • 举报
回复
我的数据都是一样的<li> 没判断了。不能直接用jq 插件分段显示吗
Go 旅城通票 2014-04-23
  • 打赏
  • 举报
回复
10条之后的设置<li style="display:none">新闻列表数据15</li> 然后没点击一次显示10条
淳纯 2014-04-23
  • 打赏
  • 举报
回复
我试看下。。效果
wzhiyuan 2014-04-23
  • 打赏
  • 举报
回复
显示更多这一条你可以自定义样式。 <div class='showMorehandle' >显示更多</div>
wzhiyuan 2014-04-23
  • 打赏
  • 举报
回复
我写了一个简单的分段显示插件, 用法很简单: 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();
                            };
                        });
                    }
                });
            })();

52,797

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧