简化部分主要是栏目切换时,除子第一个默认栏目,其它的全改成ajax,不再生成静态页,而且通过PHP循环,简化了代码.另外加载更多按钮等也修改了触发形式.
效果图
(此图片来源于网络，如有侵权，请联系删除! )
一,模板
模板中涉及一个函数.get_url_by_typeid2() 在这里的说明,点击查看
-
<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;
-
$orderby = isset($_GET['orderby']) ? intval($_GET['orderby']): 1;
-
-
-
$page = isset($_GET['page']) ? intval($_GET['page']): 0;
-
$pagesize = isset($_GET['pagesize']) ? intval($_GET['pagesize']): 10;
-
$start = $page>0 ? ($page-1)*$pagesize : 0;
-
-
$ntime2 = gmmktime(0, 0, 0, gmdate('m'), gmdate('d'), gmdate('Y'));
-
$limitday = $ntime2 - (40 * 24 * 3600);
-
$orwheres = " senddate > $limitday ";
-
-
-
-
if($orderby==1){
-
$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{
-
-
$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;
-
-
}
-
-
-
-
$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'];
-
}
-
-
-
-
-
-
-
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";
-
}
-
-
$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['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();
-
}
