帝国cms 滚动加载更多文章
时间:2024年04月11日
/来源:网络
/编辑:佚名
想要自己加载得要涉及到PHP+JQ+AJAX:
第一步:新建个php代码get_news_index.php 上传到 /e/action:
<?php
require('../class/connect.php');
require('../class/db_sql.php');
require('../data/dbcache/class.php');
if($_POST[action] == 'getmorenews'){
$table=htmlspecialchars($_POST[table]);
if(empty($_POST[orderby])){$orderby='newstime';}else{ $orderby=htmlspecialchars($_POST[orderby]);}
if(empty($_POST[myorder])){$myorder='desc';}else{ $myorder='asc';}
if(empty($_POST[limit])){$limit=3;}else{ $limit=(int)$_POST[limit];}
if(empty($_POST[classid])){$where=null;}else{ $where='where classid in('.$_POST[classid].')';}
if(empty($_POST[length])){$length=50;}else{ $length=(int)$_POST[length];}
if(empty($_POST[small_length])){$small_length=120;}else{ $small_length=(int)$_POST[small_length];}
$link=db_connect();
$empire=new mysqlquery();
$num =(int)$_POST['next'] *$limit;
if($table){
$sql=$empire->query("SELECT * FROM `".$dbtbpre."ecms_".$table."` $where order by $orderby $myorder limit $num,$limit");
while($r=$empire->fetch($sql)){
if($r[titlepic]==''){
$r[titlepic]=$public_r[news.url]."e/data/images/notimg.gif";
}
$oldtitle=stripSlashes($r[title]);
$title=sub($oldtitle,'',$length);
$smalltext=stripSlashes($r[smalltext]);
$smalltext=sub($smalltext,'',$small_length);
$classname=$class_r[$r[classid]][classname];
$newsurl=$public_r[newsurl];
$classurl=$newsurl.$class_r[$r[classid]][classpath];
?>
<article class="excerpt excerpt-one" data-id="<?=$r[classid]?>">
<header><a class="cat label label-important" href="<?=$class_r[$r[classid]]['classpath']?> "><?=$class_r[$r[classid]][bname]?><i class="label-arrow"></i></a>
<h2><a href="<?=$r[titleurl]?>" title="<?=$r[oldtitle]?>"><?=$r[title]?></a></h2>
<small class="text-muted"><span class="glyphicon glyphicon-picture"></span><?=$r[imgcount]?></small></header>
<p class="text-muted time"><?=$r[username]?> 发布于 <?=date('Y-m-d',$r[newstime])?></p>
<p class="focus"><a href="<?=$r[titleurl]?>" class="thumbnail"><img src="<?=$r[titlepic]?>" /></a></p>
<p class="note"><?=$smalltext?>...</p>
<p class="text-muted views">
<span class="post-views">阅读(<?=$r[onclick]?>)</span>
<span class="post-comments">评论(<?=$r[plnum]?>)</span><a href="JavaScript:makeRequest('<?=$public_r[news.url]?>e/public/digg?classid=<?=$r[classid]?>&id=<?=$r[id]?>&dotop=1&doajax=1&ajaxarea=diggnum<?=$r[id]?>','EchoReturnedText','GET','');" class="post-like" ><i class="glyphicon glyphicon-thumbs-up"></i>赞 (<span id="diggnum<?=$r[id]?>"><?=$r[diggtop]?></span>)</a>
<span class="post-tags">标签:<a href="/337/e/tags/?tagname=<?=stripSlashes($r[keyboard])?>" target="_blank" rel="tag" data-original-title><?=stripSlashes($r[keyboard])?></a></span></p>
</article>
//这部分代码添加自己的模板代码
<?php
}
}
}
db_close();
$empire=null;
?>
第二步要写js代码 ajaxShow.js:
$(function() {
var i =0; //设置当前页数
if (!NeuF) var NeuF = {};
NeuF.ScrollPage = function (obj, options, callback) {
var _defaultOptions = {delay: 500, marginBottom: 200}; //默认配置:延迟时间delay和滚动条距离底部距离marginBottom
options = $.extend(_defaultOptions, options);
this.isScrolling = false; //是否在滚动
this.oriPos = 0; //原始位置
this.curPos = 0; //当前位置
var me = this; //顶层
var $obj = (typeof obj == "string") ? $("#" + obj) : $(obj);
//绑定滚动事件
$obj.scroll(function (ev) {
me.curPos = $obj.scrollTop();
if ($(window).height() + $(window).scrollTop() >= $(document.body).height() - options.marginBottom) {
if (me.isScrolling == true) return;
me.isScrolling = true;
setTimeout(function () {
me.isScrolling = false;
}, options.delay); //重复触发间隔毫秒
if (typeof callback == "function") callback.call(null, me.curPos - me.oriPos);
}
;
me.oriPos = me.curPos;
});
};
$(function () {
window.scrollTo(0, 0); //每次F5刷新把滚动条置顶
function show() {
$.ajax({
url: 'http://www.****.com/e/action/get_news_index.php',//自己的域名
type: 'POST',
data: {
"next": i,
'table': 'news',
'action': 'getmorenews',
'limit': 10,
'small_length': 120
},
dataType: 'html',
beforeSend: function () {
$("#loadmore").show().html('<img src="/307/skin/ecms103/images/loading.gif"/>正在努力加载中...');
$('#loadmore').attr('disabled', 'disabled');
},
success: function (data) {
if (data) {
$("#showajaxnews").append(data);
$("#loadmore").removeAttr('disabled');
$("#loadmore").html('滚动加载更多');
i++;
} else {
$("#loadmore").show().html("已全部加载完毕!");
console.log(data);
$('#loadmore').attr('disabled', 'disabled');
return false;
}
}
});
};
show();
//marginBottom表示滚动条离底部的距离,0表示滚动到最底部才加载,可以根据需要修改
new NeuF.ScrollPage(window, {delay: 1000, marginBottom: 0}, function (offset) {
if (offset > 0) {
setTimeout(show,1000)
}
});
});
});
第三步:
要在 HTML 加入代码:
<div id="showajaxnews"> 列表加载这里面 </div>
<div id="loadmore">滚动加载更多</div>
案例图:
第一步:新建个php代码get_news_index.php 上传到 /e/action:
<?php
require('../class/connect.php');
require('../class/db_sql.php');
require('../data/dbcache/class.php');
if($_POST[action] == 'getmorenews'){
$table=htmlspecialchars($_POST[table]);
if(empty($_POST[orderby])){$orderby='newstime';}else{ $orderby=htmlspecialchars($_POST[orderby]);}
if(empty($_POST[myorder])){$myorder='desc';}else{ $myorder='asc';}
if(empty($_POST[limit])){$limit=3;}else{ $limit=(int)$_POST[limit];}
if(empty($_POST[classid])){$where=null;}else{ $where='where classid in('.$_POST[classid].')';}
if(empty($_POST[length])){$length=50;}else{ $length=(int)$_POST[length];}
if(empty($_POST[small_length])){$small_length=120;}else{ $small_length=(int)$_POST[small_length];}
$link=db_connect();
$empire=new mysqlquery();
$num =(int)$_POST['next'] *$limit;
if($table){
$sql=$empire->query("SELECT * FROM `".$dbtbpre."ecms_".$table."` $where order by $orderby $myorder limit $num,$limit");
while($r=$empire->fetch($sql)){
if($r[titlepic]==''){
$r[titlepic]=$public_r[news.url]."e/data/images/notimg.gif";
}
$oldtitle=stripSlashes($r[title]);
$title=sub($oldtitle,'',$length);
$smalltext=stripSlashes($r[smalltext]);
$smalltext=sub($smalltext,'',$small_length);
$classname=$class_r[$r[classid]][classname];
$newsurl=$public_r[newsurl];
$classurl=$newsurl.$class_r[$r[classid]][classpath];
?>
<article class="excerpt excerpt-one" data-id="<?=$r[classid]?>">
<header><a class="cat label label-important" href="<?=$class_r[$r[classid]]['classpath']?> "><?=$class_r[$r[classid]][bname]?><i class="label-arrow"></i></a>
<h2><a href="<?=$r[titleurl]?>" title="<?=$r[oldtitle]?>"><?=$r[title]?></a></h2>
<small class="text-muted"><span class="glyphicon glyphicon-picture"></span><?=$r[imgcount]?></small></header>
<p class="text-muted time"><?=$r[username]?> 发布于 <?=date('Y-m-d',$r[newstime])?></p>
<p class="focus"><a href="<?=$r[titleurl]?>" class="thumbnail"><img src="<?=$r[titlepic]?>" /></a></p>
<p class="note"><?=$smalltext?>...</p>
<p class="text-muted views">
<span class="post-views">阅读(<?=$r[onclick]?>)</span>
<span class="post-comments">评论(<?=$r[plnum]?>)</span><a href="JavaScript:makeRequest('<?=$public_r[news.url]?>e/public/digg?classid=<?=$r[classid]?>&id=<?=$r[id]?>&dotop=1&doajax=1&ajaxarea=diggnum<?=$r[id]?>','EchoReturnedText','GET','');" class="post-like" ><i class="glyphicon glyphicon-thumbs-up"></i>赞 (<span id="diggnum<?=$r[id]?>"><?=$r[diggtop]?></span>)</a>
<span class="post-tags">标签:<a href="/337/e/tags/?tagname=<?=stripSlashes($r[keyboard])?>" target="_blank" rel="tag" data-original-title><?=stripSlashes($r[keyboard])?></a></span></p>
</article>
//这部分代码添加自己的模板代码
<?php
}
}
}
db_close();
$empire=null;
?>
第二步要写js代码 ajaxShow.js:
$(function() {
var i =0; //设置当前页数
if (!NeuF) var NeuF = {};
NeuF.ScrollPage = function (obj, options, callback) {
var _defaultOptions = {delay: 500, marginBottom: 200}; //默认配置:延迟时间delay和滚动条距离底部距离marginBottom
options = $.extend(_defaultOptions, options);
this.isScrolling = false; //是否在滚动
this.oriPos = 0; //原始位置
this.curPos = 0; //当前位置
var me = this; //顶层
var $obj = (typeof obj == "string") ? $("#" + obj) : $(obj);
//绑定滚动事件
$obj.scroll(function (ev) {
me.curPos = $obj.scrollTop();
if ($(window).height() + $(window).scrollTop() >= $(document.body).height() - options.marginBottom) {
if (me.isScrolling == true) return;
me.isScrolling = true;
setTimeout(function () {
me.isScrolling = false;
}, options.delay); //重复触发间隔毫秒
if (typeof callback == "function") callback.call(null, me.curPos - me.oriPos);
}
;
me.oriPos = me.curPos;
});
};
$(function () {
window.scrollTo(0, 0); //每次F5刷新把滚动条置顶
function show() {
$.ajax({
url: 'http://www.****.com/e/action/get_news_index.php',//自己的域名
type: 'POST',
data: {
"next": i,
'table': 'news',
'action': 'getmorenews',
'limit': 10,
'small_length': 120
},
dataType: 'html',
beforeSend: function () {
$("#loadmore").show().html('<img src="/307/skin/ecms103/images/loading.gif"/>正在努力加载中...');
$('#loadmore').attr('disabled', 'disabled');
},
success: function (data) {
if (data) {
$("#showajaxnews").append(data);
$("#loadmore").removeAttr('disabled');
$("#loadmore").html('滚动加载更多');
i++;
} else {
$("#loadmore").show().html("已全部加载完毕!");
console.log(data);
$('#loadmore').attr('disabled', 'disabled');
return false;
}
}
});
};
show();
//marginBottom表示滚动条离底部的距离,0表示滚动到最底部才加载,可以根据需要修改
new NeuF.ScrollPage(window, {delay: 1000, marginBottom: 0}, function (offset) {
if (offset > 0) {
setTimeout(show,1000)
}
});
});
});
第三步:
要在 HTML 加入代码:
<div id="showajaxnews"> 列表加载这里面 </div>
<div id="loadmore">滚动加载更多</div>
案例图:
新闻资讯 更多
- 【帝国cms教程】帝国cms 滚动加载更多文章04-11
- 【帝国cms教程】帝国cms栏目导航,循环列出所有子栏目名,和当前子栏目下的文章列表和所有一级栏目信息数子栏目信息数量04-11
- 【帝国cms教程】帝国cms怎么统计栏目信息数量/统计当前栏目信息数量?totaldata标签的用法04-11
- 【帝国cms教程】帝国cms灵动标签调用专题信息/专题时间/专题下的信息数量04-11
- 【帝国cms教程】帝国cms灵动标签/php调用tags实例04-11
- 【帝国cms教程】帝国cmsPC页面跳转到wap移动端代码/万能移动适配代码04-11
- 【帝国cms教程】帝国CMS给当天发布的最新信息添加new最新图标/角标04-11
- 【帝国cms教程】帝国CMS列表页模板怎么调用TAG标签/显示文章关键词tags04-11
热门文章
- 178Moban源码谈谈免费源码与收费源码的区别
- 2帝国CMS忘记后台登陆用户名、密码、认证码的解决方法
- 3帝国CMS(EmpireCMS) v7.5后台任意代码执行漏洞及具体修复方法
- 4帝国CMS和WordPress 哪个好?哪个适合建站?
- 5如何解决Discuz的密码错误次数过多请15分钟后登陆的问题
- 6帝国cms灵动标签取得内容和栏目链接地址
- 7emlog pro 注册码“开心”教程(如果有一天,emlog官方版 或者 emlog免费版 跑路了,那用户怎么办?)
- 8帝国cms后台登录出现”您还未登录”怎么解决?
- 9织梦CMS在nginx下设置伪静态方法(附nginx伪静态规则)
- 10帝国cms7.5忘记登录密码 和忘记登录认证码以及多次登录 失败被锁定解决办法