首页>>Jquery文字>>jQuery+PHP实现浏览更多内容(2013-10-13)

jQuery+PHP实现浏览更多内容

 本例与《无刷新动态加载数据，滚动条加载》的区别就在于这个是点击加载的，2个的数据库结构相同，都比较简单明了

jQuery+PHP实现浏览更多内容
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="more">  
  2.        <div class="single_item">  
  3.             <div class="element_head">  
  4.                  <div class="date"></div>  
  5.                  <div class="author"></div>  
  6.              </div>  
  7.              <div class="content"></div>  
  8.        </div>  
  9.        <a href="javascript:;" class="get_more">点击加载更多内容</a>  
  10.  </div>   

data.php

PHP Code
  1. <?php  
  2. include("../../conn.php");  
  3.   
  4. $last = $_POST['last'];  
  5. $amount = $_POST['amount'];  
  6.   
  7.   
  8. $query=mysql_query("select * from content order by id limit $last,$amount");  
  9. while ($row=mysql_fetch_array($query)) {  
  10.     $sayList[] = array(  
  11.         'content'=>$row['message'],  
  12.         'author'=>$row['id'],  
  13.         'date'=>date('y-m-d H:i',strtotime($row['updatetime']))  
  14.       );  
  15. }  
  16. echo json_encode($sayList);  
  17. ?>  

jquery.more.js

 

JavaScript Code
  1. (function( $ ){            
  2.     var target = null;  
  3.     var template = null;  
  4.     var lock = false;  
  5.     var variables = {  
  6.         'last'      :    0          
  7.     }   
  8.     var settings = {  
  9.         'amount'      :   '5',            
  10.         'address'     :   'data.php',  
  11.         'format'      :   'json',  
  12.         'template'    :   '.single_item',  
  13.         'trigger'     :   '.get_more',  
  14.         'scroll'      :   'false',  
  15.         'offset'      :   '100',  
  16.         'spinner_code':   ''  
  17.     }  
  18.       
  19.     var methods = {  
  20.         init  :   function(options){  
  21.             return this.each(function(){  
  22.                 
  23.                 if(options){  
  24.                     $.extend(settings, options);  
  25.                 }  
  26.                 template = $(this).children(settings.template).wrap('<div/>').parent();  
  27.                 template.css('display','none')  
  28.                 $(this).append('<div class="more_loader_spinner">'+settings.spinner_code+'</div>')  
  29.                 $(this).children(settings.template).remove()     
  30.                 target = $(this);  
  31.                 if(settings.scroll == 'false'){                      
  32.                     $(this).find(settings.trigger).bind('click.more',methods.get_data);  
  33.                     $(this).more('get_data');  
  34.                 }                  
  35.                 else{  
  36.                     if($(this).height() <= $(this).attr('scrollHeight')){  
  37.                         target.more('get_data',settings.amount*2);  
  38.                     }  
  39.                     $(this).bind('scroll.more',methods.check_scroll);  
  40.                 }  
  41.             })  
  42.         },  
  43.         check_scroll : function(){  
  44.             if((target.scrollTop()+target.height()+parseInt(settings.offset)) >= target.attr('scrollHeight') && lock == false){  
  45.                 target.more('get_data');  
  46.             }  
  47.         },  
  48.         debug :   function(){  
  49.             var debug_string = '';  
  50.             $.each(variables, function(k,v){  
  51.                 debug_string += k+' : '+v+'n';  
  52.             })  
  53.             alert(debug_string);  
  54.         },       
  55.         remove        : function(){              
  56.             target.children(settings.trigger).unbind('.more');  
  57.             target.unbind('.more')  
  58.             target.children(settings.trigger).remove();  
  59.         },  
  60.         add_elements  : function(data){  
  61.             //alert('adding elements')  
  62.               
  63.             var root = target         
  64.          //   alert(root.attr('id'))  
  65.             var counter = 0;  
  66.             if(data){  
  67.                 $(data).each(function(){  
  68.                     counter++  
  69.                     var t = template                      
  70.                     $.each(this, function(key, value){                            
  71.                         if(t.find('.'+key)) t.find('.'+key).html(value);  
  72.                     })           
  73.                     //t.attr('id', 'more_element_'+ (variables.last++))  
  74.                     if(settings.scroll == 'true'){  
  75.                     //    root.append(t.html())  
  76.                     root.children('.more_loader_spinner').before(t.html())    
  77.                     }else{  
  78.                     //    alert('...')  
  79.                             
  80.                           root.children(settings.trigger).before(t.html())    
  81.   
  82.                     }  
  83.   
  84.                     root.children(settings.template+':last').attr('id', 'more_element_'+ ((variables.last++)+1))    
  85.                    
  86.                 })  
  87.                   
  88.                   
  89.             }              
  90.             else  methods.remove()  
  91.             target.children('.more_loader_spinner').css('display','none');  
  92.             if(counter < settings.amount) methods.remove()              
  93.   
  94.         },  
  95.         get_data      : function(){     
  96.            // alert('getting data')  
  97.             var ile;  
  98.             lock = true;  
  99.             target.children(".more_loader_spinner").css('display','block');  
  100.             $(settings.trigger).css('display','none');  
  101.             if(typeof(arguments[0]) == 'number') ile=arguments[0];  
  102.             else {  
  103.                 ile = settings.amount;                
  104.             }  
  105.               
  106.             $.post(settings.address, {  
  107.                 last : variables.last,   
  108.                 amount : ile                  
  109.             }, function(data){              
  110.                 $(settings.trigger).css('display','block')  
  111.                 methods.add_elements(data)  
  112.                 lock = false;  
  113.             }, settings.format)  
  114.               
  115.         }  
  116.     };  
  117.     $.fn.more = function(method){  
  118.         if(methods[method])   
  119.             return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));  
  120.         else if(typeof method == 'object' || !method)   
  121.             return methods.init.apply(this, arguments);  
  122.         else $.error('Method ' + method +' does not exist!');  
  123.   
  124.     }      
  125. })(jQuery)  

 


原文地址:http://www.freejs.net/article_jquerywenzi_64.html