欢迎访问织梦学习网,加群!!!!!!!!!!!!!!!!
当前位置:主页 > 二次开发 >

织梦首页列表页,ajax加载更多,瀑布流,首页多栏目切换

2016-07-19 dedecms二次开发 织梦,首页,列表,页,ajax,加载,更多,瀑布,流,多,

效果图

加载更多按钮


 

一,模板上要引入jq文件   <script language="JavaScript" type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jQuery.js"></script>   二,模板   <div class="xl12 xm8 xb8 over-hidden">         <!-- 切换标签 -->         <style type="text/css">         .slideTxtBox{ width:100%;  text-align:left;  }         .slideTxtBox .hd{ height:38px; line-height:27px;  position:relative; overflow:hidden }         .slideTxtBox .hd ul{left:10px; float:left; position:absolute;  top:3px; height:39px;width:120%;}         .slideTxtBox .hd ul li{height:40px; float:left;color:#fff;padding:0px 7px 0px 6px; cursor:pointer;  }         .slideTxtBox .hd ul li.on{background:url({dede:global.cfg_templets_skin/}/images/bg5.png) repeat-x;color:red }                  .slideTxtBox .bd ul{ zoom:1;padding-bottom:50px;display:none;position:relative;}         .slideTxtBox .bd li{ height:24px; line-height:24px;   }     #dede_qrcode_frame{ display:none;z-index:5;position:absolute;top:-117px;left:-40px ;} </style>             <div id="slideTxtBox"class="slideTxtBox  l-padding00"style="overflow:visible !important;">             <div class="hd bg-main">                 <ul id="tab"class="border-top border-main border-big">                 <li class="on">全部</li>                 <li>商会</li></ul>             </div><br/>             <div class="bd"id="slideTxtBox-bd">                              <ul id="all" class="show">             {dede:arclist row='9' titlelen='100'titlelen='100' orderby='id' }     <div class="bg-fff margin-big-bottom l-margin-bottom0 l-margin-top12 list2 width-100 ib pr"id="list"> <div class="xl4  padding20 l-padding00"> <span class="pr ib "><a target="_blank" class="width-100" href="[field:arcurl/]">         <img src="[field:litpic/]" width="100%"class="width-100" alt="[field:title/]">          </a>     <!-- 微博微信 -->     <span class="left0 bottom0 height40 bgt30 width-100  text-fff text-small"id="shares" style="display:none ;">     <a class="xl-textshare cursor votenums" href="http://v.t.sina.com.cn/share/share.php?title=[field:title/] [field:global.cfg_basehost/][field:arcurl/]"></a>     <span class="line-share"></span>     <span class="wx-textshare pr">     <a class="z-index5 top0 left0" id='__dedeqrcode_1'></a>   <script type="text/javascript">   var __dedeqrcode_id=1;   var __dedeqrcode_aid=[field:id/];   var __dedeqrcode_type='arc';   var __dedeqrcode_dir='[field:global.cfg_basehost/]/plus';   </script>   <script language="javascript" type="text/javascript" src="/plus/img/qrcode.js"></script></a>     </span>     </span>     <!-- 微信 -->     </span></div>     <div class="xl8  padding-top20    l-padding-top00 ">         <p><a target="_blank" href="[field:arcurl/]"><span class="text-22  l-text-18  bl"href="[field:arcurl/]">[field:title/]</span></a></p>    </div>   </div> {/dede:arclist}     <p class="text-center margin-top bottom0 right300 width100  l-right100"><a href="javascript:" class="button radius-rounded border-main"id="alldata">加载更多</a></p>                 </ul>                                               <!-- 商会 -->         <ul id="sh">         {dede:arclist row='9' titlelen='100'typeid=1 orderby='id' }     <div class="bg-fff margin-big-bottom l-margin-bottom0 l-margin-top12 list2 width-100 ib pr"id="list"> <div class="xl4  padding20 l-padding00"> <span class="pr ib "> <a target="_blank" class="width-100" href="[field:arcurl/]">         <img src="[field:litpic/]" width="100%"class="width-100" alt="[field:title/]">     </a>     <!-- 微信 -->     <!-- 微信 -->     </span></div>     <div class="xl8 padding-top20 l-padding-top00 ">     <p><a target="_blank" href="[field:arcurl/]"><span class="text-22  l-text-18  bl"href="[field:arcurl/]">[field:title/]</span></a></p> </div>   </div> {/dede:arclist}     <p class="text-center margin-top bottom0 right300 width100 l-right100"><a href="javascript:" class="button radius-rounded border-main"id="shdata">加载更多</a></p>     </ul>      </div> </div>         <!-- slideTxtBox end --> <script type="text/javascript"> var tabs=document.getElementById("tab").getElementsByTagName("li"); var divs=document.getElementById("slideTxtBox-bd").getElementsByTagName("ul"); for(var i=0;i<tabs.length;i++){ tabs[i].onclick=function(){change(this);} } function change(obj){ for(var i=0;i<tabs.length;i++) { if(tabs[i]==obj){ tabs[i].className="on"; divs[i].className="show"; } else{ tabs[i].className=""; divs[i].className=""; } } } </script>       <script type="text/javascript"> var loadConfig = {                 url_api:'/plus/list.php',                 //typeid:{dede:field name="typeid"/},                 pagesize:9,                 loading : 0                 }                 var page=2;                 var allpage=2;                 var shpage=2; function  loadMoreApply(typeid,orderby,toid){          eval(" page ="+toid+"page;");          var pagesize = loadConfig.pagesize;          var url = loadConfig.url_api,          data={ajax:'pullload',typeid:typeid,page:page,pagesize:pagesize,orderby:orderby};             function ajax(url, data) {                 $.ajax({url: url,data: data,async: false,type: 'GET',dataType: 'json',success: function(data) {                                      addContent(data,toid);                                      }});                              }             ajax(url,data); }  function addContent (rs,toid){     if(rs.statu== 1){         var data = rs.list;         var total = rs.total;         var arr=[];         var length = data.length;         for(var i=0;i<length;i++){             arr.push('<div class="bg-fff margin-big-bottom l-margin-bottom0 l-margin-top12 ib list2" id="list">');             arr.push('<div class="xl4  padding20 l-padding00"><span class="pr ib "><a target="_blank" class="width-100" href="'+data[i].arcurl+'"><img src="'+data[i].picname+'" width="100%"class="width-100" alt="'+data[i].title+'"></a><span class="left0 top0 ib padding-top2 padding-bottom2 padding-left10 padding-right10 bg-main text-fff text-small">'+data[i].typename+'</span><span class="left0 bottom0 height40 bgt30 width-100  text-fff text-small"id="shares" style="display:none ;"><a class="xl-textshare cursor votenums" href="http://v.t.sina.com.cn/share/share.php?title='+data[i].title+'{dede:global.cfg_basehost/}'+data[i].arcurl+'"></a><span class="line-share"></span><span class="wx-textshare pr"><a class="z-index5 top0 left0" id="__dedeqrcode_1"></a>');   var __dedeqrcode_id=1;   var __dedeqrcode_aid=data[i].id;   var __dedeqrcode_type='arc';   var __dedeqrcode_dir='{dede:global.cfg_basehost/}/plus'; //arr.push("<ins style=\"display:inline-table;border:none;margin:0;padding:0;position:relative;visibility:visible;width:100%\">");   var dedeqrcodeLink = document.getElementById('__dedeqrcode_'+__dedeqrcode_id); dedeqrcodeLink.style.display = 'none'; var randNum = Math.floor(Math.random() * 2147483648).toString(36); var __dedeqrcode_src = "\""+__dedeqrcode_dir+"/qrcode.php?id="+__dedeqrcode_aid+"&type="+__dedeqrcode_type+"\""; arr.push("  <span id=\"__bfzInc_"+randNum+"\" style=\"display:block;border:none;margin:0;padding:0;position:relative;visibility:visible;width:100%\">"); arr.push("<iframe id=\"dede_qrcode_frame\" name=\"dede_qrcode_frame\" width=\"260\" height=\"280\" frameborder=\"0\" src="+__dedeqrcode_src+" marginwidth=\"0\" marginheight=\"0\" vspace=\"0\" hspace=\"0\" allowtransparency=\"true\" scrolling=\"no\" allowfullscreen=\"true\"></iframe>"); //arr.push("  </ins>"); arr.push("</span>"); arr.push('</a></span></span></span></div>'); arr.push('<div class="xl8 padding-top20 l-padding-top00"><p><a target="_blank" href="'+data[i].arcurl+'"><span class="text-22  l-text-18  bl"href="'+data[i].arcurl+'">'+data[i].title+'</span></a></p>');             arr.push('<p class="text-left hidden-l "><a class="text-555" href="'+data[i].arcurl+'">'+data[i].info+'</a></p>');             arr.push('<span class="bottom10 l-bottom-5 right10 ib height30  text-12"style="color:#999">');             arr.push('<span title="'+data[i].stime+'">'+data[i].timeago+'</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');             arr.push('<span class="b-border-right"><span class="cursor icon-click">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>'+data[i].click+'&nbsp;&nbsp;&nbsp;</span>');                          arr.push('<span class="hidden-l" id="diggNum'+data[i].id+'">&nbsp;&nbsp;<a class=" text-bbb text-16"href="javascript:" onclick="javascript:postDigg(\'good\','+data[i].id+');"><span id="digg'+data[i].id+'" class="icon-heart2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;</a>'+data[i].goodpost+'</span>');             arr.push('<a class="hidden-l"href="/plus/stow.php?aid='+data[i].id+'&type=sys"title="收藏" target="_blank">&nbsp;&nbsp;<span class="border-right"></span>&nbsp;&nbsp;&nbsp;<span class="icon-star2 cursor ib height22 width22"> &nbsp;&nbsp;&nbsp;&nbsp;</span></a>');             arr.push('</span>');                          arr.push('</div></div>');}         $('#'+toid).append(arr.join(''));              loadConfig.load_num = rs.load_num;         if(total<page*loadConfig.pagesize || page> loadConfig.load_num){             //$('#'+toid).append('<p class="text-center margin-top"><a href="javascript:" class="button radius-rounded border-main width-20"id="'+toid+'data">没有了!</a></p>');         $("#"+toid+"data").html('没有了!');         }else{                      //$('#'+toid).append('<p class="text-center margin-top"><a href="javascript:" class="button radius-rounded border-main width-20"id="'+toid+'data">加载更多</a></p>');         }                   eval(toid+"page  ++;");      }          add_winxin();     add_share(); } $("#alldata").click(function() { loadMoreApply(0,1,'all');//all }); $("#shdata").click(function() { loadMoreApply(1,1,'sh');//商会 //$(this).parent('p').remove(); }); $(document).ready(function(){ add_winxin(); add_share(); });   function add_winxin(){      $("#slideTxtBox-bd #list").hover(function() { $(this).find("#shares").show(); },function(){ $(this).find("#shares").hide(); }); }   function add_share(){ $("#list .wx-textshare").hover(function() { $(this).find("#dede_qrcode_frame").show(); },function(){ $(this).find("#dede_qrcode_frame").hide(); }); }   </script>     三,修改,plus/list.PHP 在require_once(dirname(__FILE__)."/../include/common.inc.php");    的下面增加一段   if(isset($_GET['ajax'])){      $typeid = isset($_GET['typeid']) ? intval($_GET['typeid']): 0;//传递过来的分类ID      $orderby = isset($_GET['orderby']) ? intval($_GET['orderby']): 1;      //print_r($orderby);exit;      //1id排,2hot排序   $page = isset($_GET['page']) ? intval($_GET['page']): 0;//页码   $pagesize = isset($_GET['pagesize']) ? intval($_GET['pagesize']): 10;//每页多少条,也就是一次加载多少条数据   $start = $page>0 ? ($page-1)*$pagesize : 0;//数据获取的起始位置。即limit条件的第一个参数。      $ntime2 = gmmktime(0, 0, 0, gmdate('m'), gmdate('d'), gmdate('Y'));             $limitday = $ntime2 - (40 * 24 * 3600);//40天内热文             $orwheres = " a.senddate > $limitday ";                //$typesql = $typeid ? " WHERE typeid=$typeid" : '';      if($orderby==1){//id降序     $typesql = $typeid ? " WHERE typeid=$typeid" : '';   } else{//hot排序            $typesql = $typeid ? " WHERE typeid=".$typeid." and ".$orwheres : " WHERE ".$orwheres;       }   //这个是用于首页实现瀑布流加载, //因为首页加载数据是无需分类的,所以要加以判断,如果无需    $total_sql = "SELECT COUNT(id) as num FROM `dede_archives`  $typesql ";   $temp = $dsql->GetOne($total_sql);   $total = 0;//数据总数   $load_num =0;   if(is_array($temp)){     $load_num= round(($temp['num']-$pagesize)/$pagesize);//要加载的次数,因为默认已经加载了     $total = $temp['num'];   }       if($orderby==1){//新   $sql = "SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,         t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath FROM `dede_archives` as a JOIN `dede_arctype` AS t ON a.typeid=t.id    $typesql ORDER BY id DESC LIMIT $start,$pagesize"; }else{//热门           $sql = "SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,         t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath FROM `dede_archives` as a JOIN `dede_arctype` AS t ON a.typeid=t.id    $typesql ORDER BY click DESC LIMIT $start,$pagesize";     } //echo "$sql";exit;    $dsql->SetQuery($sql);     $dsql->Execute('list');    $statu = 0;//是否有数据,默认没有数据    $data = array();      $index = 0; while($row = $dsql->GetArray("list")){     $row['info'] = $row['info'] = $row['infos'] = cn_substr($row['description'],250);      $row['id'] =  $row['id'];            $row['filename'] = $row['arcurl'] = GetFileUrl($row['id'],$row['typeid'],$row['senddate'],$row['title'],$row['ismake'], $row['arcrank'],$row['namerule'],$row['typedir'],$row['money'],$row['filename'],$row['moresite'],$row['siteurl'],$row['sitepath']);   $row['typeurl'] = GetTypeUrl($row['typeid'],$row['typedir'],$row['isdefault'],$row['defaultname'],$row['ispart'],$row['namerule2'],$row['moresite'],$row['siteurl'],$row['sitepath']);       if($row['litpic'] == '-' || $row['litpic'] == ''){       $row['litpic'] = $GLOBALS['cfg_cmspath'].'/images/defaultpic.gif';    }         if(!preg_match("#^http:\/\/#i", $row['litpic']) &&$GLOBALS['cfg_multi_site'] == 'Y'){     $row['litpic'] = $GLOBALS['cfg_mainsite'].$row['litpic'];    }   $row['picname'] = $row['litpic'];//缩略图   $row['writer'] = $row['writer'];   $row['click'] = $row['click'];    $row['stime'] = GetDateMK($row['pubdate']);   $row['timeago']= timeago($row['pubdate']);   $row['typelink'] = "<a href='".$row['typeurl']."'>".$row['typename']."</a>";//分类链   $row['fulltitle'] = $row['title'];//完整的标题   $row['shorttitle'] = $row['shorttitle'];//副标题   $row['title'] = cn_substr($row['title'], 60);//截取后的标题    $data[$index] = $row;    $index++; } if(!empty($data)){ $statu = 1;//有数据 } $result =array('statu'=>$statu,'list'=>$data,'total'=>$total,'load_num'=>$load_num); echo json_encode($result);//返回数据 exit(); }