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

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

2020-02-29 dedecms二次开发 织梦dedecms首页列表页,ajax点击加载,

简化部分主要是栏目切换时,除子第一个默认栏目,其它的全改成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) {