帝国CMS内容点击无限加载思路分享

帝国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.  
8. $last = $_POST['last']; 
9. $amount = $_POST['amount']; 
10.  
11. $user = array('demo1','demo2','demo3','demo3','demo4'); 
12. $sql=$empire->query("select * from ceshi_ecms_news order by id desc limit $last,$amount"); 
13.  
14. while ($row=$empire->fetch($sql)) { 
15.     $addurl="<a href=".$row['titleurl'].">".$row['title']."</a>"; 
16.     $sayList[] = array( 
17.         'content'=>$row['username'], 
18.         'author'=>$addurl, 
19.         'url'=>$row['titleurl'], 
20.         'date'=>date('m-d H:i',$row['newstime']) 
21.       );//开源软件:Vevb.com 
22. } 
23. echo json_encode($sayList); 
24.  
25. db_close(); //关闭MYSQL链接 
26. $empire=null; //注消操作类变量 
27. ?> 

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.       
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) 

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>