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

墨蓝 2021-09-26 02:50 272阅读 0赞

去年6月写过一个相关教程,发现重复的代码占一大半,现在优化下,更简单.

点击查看原文 [http://blog.csdn.net/viqecel/article/details/51675573][http_blog.csdn.net_viqecel_article_details_51675573]

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

效果图

![Center][]

一,模板

模板中需要引入一些js

没有的自己下载

模板中涉及一个函数.get\_url\_by\_typeid2() 在这里的说明,点击查看

http://blog.csdn.net/viqecel/article/details/54563448

<div class="container  margin-top over-hidden">
    <div class="xl12 xb12 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;over-flow:hidden;}
    		.slideTxtBox .hd ul li{height:40px; float:left;color:#fff;padding:0px 7px 0px 6px; cursor:pointer;  }
    		.slideTxtBox .hd ul li a{color:#fff; }
    		.slideTxtBox .hd ul li.on 
    {background:url({dede:global.cfg_templets_skin/}/images/bg5.png) repeat-x; }
    		.slideTxtBox .hd ul li.on a{color:#555}
    		.slideTxtBox .bd ul{zoom:1;padding-bottom:50px;display:none;position:relative;min-height:100px}
    		.slideTxtBox .bd li{ height:24px; line-height:24px;   }
    		
    
    
    		</style>
    
    
    		<div id="slideTxtBox"class="slideTxtBox  padding00"style="overflow:visible !important;">
    			
    			<div class="hd bg-main pr">
    				<ul id="tab"class="border-top border-main border-big">
    				<li class="on"id=""><a href="javascript:"onclick="javascript:loadMoreApply(1,0);">全部</a></li>
    				
    					{dede:channel type='top' row='50' }
          	<li id="tab[field:id/]"><a href="javascript:"onclick="javascript:change_tab([field:id/]);loadMoreApply(1,[field:id/]);" >[field:typename/]</a></li>
          	{/dede:channel}
    		
    		
    		
    				</ul>
    			
    				<span class="icon-angle-down text-white width30 padding-left10  ib text-22  top7 right2 bg-main"  data-target="#navbar2">
          </span>
    			</div>
    			
    			
    			<div class="navbar-body margin-top6  hidden  ib" id="navbar2">
            <ul class="nav nav-inline nav-menu  ">   
    	  {dede:channelartlist typeid="top" row='33' } 
    <li class="{dede:field.active/}">
    <a  href="javascript:"onclick="javascript:change_tab({dede:field.typeid/});loadMoreApply(1,{dede:field.typeid/});">
    {dede:field name="typename"/}
    </a> 
    </li> 
    {/dede:channelartlist} 
            </ul>
        </div>
    			<div class="bd"id="slideTxtBox-bd">
    			
    				<ul id="0" class="show">
    				
    			
    	{dede:arclist row='2' titlelen='100' orderby='id' }
    	<div class="bg-fff    width-100 ib pr">
    		<div class="xl12  padding10" >
    			<div class="media media-x">
    	<a class="float-left" href="[field:arcurl/]">
    		<img src="[field:litpic/]" width="80" class="radius" alt="[field:title/]">
    	</a>
    	<div class="media-body" style="width:900px;height:;">
    		<strong>[field:title/]</strong> 
    		<div style="height:5px;"></div>
    		
    		 <span> 
       <span class=" cursor icon-click">      </span>
       <script src="/plus/count_list.php?view=yes&aid=[field:id/]" type='text/javascript' language="javascript"></script></span>
    
     <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/] 
    </span>  
    	<div style="height:12px;"></div>
    	
    		<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)"/]
    	</div>
    </div>
    </div>
       <a class="button bg-main button-small right5 text-white ib   pa text-14"href="javascript:;"   onclick="showtip('[field:title/]')"style="top:40px">进入小程序</a>
    </div>
    {/dede:arclist}
    
    <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>
    				</ul>
    				
    				
    	{dede:channel type='top' row='25' }
    				
    		<ul id="[field:id/]">
    		<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>
    	</ul>
    	{/dede:channel}
    	
    			</div>
    			
    		
    		</div>
    		
    <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="";
    }
    }
    }
    
    
    //所属分类切换
    function change_tab(typeid){
    
    $("#tab"+typeid).siblings("li").removeClass("on");
    
    $("#tab"+typeid).addClass("on");
    
    $("#"+typeid).siblings("ul").removeClass("show");
    
    $("#"+typeid).addClass("show");
    
    }
    
    
    
    </script>
    		
    
    		
    </div>
    
    
    </div>
    <script type="text/javascript">	
    
    $('.icon-angle-down').each(function() {
    		var e = $(this);
    		var target = e.attr("data-target");
    		e.click(function() {
    			$(target).toggleClass("hidden");
    		});
    	});
    	
    var loadConfig = {
    				url_api:'/plus/list.php',
    				//typeid:{dede:field name="typeid"/},
    				pagesize:2,
    				loading : 0
    				}
    				var page0=2;
    		
    				
    				{dede:channel type='top' row='25' }
    			var page[field:id/]=1;
    	{/dede:channel}
    	
    	
    function  loadMoreApply(orderby,typeid){
    $("#navbar2").addClass("hidden");
    		 eval(" page =page"+typeid+";");
    		
    		 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,typeid);	
    					
    				}});
    				
    			}
    			ajax(url,data);
    }
     function addContent (rs,typeid){
    	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    width-100 ib pr">');
    			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>');
    			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>');
      	
    
    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>');	
    
    }
    			
    		$('#'+typeid).append(arr.join(''));
    	
    		loadConfig.load_num = rs.load_num;
    		if(total<page*loadConfig.pagesize || page> loadConfig.load_num){
    			//$('#'+typeid).append('<p class="text-center margin-top"><a href="javascript:" class="button radius-rounded border-main width-20"id="'+typeid+'data">没有了!</a></p>');
    		$("#"+typeid+"data").html('没有了!');
    		}else{
    		
    			//$('#'+typeid).append('<p class="text-center margin-top"><a href="javascript:" class="button radius-rounded border-main width-20"id="'+typeid+'data">加载更多</a></p>');
    		}
    		
    		 eval("page"+typeid+" ++;"); 
    	}else{
    	$("#"+typeid+"data").html('没有了!');
    	}
    	
    }
    
    
    $(document).ready(function(){
    
    loadMoreApply(1,0);
    $('.copy-lay .close2').click(function(){
    		$('.alert2').hide();
    	});
    	$('.alert2').click(function(e){
    		if( $(e.target).parents().hasClass('copy-lay') ){
    			return;
    		}else{
    			$(this).hide();
    		}
    	});
    });
    function showtip(title){
    	$('#alerttip,#copyBtn').html(title);
    	$('.alert2').show();
    }
    
    
    
    
    </script>
     {dede:sql sql='Select * from  `#@__myppttype`  where id=2'}  
    <div class="alert2 alert-copy">
    			<div class="copy-lay" style="[field:other/]">
    				<span class="close2"></span>
    				<div class="copy" id="copyBtn"></div>
    				<div class="copy-layer-img" style="background: url('[field:pic/]') no-repeat; -o-background-size: contain; background-size: contain; "></div>
    			</div>
    		</div>
    		{/dede:sql}

二,,修改,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 = " senddate > $limitday ";
    			
      //$typesql = $typeid ? " WHERE typeid=$typeid" : '';
      
      if($orderby==1){//id降序
        $typesql = $typeid ? " WHERE a.arcrank=0 and a.typeid=$typeid or CONCAT( ',', a.typeid2, ',' ) LIKE '%,".$typeid.",%' " : '';
    	 $typesql3 = $typeid ? " WHERE arcrank=0 and typeid=$typeid or CONCAT( ',', typeid2, ',' ) LIKE '%,".$typeid.",%' " : '';
      } else{//hot排序
    	  
    	$typesql = $typeid ? " WHERE a.arcrank=0 and a.typeid=$typeid or CONCAT( ',', a.typeid2, ',' ) LIKE '%,".$typeid.",%' and ".$orwheres : " WHERE ".$orwheres;
    	$typesql3 = $typeid ? " WHERE arcrank=0 and typeid=$typeid or CONCAT( ',', typeid2, ',' ) LIKE '%,".$typeid.",%' and ".$orwheres : " WHERE ".$orwheres;
      
       }
    //print_r($typesql );exit;
    //这个是用于首页实现瀑布流加载，
    //因为首页加载数据是无需分类的，所以要加以判断，如果无需
       $total_sql = "SELECT COUNT(id) as num FROM `#@__archives`  $typesql3 ";
      $temp = $dsql->GetOne($total_sql);
     
      $total = 0;//数据总数
      $load_num =0;
       if(is_array($temp)){
         $load_num= round(($temp['num']-$pagesize)/$pagesize);//要加载的次数,因为默认已经加载了
         $total = $temp['num'];
       }
      //print_r($total);exit;
      
                
         
    		
    		
      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 `#@__archives` as a JOIN `#@__arctype` AS t ON a.typeid=t.id    $typesql ORDER BY a.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 `#@__archives` as a JOIN `#@__arctype` AS t ON a.typeid=t.id    $typesql ORDER BY a.click DESC LIMIT $start,$pagesize";
    	}
    //echo "$sql";exit;
       $dsql->SetQuery($sql);//
        $dsql->Execute('list');//die(mysql_error());
       $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['typeid2']=get_url_by_typeid2($row['typeid2']);
         $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();
    }

![70][]

[http_blog.csdn.net_viqecel_article_details_51675573]: http://blog.csdn.net/viqecel/article/details/51675573
[Center]: /images/20210923/c8010e11d9314167be9e03312acb7079.png
[PHP]: http://lib.csdn.net/base/php
[70]: /images/20210923/3251de5b8775475ba75a59b866d664ed.png