17年专业上海网页设计公司—上海彭塔网络技术有限公司

手机端 网站地图
当前位置:首页 > 建站常识 > 列表

jq mobile新闻列表点击加载更多效果

点击:时间:2016/12/2关键词:ajax 新闻加载更多 css
想制作一个新闻加载更多的效果,只想在一个asp页面里实现。不加载其它URL页面,我用这个asp程序默认循环出20条数据,我想要的效果是第一屏显示10条,然后下方有个加载更多。然后再加载第11-20条数据。<script type="text/javas

新闻列表点击加载更多效果

想制作一个新闻加载更多的效果,只想在一个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(); }; }); } }); })();

 

预约建站
免费提供网站优化
领取关键词