帝国CMS二次开发内容点击无限加载思路分享

帝国CMS无限加载是学习其他CMS插件更改的。现在还在制造款式中，完结后会以插件共享给我们！

无限加载常见的原理是使用PHP文件调用数据库信息，在用JS读取PHP信息，最终刺进显现到页面。

PHP文件代码

<?php
require_once('../../e/class/connect.php');//引进数据库配置文件和公共函数文件
require('../../e/class/db_sql.php');//引进数据库操作文件
$link=db_connect();//衔接MYSQL
$empire=newmysqlquery();//声明数据库操作类
$editor=1;//声明目录层次

$last=$_POST['last'];
$amount=$_POST['amount'];

$user=array('demo1','demo2','demo3','demo3','demo4');
$sql=$empire->query("select*fromceshi_ecms_newsorderbyiddesclimit$last,$amount");

while($row=$empire->fetch($sql)){
	$addurl="<ahref=".$row['titleurl'].">".$row['title']."</a>";
	$sayList[]=array(
		'content'=>$row['username'],
		'author'=>$addurl,
		'url'=>$row['titleurl'],
		'date'=>date('m-dH:i',$row['newstime'])
);
}
echojson_encode($sayList);

db_close();//封闭MYSQL链接
$empire=null;//注消操作类变量
?>

JS调用代码

(function($){
vartarget=null;
vartemplate=null;
varlock=false;
varvariables={
'last':0
}
varsettings={
'amount':'10',
'address':'comments.php',
'format':'json',
'template':'.single_item',
'trigger':'.get_more',
'scroll':'false',
'offset':'100',
'spinner_code':''
}

varmethods={
init:function(options){
returnthis.each(function(){

if(options){
$.extend(settings,options);
}
template=$(this).children(settings.template).wrap('<p/>').parent();
template.css('display','none')
$(this).append('<pclass="more_loader_spinner">'+settings.spinner_code+'</p>')
$(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(){
vardebug_string='';
$.each(variables,function(k,v){
debug_string+=k+':'+v+'n';
})
alert(debug_string);
},
remove:function(){
target.children(settings.trigger).unbind('.more');
target.unbind('.more')
target.children(settings.trigger).remove();
},
add_elements:function(data){
//alert('addingelements')

varroot=target
//alert(root.attr('id'))
varcounter=0;
if(data){
$(data).each(function(){
counter++
vart=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))

})


}
elsemethods.remove()
target.children('.more_loader_spinner').css('display','none');
if(counter<settings.amount)methods.remove()

},
get_data:function(){
//alert('gettingdata')
varile;
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])
returnmethods[method].apply(this,Array.prototype.slice.call(arguments,1));
elseif(typeofmethod=='object'||!method)
returnmethods.init.apply(this,arguments);
else$.error('Method'+method+'doesnotexist!');

}
})(jQuery)

HTML代码

<scripttype="text/javascript"src="js/jquery.more.js"></script>
<script>
$(function(){
$('#more').more({'address':'data.php'})
});
</script>
<pclass="lb-menu">
<pclass="sideMenu">
<h3class="on"><em></em>衣服</h3>
<ul>
<li>男人</li>
<li>女士</li>
<li>童装</li>
</ul>
<h3><em></em>鞋子</h3>
<ul>
<li>男人</li>
<li>女士</li>
<li>童装</li>
</ul>
<h3><em></em>配饰</h3>
<ul>
<li>男人</li>
<li>女士</li>
<li>童装</li>
</ul>
</p>
</p>
<pid="more">
<pclass="single_item">
<pclass="element_head">
<pclass="date"></p>
<pclass="author"></p>
</p>
<pclass="content"></p>
<pclass="url"></p>
</p>
<ahref="javascript:;"class="get_more">::点击加载更多内容::</a></p>