如何制作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&