jq mobile新闻列表点击加载更多效果
发布时间 | 2016/12/2 点击 | 次
想制作一个新闻加载更多的效果,只想在一个asp页面里实现。不加载其它URL页面,我用这个asp程序默认循环出20条数据,我想要的效果是第一屏显示10条,然后下方有个加载更多。然后再加载第11-20条数据。
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.showmorechildren.js"></script> <ul class="showMoreNChildren" pagesize="5"> '一页显示5条 <li>FTP上传网页文件无法更新删除</li> <li>合理的设计网页10条建议,改善网站可读性</li> <li>上海网站维护包括哪些?</li> <li>ASP 字母转换大小写</li> <li>asp获取内容当中第一张图片</li> <li>asp编辑当前记录,并返回当前页数</li> <li>asp获取文章里的图片路径</li> <li>SEO站长具备三个优化必备条件</li> </ul>
jquery.showmorechildren.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(); }; }); } }); })();