• 全国400电话网上服务平台
    强大号码库资源任选，方便，快捷，快速开通。
    咨询热线：400-1100-266  

    织梦dedecms首页列表页,ajax点击加载更多,瀑布流,首页多栏目切换
    POST TIME:2021-05-24 03:10

    简化部分主要是栏目切换时,除子第一个默认栏目,其它的全改成ajax,不再生成静态页,而且通过PHP循环,简化了代码.另外加载更多按钮等也修改了触发形式.

    效果图

    (此图片来源于网络，如有侵权，请联系删除! )

     

    一,模板

    模板中涉及一个函数.get_url_by_typeid2() 在这里的说明,点击查看

    [html] view plain copy
     
    1. <div class="container  margin-top over-hidden">  
    2. <div class="xl12 xb12 over-hidden">  
    3.         <!-- 切换标签 -->  
    4.         <style type="text/css">  
    5.           
    6.         .slideTxtBox{ width:100%;  text-align:left;  }  
    7.         .slideTxtBox .hd{ height:38px; line-height:27px;  position:relative; overflow:hidden }  
    8.         .slideTxtBox .hd ul{left:10px; float:left; position:absolute;  top:3px; height:39px;over-flow:hidden;}  
    9.         .slideTxtBox .hd ul li{height:40px; float:left;color:#fff;padding:0px 7px 0px 6px; cursor:pointer;  }  
    10.         .slideTxtBox .hd ul li a{color:#fff; }  
    11.         .slideTxtBox .hd ul li.on   
    12. {background:url({dede:global.cfg_templets_skin/}/images/bg5.png) repeat-x; }  
    13.         .slideTxtBox .hd ul li.on a{color:#555}  
    14.         .slideTxtBox .bd ul{zoom:1;padding-bottom:50px;display:none;position:relative;min-height:100px}  
    15.         .slideTxtBox .bd li{ height:24px; line-height:24px;   }  
    16.           
    17.   
    18.   
    19.         </style>  
    20.   
    21.   
    22.         <div id="slideTxtBox"class="slideTxtBox  padding00"style="overflow:visible !important;">  
    23.             <!-- 主导航 -->  
    24.             <div class="hd bg-main pr">  
    25.                 <ul id="tab"class="border-top border-main border-big">  
    26.                 <li class="on"id=""><a href="javascript:"onclick="javascript:loadMoreApply(1,0);">全部</a></li>  
    27.                   
    28.                     {dede:channel type='top' row='50' }  
    29.         <li id="tab[field:id/]"><a href="javascript:"onclick="javascript:change_tab([field:id/]);loadMoreApply(1,[field:id/]);" >[field:typename/]</a></li>  
    30.         {/dede:channel}  
    31.           
    32.           
    33.           
    34.                 </ul>  
    35.               
    36.                 <span class="icon-angle-down text-white width30 padding-left10  ib text-22  top7 right2 bg-main"  data-target="#navbar2">  
    37.       </span>  
    38.             </div>  
    39.             <!-- 下拉导航 -->  
    40.               
    41.             <div class="navbar-body margin-top6  hidden  ib" id="navbar2">  
    42.         <ul class="nav nav-inline nav-menu  ">     
    43.       {dede:channelartlist typeid="top" row='33' }   
    44. <li class="{dede:field.active/}">  
    45. <a  href="javascript:"onclick="javascript:change_tab({dede:field.typeid/});loadMoreApply(1,{dede:field.typeid/});">  
    46. {dede:field name="typename"/}  
    47. </a>   
    48. </li>   
    49. {/dede:channelartlist}   
    50.         </ul>  
    51.     </div>  
    52.             <div class="bd"id="slideTxtBox-bd">  
    53.               
    54.                 <ul id="0" class="show">  
    55.                 <!-- 全部 -->  
    56.               
    57.     {dede:arclist row='2' titlelen='100' orderby='id' }  
    58.     <div class="bg-fff    width-100 ib pr">  
    59.         <div class="xl12  padding10" >  
    60.             <div class="media media-x">  
    61.     <a class="float-left" href="[field:arcurl/]">  
    62.         <img src="[field:litpic/]" width="80" class="radius" alt="[field:title/]">  
    63.     </a>  
    64.     <div class="media-body" style="width:900px;height:;">  
    65.         <strong>[field:title/]</strong>   
    66.         <div style="height:5px;"></div>  
    67.         <!-- 点击 -->  
    68.          <span>   
    69.    <span class=" cursor icon-click">      </span>  
    70.    <script src="/plus/count_list.php?view=yes&aid=[field:id/]" type='text/javascript' language="javascript"></script></span>  
    71.   
    72.  <span  id="diggNum[field:id/]"><a href="javascript:"class=" text-bbb text-16 width33 " onclick="javascript:postDigg('good',[field:id/])"><span id="digg[field:id/]" class="icon-heart2 ">     </span> </a>[field:goodpost/]   
    73. </span>    
    74.     <div style="height:12px;"></div>  
    75.     <!-- 所属分类 archives-->  
    76.         <a  class="button bg-gray button-little radius-none margin-right2 text-12"href="javascript:"onclick="javascript:change_tab([field:typeid/]);loadMoreApply(1,[field:typeid/]);">[field:typename/]</a>[field:typeid2 function="get_url_by_typeid2(@me)"/]  
    77.     </div>  
    78. </div>  
    79. </div>  
    80.    <a class="button bg-main button-small right5 text-white ib   pa text-14"href="javascript:;"   onclick="showtip('[field:title/]')"style="top:40px">进入小程序</a>  
    81. </div>  
    82. {/dede:arclist}  
    83.   
    84. <p class="text-center margin-bottom bottom0  right width-100" ><a onclick="javascript:loadMoreApply(1,0);"href="javascript:"class="button radius-rounded border-main"id="0data">加载更多</a></p>  
    85.                 </ul>  
    86.                   
    87.                   
    88.     {dede:channel type='top' row='25' }  
    89.                 <!-- [field:typename/] -->  
    90.         <ul id="[field:id/]">  
    91.         <p class="text-center  bottom0 margin-bottom margin-big-top width-100"><a onclick="javascript:loadMoreApply(1,[field:id/]);"href="javascript:" class="button radius-rounded border-main"id="[field:id/]data">加载更多</a></p>  
    92.     </ul>  
    93.     {/dede:channel}  
    94.       
    95.             </div>  
    96.               
    97.           
    98.         </div>  
    99.         <!-- slideTxtBox end -->  
    100. <script type="text/javascript">  
    101. var tabs=document.getElementById("tab").getElementsByTagName("li");  
    102. var divs=document.getElementById("slideTxtBox-bd").getElementsByTagName("ul");  
    103. for(var i=0;i<tabs.length;i++){  
    104. tabs[i].onclick=function(){change(this);}  
    105. }  
    106. function change(obj){  
    107. for(var i=0;i<tabs.length;i++)  
    108. {  
    109. if(tabs[i]==obj){  
    110. tabs[i].className="on";  
    111. divs[i].className="show";  
    112. }  
    113. else{  
    114. tabs[i].className="";  
    115. divs[i].className="";  
    116. }  
    117. }  
    118. }  
    119.   
    120.   
    121. //所属分类切换  
    122. function change_tab(typeid){  
    123.   
    124. $("#tab"+typeid).siblings("li").removeClass("on");  
    125.   
    126. $("#tab"+typeid).addClass("on");  
    127.   
    128. $("#"+typeid).siblings("ul").removeClass("show");  
    129.   
    130. $("#"+typeid).addClass("show");  
    131.   
    132. }  
    133.   
    134.   
    135. </script>  
    136.         <!-- 切换结束 -->  
    137.   
    138.           
    139. </div>  
    140.   
    141.   
    142. </div>  
    143. <script type="text/javascript">     
    144.   
    145. $('.icon-angle-down').each(function() {  
    146.         var e = $(this);  
    147.         var target = e.attr("data-target");  
    148.         e.click(function() {  
    149.             $(target).toggleClass("hidden");  
    150.         });  
    151.     });  
    152.       
    153. var loadConfig = {  
    154.                 url_api:'/plus/list.php',  
    155.                 //typeid:{dede:field name="typeid"/},  
    156.                 pagesize:2,  
    157.                 loading : 0  
    158.                 }  
    159.                 var page0=2;  
    160.           
    161.                   
    162.                 {dede:channel type='top' row='25' }  
    163.             var page[field:id/]=1;  
    164.     {/dede:channel}  
    165.       
    166.       
    167. function  loadMoreApply(orderby,typeid){  
    168. $("#navbar2").addClass("hidden");  
    169.          eval(" page =page"+typeid+";");  
    170.           
    171.          var pagesize = loadConfig.pagesize;  
    172.          var url = loadConfig.url_api,  
    173.          data={ajax:'pullload',typeid:typeid,page:page,pagesize:pagesize,orderby:orderby};  
    174.             function ajax(url, data) {  
    175.                 $.ajax({url: url,data: data,async: false,type: 'GET',dataType: 'json',success: function(data) {  
    176.                   
    177.                     addContent(data,typeid);      
    178.                       
    179.                 }});  
    180.                   
    181.             }  
    182.             ajax(url,data);  
    183. }  
    184.  function addContent (rs,typeid){  
    185.     if(rs.statu== 1){  
    186.         var data = rs.list;  
    187.         var total = rs.total;  
    188.         var arr=[];  
    189.         var length = data.length;  
    190.         for(var i=0;i<length;i++){  
    191.           
    192.           
    193.             arr.push('<div class="bg-fff    width-100 ib pr">');  
    194.             arr.push('<div class="xl12  padding10"><div class="media media-x"><a class="float-left" href="'+data[i].arcurl+'"><img src="'+data[i].picname+'" width="80" class="radius" alt="'+data[i].title+'"></a><div class="media-body" style="width:900px"><strong>'+data[i].title+'</strong><div style="height:5px;"></div><span> <span class=" cursor icon-click">      </span>'+data[i].click+'</span>');  
    195.             arr.push('<span  id="diggNum'+data[i].id+'"><a href="javascript:"class=" text-bbb text-16" onclick="javascript:postDigg(\&;good\&;,'+data[i].id+');"><span id="digg'+data[i].id+'" class="icon-heart2 ">     </span> </a>'+data[i].goodpost+'</span>  <div style="height:12px;"></div>');  
    196.       
    197.   
    198. arr.push('<a  class="button bg-gray button-little radius-none margin-right2 text-12"href="javascript:"onclick="javascript:change_tab('+data[i].typeid+');loadMoreApply(1,'+data[i].typeid+');">'+data[i].typename+'</a>'+data[i].typeid2+'</div></div></div><a class="button bg-main button-small right5 text-white ib   pa text-14"href="javascript:;"   onclick="showtip(\&;'+data[i].title+'\&;)"style="top:40px">进入小程序</a></div>');     
    199.   
    200. }  
    201.               
    202.         $('#'+typeid).append(arr.join(''));  
    203.       
    204.         loadConfig.load_num = rs.load_num;  
    205.         if(total<page*loadConfig.pagesize || page> loadConfig.load_num){  
    206.             //$('#'+typeid).append('<p class="text-center margin-top"><a href="javascript:" class="button radius-rounded border-main width-20"id="'+typeid+'data">没有了!</a></p>');  
    207.         $("#"+typeid+"data").html('没有了!');  
    208.         }else{  
    209.           
    210.             //$('#'+typeid).append('<p class="text-center margin-top"><a href="javascript:" class="button radius-rounded border-main width-20"id="'+typeid+'data">加载更多</a></p>');  
    211.         }  
    212.           
    213.          eval("page"+typeid+" ++;");   
    214.     }else{  
    215.     $("#"+typeid+"data").html('没有了!');  
    216.     }  
    217.       
    218. }  
    219.   
    220.   
    221. $(document).ready(function(){  
    222.   
    223. loadMoreApply(1,0);  
    224. $('.copy-lay .close2').click(function(){  
    225.         $('.alert2').hide();  
    226.     });  
    227.     $('.alert2').click(function(e){  
    228.         if( $(e.target).parents().hasClass('copy-lay') ){  
    229.             return;  
    230.         }else{  
    231.             $(this).hide();  
    232.         }  
    233.     });  
    234. });  
    235. function showtip(title){  
    236.     $('#alerttip,#copyBtn').html(title);  
    237.     $('.alert2').show();  
    238. }  
    239.   
    240.   
    241.   
    242.   
    243. </script>  
    244.  {dede:sql sql='Select * from  `myppttype`  where id=2'}    
    245. <div class="alert2 alert-copy">  
    246.             <div class="copy-lay" style="[field:other/]">  
    247.                 <span class="close2"></span>  
    248.                 <div class="copy" id="copyBtn"></div>  
    249.                 <div class="copy-layer-img" style="background: url('[field:pic/]') no-repeat; -o-background-size: contain; background-size: contain; "></div>  
    250.             </div>  
    251.         </div>  
    252.         {/dede:sql}       


     

    二,,修改,plus/list.PHP 在require_once(dirname(__FILE__)."/../include/common.inc.php"); 

    的下面增加一段

     

    [php] view plain copy
     
    1. if(isset($_GET['ajax'])){  
    2.      $typeid = isset($_GET['typeid']) ? intval($_GET['typeid']): 0;//传递过来的分类ID  
    3.      $orderby = isset($_GET['orderby']) ? intval($_GET['orderby']): 1;  
    4.      //print_r($orderby);exit;  
    5.      //1id排,2hot排序  
    6.   $page = isset($_GET['page']) ? intval($_GET['page']): 0;//页码  
    7.   $pagesize = isset($_GET['pagesize']) ? intval($_GET['pagesize']): 10;//每页多少条，也就是一次加载多少条数据  
    8.   $start = $page>0 ? ($page-1)*$pagesize : 0;//数据获取的起始位置。即limit条件的第一个参数。  
    9.     
    10.   $ntime2 = gmmktime(0, 0, 0, gmdate('m'), gmdate('d'), gmdate('Y'));  
    11.             $limitday = $ntime2 - (40 * 24 * 3600);//40天内热文  
    12.             $orwheres = " senddate > $limitday ";  
    13.               
    14.   //$typesql = $typeid ? " WHERE typeid=$typeid" : '';  
    15.     
    16.   if($orderby==1){//id降序  
    17.     $typesql = $typeid ? " WHERE a.arcrank=0 and a.typeid=$typeid or CONCAT( ',', a.typeid2, ',' ) LIKE '%,".$typeid.",%' " : '';  
    18.      $typesql3 = $typeid ? " WHERE arcrank=0 and typeid=$typeid or CONCAT( ',', typeid2, ',' ) LIKE '%,".$typeid.",%' " : '';  
    19.   } else{//hot排序  
    20.         
    21.     $typesql = $typeid ? " WHERE a.arcrank=0 and a.typeid=$typeid or CONCAT( ',', a.typeid2, ',' ) LIKE '%,".$typeid.",%' and ".$orwheres : " WHERE ".$orwheres;  
    22.     $typesql3 = $typeid ? " WHERE arcrank=0 and typeid=$typeid or CONCAT( ',', typeid2, ',' ) LIKE '%,".$typeid.",%' and ".$orwheres : " WHERE ".$orwheres;  
    23.     
    24.    }  
    25. //print_r($typesql );exit;  
    26. //这个是用于首页实现瀑布流加载，  
    27. //因为首页加载数据是无需分类的，所以要加以判断，如果无需  
    28.    $total_sql = "SELECT COUNT(id) as num FROM `archives`  $typesql3 ";  
    29.   $temp = $dsql->GetOne($total_sql);  
    30.    
    31.   $total = 0;//数据总数  
    32.   $load_num =0;  
    33.    if(is_array($temp)){  
    34.      $load_num= round(($temp['num']-$pagesize)/$pagesize);//要加载的次数,因为默认已经加载了  
    35.      $total = $temp['num'];  
    36.    }  
    37.   //print_r($total);exit;  
    38.     
    39.               
    40.        
    41.           
    42.           
    43.   if($orderby==1){//新  
    44.   $sql = "SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,  
    45.         t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath  
    46. FROM `archives` as a JOIN `arctype` AS t ON a.typeid=t.id    $typesql ORDER BY a.id DESC LIMIT $start,$pagesize";  
    47. }else{//热门  
    48.   
    49.   
    50.   
    51.     $sql = "SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,  
    52.         t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath  
    53. FROM `archives` as a JOIN `arctype` AS t ON a.typeid=t.id    $typesql ORDER BY a.click DESC LIMIT $start,$pagesize";  
    54.     }  
    55. //echo "$sql";exit;  
    56.    $dsql->SetQuery($sql);//  
    57.     $dsql->Execute('list');//die(mysql_error());  
    58.    $statu = 0;//是否有数据，默认没有数据  
    59.    $data = array();  
    60.      $index = 0;  
    61. while($row = $dsql->GetArray("list")){  
    62.     $row['info'] = $row['info'] = $row['infos'] = cn_substr($row['description'],250);  
    63.      $row['id'] =  $row['id'];  
    64.      $row['typeid2']=get_url_by_typeid2($row['typeid2']);  
    65.      $row['filename'] = $row['arcurl'] = GetFileUrl($row['id'],$row['typeid'],$row['senddate'],$row['title'],$row['ismake'],  
    66. $row['arcrank'],$row['namerule'],$row['typedir'],$row['money'],$row['filename'],$row['moresite'],$row['siteurl'],$row['sitepath']);  
    67.   
    68. $row['typeurl'] = GetTypeUrl($row['typeid'],$row['typedir'],$row['isdefault'],$row['defaultname'],$row['ispart'],$row['namerule2'],$row['moresite'],$row['siteurl'],$row['sitepath']);  
    69.      
    70.   if($row['litpic'] == '-' || $row['litpic'] == ''){  
    71.       $row['litpic'] = $GLOBALS['cfg_cmspath'].'/images/defaultpic.gif';  
    72.    }  
    73.      
    74.     if(!preg_match("#^http:\/\/#i", $row['litpic']) &&$GLOBALS['cfg_multi_site'] == 'Y'){  
    75.     $row['litpic'] = $GLOBALS['cfg_mainsite'].$row['litpic'];  
    76.    }  
    77.   $row['picname'] = $row['litpic'];//缩略图  
    78.   $row['writer'] = $row['writer'];  
    79.   $row['click'] = $row['click'];  
    80.    $row['stime'] = GetDateMK($row['pubdate']);  
    81.   $row['timeago']= timeago($row['pubdate']);  
    82.   $row['typelink'] = "<a href='".$row['typeurl']."'>".$row['typename']."</a>";//分类链  
    83.   $row['fulltitle'] = $row['title'];//完整的标题  
    84.   $row['shorttitle'] = $row['shorttitle'];//副标题  
    85.   $row['title'] = cn_substr($row['title'], 60);//截取后的标题  
    86.    $data[$index] = $row;  
    87.    $index++;  
    88. }  
    89. if(!empty($data)){  
    90. $statu = 1;//有数据  
    91. }  
    92. $result =array('statu'=>$statu,'list'=>$data,'total'=>$total,'load_num'=>$load_num);  
    93. echo json_encode($result);//返回数据  
    94. exit();  
    95. }  

    上一篇：织梦dedecms二次开发全站文章收藏总次数统计功能
    下一篇：dedecms织梦 pubdate与senddate区别及定时审核发布插件思路
    
    关于我们 | 付款方式 | 建站知识 | 增值服务 | 网站模板
    Copyright © 2003-2016
    时间：9:00-21:00 (节假日不休)
    版权所有:巨人网络(扬州)科技有限公司
    总部地址：江苏省信息产业基地11号楼四层
    《增值电信业务经营许可证》 苏B2-20120278
    X

    截屏，微信识别二维码

    微信号：veteran88

    （点击微信号复制，添加好友）

     打开微信

    微信号已复制，请打开微信添加咨询详情！