css样式:
<style type="text/css"> #more{margin:10px auto;width: 560px; border: 1px solid #999;} .single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;} .author{position: absolute; left: 0px; font-weight:bold; color:#39f} .date{position: absolute; right: 0px; color:#999} .content{line-height:20px; word-break: break-all;} .element_head{width: 100%; position: relative; height: 20px;} .get_more{margin:10px; text-align:center} .more_loader_spinner{width:20px; height:20px; margin:10px auto; background: url(loader.gif) no-repeat;} </style>
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> #more{margin:10px auto;width: 560px; border: 1px solid #999;} .single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;} .author{position: absolute; left: 0px; font-weight:bold; color:#39f} .date{position: absolute; right: 0px; color:#999} .content{line-height:20px; word-break: break-all;} .element_head{width: 100%; position: relative; height: 20px;} .get_more{margin:10px; text-align:center} .more_loader_spinner{width:20px; height:20px; margin:10px auto; background: url(loader.gif) no-repeat;} </style> <body> <div class="container"> <div id="more"> <div class="single_item"> <div class="element_head"> <div class="date"></div> <div class="author"></div> </div> <div class="title"></div> </div> <a href="javascript:;" class="get_more">加载更多</a> </div> </body> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript" src="jquery.more.js"></script> <script type="text/javascript"> $(function() { $('#more').more({'address': 'ajax.php'}) }); </script> </html>
后台请求:
<? //替换自己即可 $connect=mysql_connect("localhost","root","root"); mysql_select_db('test',$connect); /*数据库连接参数*/ $last = $_POST['last']; $amount = $_POST['amount']; $query = mysql_query("select * from news order by id desc limit $last,$amount"); while ($row = mysql_fetch_array($query)) { $sayList[] = array( 'title' => $row['title'], 'author' => $row['id'], 'date' => date('m-d H:i', $row['submitTime']) ); } echo json_encode($sayList); ?>
关键jquery.more.js
(function( $ ){ var target = null; var template = null; var lock = false; var variables = { 'last' : 0 } var settings = { 'amount' : '1', 'address' : 'comments.php', 'format' : 'json', 'template' : '.single_item', 'trigger' : '.get_more', 'scroll' : 'false', 'offset' : '100', 'spinner_code': '' } var methods = { init : function(options){ return this.each(function(){ if(options){ $.extend(settings, options); } template = $(this).children(settings.template).wrap('<div/>').parent(); template.css('display','none') $(this).append('<div class="more_loader_spinner">'+settings.spinner_code+'</div>') $(this).children(settings.template).remove() target = $(this); if(settings.scroll == 'false'){ $(this).find(settings.trigger).bind('click.more',methods.get_data); $(this).more('get_data'); } else{ if($(this).height() <= $(this).attr('scrollHeight')){ target.more('get_data',settings.amount*2); } $(this).bind('scroll.more',methods.check_scroll); } }) }, check_scroll : function(){ if((target.scrollTop()+target.height()+parseInt(settings.offset)) >= target.attr('scrollHeight') && lock == false){ target.more('get_data'); } }, debug : function(){ var debug_string = ''; $.each(variables, function(k,v){ debug_string += k+' : '+v+' '; }) alert(debug_string); }, remove : function(){ target.children(settings.trigger).unbind('.more'); target.unbind('.more') target.children(settings.trigger).remove(); }, add_elements : function(data){ //alert('adding elements') var root = target // alert(root.attr('id')) var counter = 0; if(data){ $(data).each(function(){ counter++ var t = template $.each(this, function(key, value){ if(t.find('.'+key)) t.find('.'+key).html(value); }) //t.attr('id', 'more_element_'+ (variables.last++)) if(settings.scroll == 'true'){ // root.append(t.html()) root.children('.more_loader_spinner').before(t.html()) }else{ // alert('...') root.children(settings.trigger).before(t.html()) } root.children(settings.template+':last').attr('id', 'more_element_'+ ((variables.last++)+1)) }) } else methods.remove() target.children('.more_loader_spinner').css('display','none'); if(counter < settings.amount) methods.remove() }, get_data : function(){ // alert('getting data') var ile; lock = true; target.children(".more_loader_spinner").css('display','block'); $(settings.trigger).css('display','none'); if(typeof(arguments[0]) == 'number') ile=arguments[0]; else { ile = settings.amount; } $.post(settings.address, { last : variables.last, amount : ile }, function(data){ $(settings.trigger).css('display','block') methods.add_elements(data) lock = false; }, settings.format) } }; $.fn.more = function(method){ if(methods[method]) return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); else if(typeof method == 'object' || !method) return methods.init.apply(this, arguments); else $.error('Method ' + method +' does not exist!'); } })(jQuery)
五、jquery.more.js相关API
参数 描述 默认值
amount 每次显示记录数 10
address 请求后台的地址 -
format 数据传输格式 json
template html记录DIV的class属性 .single_item -
trigger 触发加载更多记录的class属性 .get_more -
scroll 是否支持滚动触发加载 false
offset 滚动触发加载时的偏移量 100