帝国CMS列表内AJAX无刷新点赞代码,实现列表内AJAX无刷新点赞,直接上代码,注意需要jquery.min.js支持!
列表模板里写:
1.页面需要引入jquery.js文件
2. 消息列表页合适位置添加以下代码(我是在<div>中添加的,关键是要添加代码: id="showajaxnews",这样点击 点击添加更多 按钮时,列表内容就被添加到了<div id="showajaxnews">下面)
我的是这样的:<div id="showajaxnews">,大家对照自行修改。
3. 在消息列表页加上 点击加载更多 按钮。
我的是这样的:<div class="nomore" target="_self" id="loadmores">点击加载更多</div>
4. 在会员列表页</body>前加上以下js代码。
说明:
(1). 代码中 'limit':10 , 10需修改为你想点击一次加载更多时加载的条数。通常要修改成和 /e/member/msg/index.php 文件中的 $line=10; 这个数一样
(2). 代码中有 <img src="/skin/list/loaduai.gif" width=20/> 页面加载中...,所以需要在 /skin/list/ 下添加这个表示正在加载的GIF动画图标 loaduai.gif 。你也可以把图标放在别的位置,但要修改相应的这个 /skin/list/loaduai.gif 代码。
getmoremsg.php内容如下:
列表模板里写:
列表内容模板需要点赞的地方写:
- <script type="text/javascript">
- $(".icon-thumbs-up").click(function(event){
- event.preventDefault();
- var mythis = $(this);
- var classid = mythis.data("classid");
- var id = mythis.data("id");
- $.ajax({
- type:"GET",
- url:"[!--news.url--]e/public/digg/",
- data:{"classid":classid,"id":id,"dotop":1,"doajax":1,"ajaxarea":"diggnum"},
- dataType:"text",
- success:function(data){
- var reinfo = data.split("|");
- if (reinfo.length != 1) {
- if (reinfo[0] != "") {
- mythis.find("em").html(reinfo[0]);
- }
- if (reinfo[2] != "") {
- //var left = parseInt(mythis.offset().left)+20, top = parseInt(mythis.offset().top);
- var left = 20, top = mythis.find("em").get(0).offsetHeight;
- $(".zan").remove();
- if (reinfo[2] == "谢谢您的支持") {
- mythis.append('<div class="zan">+1 谢谢您的支持</div>');
- //$("body").append('<div class="zan">+1 谢谢您的支持</div>');
- }else{
- mythis.append('<div class="zan">已赞</div>');
- //$("body").append('<div class="zan">已赞</div>');
- }
- //"text-shadow":"0 1px 0 rgba(0,0,0,0.5)","font-family":"simsun"
- $(".zan").css({"position":"absolute","z-index":"10","left":left+"px","top":-top+"px","color":"inherit","width":"120px","height":"60px","background":"#fff","border-radius":"6px"}).animate({top:-top-30},"slow",function(){$(this).fadeIn("fast").remove();});
- }
- }else{}
- }
- });
- });
- </script>
帝国cms7.5使用 点击加载更多系列(七) 点击加载更多消息(消息列表夹页面使用)
- <a href="[!--titleurl--]" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="icon-thumbs-up" data-classid="[!--classid--]" data-id="[!--id--]"><span class="font"><i class="fa fa-heart-o"></i><em>[!--diggtop--]</em>个赞</span></a>
1.页面需要引入jquery.js文件
2. 消息列表页合适位置添加以下代码(我是在<div>中添加的,关键是要添加代码: id="showajaxnews",这样点击 点击添加更多 按钮时,列表内容就被添加到了<div id="showajaxnews">下面)
我的是这样的:<div id="showajaxnews">,大家对照自行修改。
3. 在消息列表页加上 点击加载更多 按钮。
我的是这样的:<div class="nomore" target="_self" id="loadmores">点击加载更多</div>
4. 在会员列表页</body>前加上以下js代码。
说明:
(1). 代码中 'limit':10 , 10需修改为你想点击一次加载更多时加载的条数。通常要修改成和 /e/member/msg/index.php 文件中的 $line=10; 这个数一样
(2). 代码中有 <img src="/skin/list/loaduai.gif" width=20/> 页面加载中...,所以需要在 /skin/list/ 下添加这个表示正在加载的GIF动画图标 loaduai.gif 。你也可以把图标放在别的位置,但要修改相应的这个 /skin/list/loaduai.gif 代码。
5. 在/e/action/下添加文件 getmoremsg.php(修改 $limit=10; 中的10和 js中的数字一样)
- <script>
- $(function(){
- var i = 1; //设置当前页数
- $('#loadmores').click(function(){
- $.ajax({
- url : '/e/action/getmoremsg.php',
- type:'POST',
- data:{"next":i,'action':'getmoremsg','limit':10,},
- dataType : 'html',
- beforeSend:function(){
- $("#loadmores").show().html('<img src="/skin/memberlist/loaduai.gif" width=20/> 页面加载中...');
- $('#loadmores').attr('disabled','disabled');
- },
- success : function(data){
- if(data){
- $("#showajaxnews").append(data);
- $("#loadmores").removeAttr('disabled');
- $("#loadmores").html('点击加载更多');
- i++;
- }else{
- $("#loadmores").show().html("已全部加载完毕!");
- $('#loadmores').attr('disabled','disabled');
- return false;
- }
- }
- });
- });
- });
- </script>
getmoremsg.php内容如下:
- <?php
- require('../class/connect.php');
- require('../class/db_sql.php');
- require('../data/dbcache/class.php');
- require("../class/q_functions.php");
- require("../member/class/user.php");
- require("../data/dbcache/MemberLevel.php");
- $actions = RepPostVar2($_POST[action]);
- $limits = (int)$_POST[limit];
- $table=enewsqmsg;
- $link=db_connect();
- $empire=new mysqlquery();
- eCheckCloseMods('member');//关闭模块
- $user=islogin();
- if($actions == 'getmoremsg1'){
- if(empty($limits)){$limit=10;}else{ $limit=$limits;}
- $num =(int)$_POST['next']*$limit;
- if($table){
- $query="select mid,title,haveread,from_userid,from_username,isadmin,msgtime,issys from {$dbtbpre}enewsqmsg where to_username='$user[username]' order by msgtime desc limit $num,$limit";
- $sql=$empire->query($query);
- while($r=$empire->fetch($sql))
- {
- $img="haveread";
- if(!$r[haveread])
- {$s="/e/member/cp/duanxin.mp3"; $img="nohaveread"; }
- //后台管理员
- if($r['isadmin'])
- {
- $from_username="<a title='后台管理员'><b>".$r[from_username]."</b></a>";
- }
- else
- {
- $from_username="<a href='/e/space/UserInfo.php?userid=".$r[from_userid]."'>".$r[from_username]."</a>";
- $from_username1="$r[from_username]";
- }
- //系统信息
- if($r['issys'])
- {
- $from_username="<b>系统消息</b>";
- $r[title]="<b>".$r[title]."</b>";
- }
- ?>
- <?php
- $userr=$empire->fetch1("select userpic from phome_enewsmemberadd where userid='$r[from_userid]'");
- ?>
- //以下修改成你消息列表的内容
- <div class="line-wrapper">
- <div class="line-scroll-wrapper" >
- <div class="line-normal-wrapper" >
- <div class="line-normal-left-wrapper">
- <div class="line-normal-avatar-wrapper"><a href="<?=$public_r[newsurl]?>e/space/?userid=<?=$r['from_userid']?>" target="_blank"> <img class="img_width" src="<?=$userr[userpic]?$userr[userpic]:'/e/data/images/nouserpic.gif'?>" alt=""></a> </div>
- <div class="line-normal-info-wrapper">
- <div class="line-normal-user-name">
- <?=$from_username?>
- </div>
- <div class="line-normal-msg" > <a href="ViewMsg/?mid=<?=$r[mid]?>">
- <?=stripSlashes($r[title])?>
- </a> </div>
- </div>
- </div>
- <span class="line-normal-icon-wrapper"><img src="../../data/images/<?=$img?>.gif" border=0></span>
- <div class="line-normal-time">
- <?=substr($r[msgtime],2,8)?>
- </div>
- </div>
- <div class="line-btn-delete">
- <buton><a href="/e/member/msg/AddMsge/?username=<?=$from_username1?>"><img src="/skin/msg/addmsg.png"></a></buton>
- <buton><a href="/e/member/msg/AddMsgZf/?enews=AddMsg&mid=<?=$r[mid]?>"><img src="/skin/msg/zhuanfa.png"></a></buton>
- <buton><a href="../doaction.php?enews=DelMsg&mid=<?=$r[mid]?>" onClick="return confirm(' 确定要删除这条消息?');"><img src="/skin/msg/delete.png"></a> </buton>
- </div>
- </div>
- </div>
- //以上修改成你消息列表的内容
- <?php
- }
- }
- }
- ?>
- <?php
- db_close();
- $empire=null;
- ?>