注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

午夜阳光

 
 
 

日志

 
 

Jquery 滚动刷新  

2014-11-11 17:40:56|  分类: Jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滚动加载</title>
<style type="text/css">
html{_background:url(about:blank);}
body {font-size:12px;}
li {line-height:30px;}
#ajaxMsg {height:36px; line-height:36px;text-align:center;}
#ajaxMsg img {margin-bottom:-10px; margin-right:10px;}
#rightToolbar {
    width:60px; height:90px; line-height:30px; text-align:center;background:#ccc;
    position:fixed; bottom:100px; right:20px;
    _position:absolute; _top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight-100);
}
</style>
<script type="text/javascript" src="/Widget/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    _page = 1;
    loadData();
    $(window).scroll(function (){
        if (($(window).height() + $(window).scrollTop()) >= $("body").height() && _loadable){
            loadData();
        }
    });
    $("#toPageTop").click(function(e){
        e.preventDefault();
        $("body,html").animate({scrollTop:0},500);
    });
    $("#toPageBottom").click(function(e){
        e.preventDefault();
        $("body,html").animate({scrollTop:document.body.clientHeight},500);
    });
});
function loadData(){
    $("#ajaxMsg").html('<img src="/Files/Test/loading.gif" />加载中……');
    _loadable = false;
    $.ajax({
        url: "/Test/ScrollData",
        data:{page:_page},
        dataType: 'html',
        success: function(data, textStatus){
            $("#list").append(data);
            var totalPage = Math.ceil(_total / 20);
            $("#page").html('记录总数:'+ _total +'<br>总页数:' + totalPage + '<br>当前页:' + _page);
            if(totalPage == 0){
                $("#ajaxMsg").html('没有找到信息!');
            }
            else if(_page == totalPage){
                $("#ajaxMsg").html('全部加载完成!');
            }
            else{
                _page ++;
                _loadable = true;
                $("#ajaxMsg").html('<img src="/Files/Test/pull_down.gif" />下拉加载更多');
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown){
            $("#ajaxMsg").html('加载失败,<a href="javascript:loadData();">点此重试</a>');
        }
    });
}
</script>
</head>
<body>
<div style="height:150px; background:#CCC;">顶部</div>
<div>
<ul id="list"></ul>
<div id="ajaxMsg"><img src="/Files/Test/loading.gif" />加载中……</div>
</div>
<div style="height:80px; background:#ccc;">底部</div>
<div id="rightToolbar"><a href="/">返回首页</a><br /><a href="http://wangyali90516.blog.163.com/blog/#" id="toPageTop">返回顶部</a><br /><a href="http://wangyali90516.blog.163.com/blog/#" id="toPageBottom">返回底部</a></div>
<div id="page" style="width:100px;height:90px;position:fixed;top:100px;right:20px;"></div>
</body>
</html>
  评论这张
 
阅读(123)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017