帝国CMS无限加载是借鉴别的CMS插件更改的,现在还在制作样式中,完成后会以插件分享给大家.

无限加载常见的原理是利用PHP文件调用数据库信息,在用JS读取PHP信息,最后插入显示到页面.

PHP文件代码:

  1. <?php
  2. require_once(‘../../e/class/connect.php’); //引入数据库配置文件和公共函数文件
  3. require(‘../../e/class/db_sql.php’); //引入数据库操作文件
  4. $link=db_connect(); //连接MYSQL
  5. $empire=new mysqlquery(); //声明数据库操作类
  6. $editor=1; //声明目录层次
  7. $last = $_POST[‘last’];
  8. $amount = $_POST[‘amount’];
  9. $user = array(‘demo1’,‘demo2’,‘demo3’,‘demo3’,‘demo4’);
  10. $sql=$empire->query(“select * from ceshi_ecms_news order by id desc limit $last,$amount”);
  11. while ($row=$empire->fetch($sql)) {
  12.     $addurl=“<a href=”.$row[‘titleurl’].“>”.$row[‘title’].“</a>”;
  13.     $sayList[] = array(
  14.         ‘content’=>$row[‘username’],
  15.         ‘author’=>$addurl,
  16.         ‘url’=>$row[‘titleurl’],
  17.         ‘date’=>date(‘m-d H:i’,$row[‘newstime’])
  18.       );//开源软件:phpfensi.com
  19. }
  20. echo json_encode($sayList);
  21. db_close(); //关闭MYSQL链接
  22. $empire=null; //注消操作类变量
  23. ?>

JS调用代码:

  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’      :   ’10’,
  10.         ‘address’     :   ‘comments.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(thisfunction(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)

HTML代码:

  1. <script type=“text/javascript” src=“js/jquery.more.js”></script>
  2. <script>
  3. $(function(){
  4. $(‘#more’).more({‘address’: ‘data.php’})
  5. });
  6. </script>
  7. <div class=“lb-menu”>
  8. <div class=“sideMenu”>
  9. <h3 class=“on”><em></em>衣服</h3>
  10. <ul>
  11. <li>男士</li>
  12. <li>女士</li>
  13. <li>童装</li>
  14. </ul>
  15. <h3><em></em>鞋子</h3>
  16. <ul>
  17. <li>男士</li>
  18. <li>女士</li>
  19. <li>童装</li>
  20. </ul>
  21. <h3><em></em>配饰</h3>
  22. <ul>
  23. <li>男士</li>
  24. <li>女士</li>
  25. <li>童装</li>
  26. </ul>
  27. </div>
  28. </div>
  29. <div id=“more”>
  30. <div class=“single_item”>
  31. <div class=“element_head”>
  32. <div class=“date”></div>
  33. <div class=“author”></div>
  34. </div>
  35. <div class=“content”></div>
  36. <div class=“url”></div>
  37. </div>
  38. <a href=“javascript:;” class=“get_more”>::点击加载更多内容::</a> </div>
--END--