帝国cms模板开发教程 帝国CMS二次开发内容点击无限加载思路分享

帝国CMS教程

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

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

PHP文件代码

<?phprequire_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>