当前位置:首页 > 网站维护 > 列表

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

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

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

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

 

服务项目

网站建设

网站建设

通过SEO优化技术,提供更多的展示机会,带来大量精准流量和询盘,每月意向客户增长20%。

手机网站建设

手机网站建设

手机网站的时代强势来袭,赢在全网营销时代,手机+电脑双剑合璧,把握商机滴水不漏。

网站维护

网站维护

一个好的网站需要定期或不定期地更新内容,才能不断地吸引更多的浏览者,增加访问量。

整合网络营销

整合营销

为了建立、维护和传播品牌,以及加强客户关系,而对品牌进行计划、实施和监督的一系列营销

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