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

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

效果图

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

[html]view plaincopy
<divclass="container  margin-top over-hidden">
<divclass="xl12 xb12 over-hidden">
<!-- 切换标签 -->
<styletype="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>
<divid="slideTxtBox"class="slideTxtBox  padding00"style="overflow:visible !important;">
<!-- 主导航 -->
<divclass="hd bg-main pr">
<ulid="tab"class="border-top border-main border-big">
<liclass="on"id=""><ahref="javascript:"onclick="javascript:loadMoreApply(1,0);">全部</a></li>
                    {dede:channel type='top'row='50' }  
<liid="tab[field:id/]"><ahref="javascript:"onclick="javascript:change_tab([field:id/]);loadMoreApply(1,[field:id/]);" >[field:typename/]</a></li>
        {/dede:channel}  
</ul>
<spanclass="icon-angle-down text-white width30 padding-left10  ib text-22  top7 right2 bg-main"data-target="#navbar2">
</span>
</div>
<!-- 下拉导航 -->
<divclass="navbar-body margin-top6  hidden  ib"id="navbar2">
<ulclass="nav nav-inline nav-menu  ">
      {dede:channelartlist typeid="top"row='33' }   
<liclass="{dede:field.active/}">
<ahref="javascript:"onclick="javascript:change_tab({dede:field.typeid/});loadMoreApply(1,{dede:field.typeid/});">
{dede:field name="typename"/}  
</a>
</li>
{/dede:channelartlist}   
</ul>
</div>
<divclass="bd"id="slideTxtBox-bd">
<ulid="0"class="show">
<!-- 全部 -->
    {dede:arclist row='2'titlelen='100'orderby='id' }  
<divclass="bg-fff    width-100 ib pr">
<divclass="xl12  padding10">
<divclass="media media-x">
<aclass="float-left"href="[field:arcurl/]">
<imgsrc="[field:litpic/]"width="80"class="radius"alt="[field:title/]">
</a>
<divclass="media-body"style="width:900px;height:;">
<strong>[field:title/]</strong>
<divstyle="height:5px;"></div>
<!-- 点击 -->
<span>
<spanclass=" cursor icon-click"></span>
<scriptsrc="/plus/count_list.php?view=yes&aid=[field:id/]"type='text/javascript'language="javascript"></script></span>
<spanid="diggNum[field:id/]"><ahref="javascript:"class=" text-bbb text-16 width33 " onclick="javascript:postDigg('good',[field:id/])"><spanid="digg[field:id/]"class="icon-heart2 "></span></a>[field:goodpost/]   
</span>
<divstyle="height:12px;"></div>
<!-- 所属分类 archives-->
<aclass="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>
<aclass="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}  
<pclass="text-center margin-bottom bottom0  right width-100"><aonclick="javascript:loadMoreApply(1,0);"href="javascript:"class="button radius-rounded border-main"id="0data">加载更多</a></p>
</ul>
    {dede:channel type='top'row='25' }  
<!-- [field:typename/] -->
<ulid="[field:id/]">
<pclass="text-center  bottom0 margin-bottom margin-big-top width-100"><aonclick="javascript:loadMoreApply(1,[field:id/]);"href="javascript:" class="button radius-rounded border-main"id="[field:id/]data">加载更多</a></p>
</ul>
    {/dede:channel}  
</div>
</div>
<!-- slideTxtBox end -->
<scripttype="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>
<scripttype="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('<divclass="bg-fff    width-100 ib pr">');  
            arr.push('<divclass="xl12  padding10"><divclass="media media-x"><aclass="float-left"href="'+data[i].arcurl+'"><imgsrc="'+data[i].picname+'"width="80"class="radius"alt="'+data[i].title+'"></a><divclass="media-body"style="width:900px"><strong>'+data[i].title+'</strong><divstyle="height:5px;"></div><span><spanclass=" cursor icon-click"></span>'+data[i].click+'</span>');  
            arr.push('<spanid="diggNum'+data[i].id+'"><ahref="javascript:"class=" text-bbb text-16" onclick="javascript:postDigg(\'good\','+data[i].id+');"><spanid="digg'+data[i].id+'"class="icon-heart2 "></span></a>'+data[i].goodpost+'</span><divstyle="height:12px;"></div>');  
arr.push('<aclass="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><aclass="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('<pclass="text-center margin-top"><ahref="javascript:"class="button radius-rounded border-main width-20"id="'+typeid+'data">没有了!</a></p>');  
        $("#"+typeid+"data").html('没有了!');  
        }else{  
            //$('#'+typeid).append('<pclass="text-center margin-top"><ahref="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'}    
<divclass="alert2 alert-copy">
<divclass="copy-lay"style="[field:other/]">
<spanclass="close2"></span>
<divclass="copy"id="copyBtn"></div>
<divclass="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");

的下面增加一段

[php]view plaincopy
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();  
}  