建站常识

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();
 };
 });
 }
 });
 })();

 

相关信息