您现在的位置是:首页 > 教程 > 帝国CMS教程帝国CMS教程
帝国CMS内容点击加载无限瀑布流的实现方法
盼曼2023-05-17 23:38:26帝国CMS教程已有人查阅
导读帝国CMS无限加载是借鉴别的CMS插件更改的。现在还在制作样式中,完成后会以插件分享给大家!无限加载常见的原理是利用PHP文件调用数据库信息
帝国CMS无限加载是借鉴别的CMS插件更改的。现在还在制作样式中,完成后会以插件分享给大家!无限加载常见的原理是利用PHP文件调用数据库信息,在用JS读取PHP信息,最后插入显示到页面。
PHP文件代码
<?php
require_once('../../e/class/connect.php'); //引入数据库配置文件和公共函数文件
require('../../e/class/db_sql.php'); //引入数据库操作文件
$link=db_connect(); //连接MYSQL
$empire=new mysqlquery(); //声明数据库操作类
$editor=1; //声明目录层次
$last = $_POST['last'];
$amount = $_POST['amount'];
$user = array('demo1','demo2','demo3','demo3','demo4');
$sql=$empire->query("select * from ceshi_ecms_news order by id desc limit $last,$amount");
while ($row=$empire->fetch($sql)) {
$addurl="<a href=".$row['titleurl'].">".$row['title']."</a>";
$sayList[] = array(
'content'=>$row['username'],
'author'=>$addurl,
'url'=>$row['titleurl'],
'date'=>date('m-d H:i',$row['newstime'])
);
}
echo json_encode($sayList);
db_close(); //关闭MYSQL链接
$empire=null; //注消操作类变量
?>
JS调用代码
(function( $ ){
var target = null;
var template = null;
var lock = false;
var variables = {
'last' : 0
}
var settings = {
'amount' : '10',
'address' : 'comments.php',
'format' : 'json',
'template' : '.single_item',
'trigger' : '.get_more',
'scroll' : 'false',
'offset' : '100',
'spinner_code': ''
}
var methods = {
init : function(options){
return this.each(function(){
if(options){
$.extend(settings, options);
}
template = $(this).children(settings.template).wrap('<div/>').parent();
template.css('display','none')
$(this).append('<div class="more_loader_spinner">'+settings.spinner_code+'</div>')
$(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(){
var debug_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('adding elements')
var root = target
// alert(root.attr('id'))
var counter = 0;
if(data){
$(data).each(function(){
counter++
var t = 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))
})
}
else methods.remove()
target.children('.more_loader_spinner').css('display','none');
if(counter < settings.amount) methods.remove()
},
get_data : function(){
// alert('getting data')
var ile;
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])
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
else if(typeof method == 'object' || !method)
return methods.init.apply(this, arguments);
else $.error('Method ' + method +' does not exist!');
}
})(jQuery)
HTML代码
<script type="text/javascript" src="js/jquery.more.js"></script>
<script>
$(function(){
$('#more').more({'address': 'data.php'})
});
</script>
<div class="lb-menu">
<div class="sideMenu">
<h3 class="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>
</div>
</div>
<div id="more">
<div class="single_item">
<div class="element_head">
<div class="date"></div>
<div class="author"></div>
</div>
<div class="content"></div>
<div class="url"></div>
</div>
<a href="javascript:;" class="get_more">::点击加载更多内容::</a> </div>
本文标签:
很赞哦! ()
相关文章
随机图文
-
php获取帝国CMS各种路径的几种写法
获取帝国CMS路径方法1,获取帝国CMS路径方法2,PHP实现获取当前页面的完整地址 -
帝国CMS灵动标签怎么在内容页调用列表页关键字
在内容页调用栏目页关键字,可是网上提供的标签都不能用。下面我给大家提供一下 -
帝国CMS如何更改搜索后的返回页面,更改后不生效怎么办
帝国CMS搜索返回页面(也就是搜索后返回的页面)的模板更改一般是在后台--模板--搜索模板--管理搜索模板里修改的如下图:点击修改以后里面就是模板代码了:这里修改以后,有同学说前 -
帝国CMS修改列表页码数量的方法
帝国CMS修改列表页码数量方法,我的站长站来个集合,一次性讲解静态列表、动态列表、结合项列表页码数量修改方法。
留言与评论 (共有 条评论) |