jQuery+PHP实现浏览更多内容

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

演示

 

 

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. $last = $_POST[‘last’];
  4. $amount = $_POST[‘amount’];
  5. $query=mysql_query(“select * from content order by id limit $last,$amount”);
  6. while ($row=mysql_fetch_array($query)) {
  7.     $sayList[] = array(
  8.         ‘content’=>$row[‘message’],
  9.         ‘author’=>$row[‘id’],
  10.         ‘date’=>date(‘y-m-d H:i’,strtotime($row[‘updatetime’]))
  11.       );
  12. }
  13. echo json_encode($sayList);
  14. ?>

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

 

 

标签