日期:2014-05-16  浏览次数:20990 次

如何制作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条数据了。



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

然后没点击一次显示10条
------解决方案--------------------
我写了一个简单的分段显示插件,
用法很简单:
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&