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

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

效果图

.slideTxtBox.hdulli.ona{color:#555}

.slideTxtBox.bdul{zoom:1;padding-bottom:50px;display:none;position:relative;min-height:100px}

.slideTxtBox.bdli{height:24px;line-height:24px;}

</style>

<divid="slideTxtBox"class="slideTxtBoxpadding00"style="overflow:visible!important;">

<!--主导航-->

<divclass="hdbg-mainpr">

<ulid="tab"class="border-topborder-mainborder-big">

<liclass="on"id=""><ahref="javascript:"onclick="javascript:loadMoreApply(1,0);">全部</a></li>

{dede:channeltype='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-downtext-whitewidth30padding-left10ibtext-22top7right2bg-main"data-target="#navbar2">

</span>

</div>

<!--下拉导航-->

<divclass="navbar-bodymargin-top6hiddenib"id="navbar2">

<ulclass="navnav-inlinenav-menu">

{dede:channelartlisttypeid="top"row='33'}

<liclass="{dede:field.active/}">

<ahref="javascript:"onclick="javascript:change_tab({dede:field.typeid/});loadMoreApply(1,{dede:field.typeid/});">

{dede:fieldname="typename"/}

</a>

</li>

{/dede:channelartlist}

</ul>

</div>

<divclass="bd"id="slideTxtBox-bd">

<ulid="0"class="show">

<!--全部-->

{dede:arclistrow='2'titlelen='100'orderby='id'}

<divclass="bg-fffwidth-100ibpr">

<divclass="xl12padding10">

<divclass="mediamedia-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="cursoricon-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-bbbtext-16width33"onclick="javascript:postDigg('good',[field:id/])"><spanid="digg[field:id/]"class="icon-heart2"></span></a>[field:goodpost/]

</span>

<divstyle="height:12px;"></div>

<!--所属分类archives-->

<aclass="buttonbg-graybutton-littleradius-nonemargin-right2text-12"href="javascript:"onclick="javascript:change_tab([field:typeid/]);loadMoreApply(1,[field:typeid/]);">[field:typename/]</a>[field:typeid2function="get_url_by_typeid2(@me)"/]

</div>

</div>

</div>

<aclass="buttonbg-mainbutton-smallright5text-whiteibpatext-14"href="javascript:;"onclick="showtip('[field:title/]')"style="top:40px">进入小程序</a>

</div>

{/dede:arclist}

<pclass="text-centermargin-bottombottom0rightwidth-100"><aonclick="javascript:loadMoreApply(1,0);"href="javascript:"class="buttonradius-roundedborder-main"id="0data">加载更多</a></p>

</ul>

{dede:channeltype='top'row='25'}

<!--[field:typename/]-->

<ulid="[field:id/]">

<pclass="text-centerbottom0margin-bottommargin-big-topwidth-100"><aonclick="javascript:loadMoreApply(1,[field:id/]);"href="javascript:"class="buttonradius-roundedborder-main"id="[field:id/]data">加载更多</a></p>

</ul>

{/dede:channel}

</div>

</div>

<!--slideTxtBoxend-->

<scripttype="text/javascript">

vartabs=document.getElementById("tab").getElementsByTagName("li");

vardivs=document.getElementById("slideTxtBox-bd").getElementsByTagName("ul");

for(vari=0;i<tabs.length;i++){

tabs[i].onclick=function(){change(this);}

}

functionchange(obj){

for(vari=0;i<tabs.length;i++)

{

if(tabs[i]==obj){

tabs[i].className="on";

divs[i].className="show";

}

else{

tabs[i].className="";

divs[i].className="";

}

}

}

//所属分类切换

functionchange_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(){

vare=$(this);

vartarget=e.attr("data-target");

e.click(function(){

$(target).toggleClass("hidden");

});

});

varloadConfig={

url_api:'/plus/list.php',

//typeid:{dede:fieldname="typeid"/},

pagesize:2,

loading:0

}

varpage0=2;

{dede:channeltype='top'row='25'}

varpage[field:id/]=1;

{/dede:channel}

functionloadMoreApply(orderby,typeid){

$("#navbar2").addClass("hidden");

eval("page=page"+typeid+";");

varpagesize=loadConfig.pagesize;

varurl=loadConfig.url_api,

data={ajax:'pullload',typeid:typeid,page:page,pagesize:pagesize,orderby:orderby};

functionajax(url,data){

$.ajax({url:url,data:data,async:false,type:'GET',dataType:'json',success:function(data){

addContent(data,typeid);

}});

}

ajax(url,data);

}

functionaddContent(rs,typeid){

if(rs.statu==1){

vardata=rs.list;

vartotal=rs.total;

vararr=[];

varlength=data.length;

for(vari=0;i<length;i++){

arr.push('<divclass="bg-fffwidth-100ibpr">');

arr.push('<divclass="xl12padding10"><divclass="mediamedia-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="cursoricon-click"></span>'+data[i].click+'</span>');

arr.push('<spanid="diggNum'+data[i].id+'"><ahref="javascript:"class="text-bbbtext-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="buttonbg-graybutton-littleradius-nonemargin-right2text-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="buttonbg-mainbutton-smallright5text-whiteibpatext-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-centermargin-top"><ahref="javascript:"class="buttonradius-roundedborder-mainwidth-20"id="'+typeid+'data">没有了!</a></p>');

$("#"+typeid+"data").html('没有了!');

}else{

//$('#'+typeid).append('<pclass="text-centermargin-top"><ahref="javascript:"class="buttonradius-roundedborder-mainwidth-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();

}

});

});

functionshowtip(title){

$('#alerttip,#copyBtn').html(title);

$('.alert2').show();

}

</script>

{dede:sqlsql='Select*from`myppttype`whereid=2'}

<divclass="alert2alert-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

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条件的第一个参数。
10. $ntime2=gmmktime(0,0,0,gmdate('m'),gmdate('d'),gmdate('Y'));
11. $limitday=$ntime2-(40*24*3600);//40天内热文
12. $orwheres="senddate>$limitday";
14. //$typesql=$typeid?"WHEREtypeid=$typeid":'';
16. if($orderby==1){//id降序
17. $typesql=$typeid?"WHEREa.arcrank=0anda.typeid=$typeidorCONCAT(',',a.typeid2,',')LIKE'%,".$typeid.",%'":'';
18. $typesql3=$typeid?"WHEREarcrank=0andtypeid=$typeidorCONCAT(',',typeid2,',')LIKE'%,".$typeid.",%'":'';
19. }else{//hot排序
21. $typesql=$typeid?"WHEREa.arcrank=0anda.typeid=$typeidorCONCAT(',',a.typeid2,',')LIKE'%,".$typeid.",%'and".$orwheres:"WHERE".$orwheres;
22. $typesql3=$typeid?"WHEREarcrank=0andtypeid=$typeidorCONCAT(',',typeid2,',')LIKE'%,".$typeid.",%'and".$orwheres:"WHERE".$orwheres;
24. }
25. //print_r($typesql);exit;
26. //这个是用于首页实现瀑布流加载，
27. //因为首页加载数据是无需分类的，所以要加以判断，如果无需
28. $total_sql="SELECTCOUNT(id)asnumFROM`archives`$typesql3";
29. $temp=$dsql->GetOne($total_sql);
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;
43. if($orderby==1){//新
44. $sql="SELECTa.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
45. t.namerule2,t.ispart,t.moresite,t.siteurl,t.sitepath
46. FROM`archives`asaJOIN`arctype`AStONa.typeid=t.id$typesqlORDERBYa.idDESCLIMIT$start,$pagesize";
47. }else{//热门
51. $sql="SELECTa.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
52. t.namerule2,t.ispart,t.moresite,t.siteurl,t.sitepath
53. FROM`archives`asaJOIN`arctype`AStONa.typeid=t.id$typesqlORDERBYa.clickDESCLIMIT$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']);
68. $row['typeurl']=GetTypeUrl($row['typeid'],$row['typedir'],$row['isdefault'],$row['defaultname'],$row['ispart'],$row['namerule2'],$row['moresite'],$row['siteurl'],$row['sitepath']);
70. if($row['litpic']=='-'||$row['litpic']==''){
71. $row['litpic']=$GLOBALS['cfg_cmspath'].'/images/defaultpic.gif';
72. }
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']="<ahref='".$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. echojson_encode($result);//返回数据
94. exit();
95. }

本网刊登的文章均仅代表作者个人观点，并不代表本网立场。文中的论述和观点，敬请读者注意判断。

本文地址：http://www.xlkjgs.com/notes/web/4665.html