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

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

效果图

一,模板

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

[html]view plaincopy

  1. <divclass="containermargin-topover-hidden">
  2. <divclass="xl12xb12over-hidden">
  3. <!–切换标签–>
  4. <styletype="text/css">
  5. .slideTxtBox{width:100%;text-align:left;}
  6. .slideTxtBox.hd{height:38px;line-height:27px;position:relative;overflow:hidden}
  7. .slideTxtBox.hdul{left:10px;float:left;position:absolute;top:3px;height:39px;over-flow:hidden;}
  8. .slideTxtBox.hdulli{height:40px;float:left;color:#fff;padding:0px7px0px6px;cursor:pointer;}
  9. .slideTxtBox.hdullia{color:#fff;}
  10. .slideTxtBox.hdulli.on
  11. {background:url({dede:global.cfg_templets_skin/}/images/bg5.png)repeat-x;}
  12. .slideTxtBox.hdulli.ona{color:#555}
  13. .slideTxtBox.bdul{zoom:1;padding-bottom:50px;display:none;position:relative;min-height:100px}
  14. .slideTxtBox.bdli{height:24px;line-height:24px;}
  15. </style>
  16. <divid="slideTxtBox"class="slideTxtBoxpadding00"style="overflow:visible!important;">
  17. <!–主导航–>
  18. <divclass="hdbg-mainpr">
  19. <ulid="tab"class="border-topborder-mainborder-big">
  20. <liclass="on"id=""><ahref="javascript:"onclick="javascript:loadMoreApply(1,0);">全部</a></li>
  21. {dede:channeltype='top'row='50'}
  22. <liid="tab[field:id/]"><ahref="javascript:"onclick="javascript:change_tab([field:id/]);loadMoreApply(1,[field:id/]);">[field:typename/]</a></li>
  23. {/dede:channel}
  24. </ul>
  25. <spanclass="icon-angle-downtext-whitewidth30padding-left10ibtext-22top7right2bg-main"data-target="#navbar2">
  26. </span>
  27. </div>
  28. <!–下拉导航–>
  29. <divclass="navbar-bodymargin-top6hiddenib"id="navbar2">
  30. <ulclass="navnav-inlinenav-menu">
  31. {dede:channelartlisttypeid="top"row='33'}
  32. <liclass="{dede:field.active/}">
  33. <ahref="javascript:"onclick="javascript:change_tab({dede:field.typeid/});loadMoreApply(1,{dede:field.typeid/});">
  34. {dede:fieldname="typename"/}
  35. </a>
  36. </li>
  37. {/dede:channelartlist}
  38. </ul>
  39. </div>
  40. <divclass="bd"id="slideTxtBox-bd">
  41. <ulid="0"class="show">
  42. <!–全部–>
  43. {dede:arclistrow='2'titlelen='100'orderby='id'}
  44. <divclass="bg-fffwidth-100ibpr">
  45. <divclass="xl12padding10">
  46. <divclass="mediamedia-x">
  47. <aclass="float-left"href="[field:arcurl/]">
  48. <imgsrc="[field:litpic/]"width="80"class="radius"alt="[field:title/]">
  49. </a>
  50. <divclass="media-body"style="width:900px;height:;">
  51. <strong>[field:title/]</strong>
  52. <divstyle="height:5px;"></div>
  53. <!–点击–>
  54. <span>
  55. <spanclass="cursoricon-click"></span>
  56. <scriptsrc="/plus/count_list.php?view=yes&aid=[field:id/]"type='text/javascript'language="javascript"></script></span>
  57. <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/]
  58. </span>
  59. <divstyle="height:12px;"></div>
  60. <!–所属分类archives–>
  61. <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)"/]
  62. </div>
  63. </div>
  64. </div>
  65. <aclass="buttonbg-mainbutton-smallright5text-whiteibpatext-14"href="javascript:;"onclick="showtip('[field:title/]')"style="top:40px">进入小程序</a>
  66. </div>
  67. {/dede:arclist}
  68. <pclass="text-centermargin-bottombottom0rightwidth-100"><aonclick="javascript:loadMoreApply(1,0);"href="javascript:"class="buttonradius-roundedborder-main"id="0data">加载更多</a></p>
  69. </ul>
  70. {dede:channeltype='top'row='25'}
  71. <!–[field:typename/]–>
  72. <ulid="[field:id/]">
  73. <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>
  74. </ul>
  75. {/dede:channel}
  76. </div>
  77. </div>
  78. <!–slideTxtBoxend–>
  79. <scripttype="text/javascript">
  80. vartabs=document.getElementById("tab").getElementsByTagName("li");
  81. vardivs=document.getElementById("slideTxtBox-bd").getElementsByTagName("ul");
  82. for(vari=0;i<tabs.length;i++){
  83. tabs[i].onclick=function(){change(this);}
  84. }
  85. functionchange(obj){
  86. for(vari=0;i<tabs.length;i++)
  87. {
  88. if(tabs[i]==obj){
  89. tabs[i].className="on";
  90. divs[i].className="show";
  91. }
  92. else{
  93. tabs[i].className="";
  94. divs[i].className="";
  95. }
  96. }
  97. }
  98. //所属分类切换
  99. functionchange_tab(typeid){
  100. $("#tab"+typeid).siblings("li").removeClass("on");
  101. $("#tab"+typeid).addClass("on");
  102. $("#"+typeid).siblings("ul").removeClass("show");
  103. $("#"+typeid).addClass("show");
  104. }
  105. </script>
  106. <!–切换结束–>
  107. </div>
  108. </div>
  109. <scripttype="text/javascript">
  110. $('.icon-angle-down').each(function(){
  111. vare=$(this);
  112. vartarget=e.attr("data-target");
  113. e.click(function(){
  114. $(target).toggleClass("hidden");
  115. });
  116. });
  117. varloadConfig={
  118. url_api:'/plus/list.php',
  119. //typeid:{dede:fieldname="typeid"/},
  120. pagesize:2,
  121. loading:0
  122. }
  123. varpage0=2;
  124. {dede:channeltype='top'row='25'}
  125. varpage[field:id/]=1;
  126. {/dede:channel}
  127. functionloadMoreApply(orderby,typeid){
  128. $("#navbar2").addClass("hidden");
  129. eval("page=page"+typeid+";");
  130. varpagesize=loadConfig.pagesize;
  131. varurl=loadConfig.url_api,
  132. data={ajax:'pullload',typeid:typeid,page:page,pagesize:pagesize,orderby:orderby};
  133. functionajax(url,data){
  134. $.ajax({url:url,data:data,async:false,type:'GET',dataType:'json',success:function(data){
  135. addContent(data,typeid);
  136. }});
  137. }
  138. ajax(url,data);
  139. }
  140. functionaddContent(rs,typeid){
  141. if(rs.statu==1){
  142. vardata=rs.list;
  143. vartotal=rs.total;
  144. vararr=[];
  145. varlength=data.length;
  146. for(vari=0;i<length;i++){
  147. arr.push('<divclass="bg-fffwidth-100ibpr">');
  148. 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>');
  149. 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>');
  150. 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>');
  151. }
  152. $('#'+typeid).append(arr.join(''));
  153. loadConfig.load_num=rs.load_num;
  154. if(total<page*loadConfig.pagesize||page>loadConfig.load_num){
  155. //$('#'+typeid).append('<pclass="text-centermargin-top"><ahref="javascript:"class="buttonradius-roundedborder-mainwidth-20"id="'+typeid+'data">没有了!</a></p>');
  156. $("#"+typeid+"data").html('没有了!');
  157. }else{
  158. //$('#'+typeid).append('<pclass="text-centermargin-top"><ahref="javascript:"class="buttonradius-roundedborder-mainwidth-20"id="'+typeid+'data">加载更多</a></p>');
  159. }
  160. eval("page"+typeid+"++;");
  161. }else{
  162. $("#"+typeid+"data").html('没有了!');
  163. }
  164. }
  165. $(document).ready(function(){
  166. loadMoreApply(1,0);
  167. $('.copy-lay.close2').click(function(){
  168. $('.alert2').hide();
  169. });
  170. $('.alert2').click(function(e){
  171. if($(e.target).parents().hasClass('copy-lay')){
  172. return;
  173. }else{
  174. $(this).hide();
  175. }
  176. });
  177. });
  178. functionshowtip(title){
  179. $('#alerttip,#copyBtn').html(title);
  180. $('.alert2').show();
  181. }
  182. </script>
  183. {dede:sqlsql='Select*frommyppttypewhereid=2'}
  184. <divclass="alert2alert-copy">
  185. <divclass="copy-lay"style="[field:other/]">
  186. <spanclass="close2"></span>
  187. <divclass="copy"id="copyBtn"></div>
  188. <divclass="copy-layer-img"style="background:url('[field:pic/]')no-repeat;-o-background-size:contain;background-size:contain;"></div>
  189. </div>
  190. </div>
  191. {/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条件的第一个参数。
  9. $ntime2=gmmktime(0,0,0,gmdate('m'),gmdate('d'),gmdate('Y'));
  10. $limitday=$ntime2-(40*24*3600);//40天内热文
  11. $orwheres="senddate>$limitday";
  12. //$typesql=$typeid?"WHEREtypeid=$typeid":'';
  13. if($orderby==1){//id降序
  14. $typesql=$typeid?"WHEREa.arcrank=0anda.typeid=$typeidorCONCAT(',',a.typeid2,',')LIKE'%,".$typeid.",%'":'';
  15. $typesql3=$typeid?"WHEREarcrank=0andtypeid=$typeidorCONCAT(',',typeid2,',')LIKE'%,".$typeid.",%'":'';
  16. }else{//hot排序
  17. $typesql=$typeid?"WHEREa.arcrank=0anda.typeid=$typeidorCONCAT(',',a.typeid2,',')LIKE'%,".$typeid.",%'and".$orwheres:"WHERE".$orwheres;
  18. $typesql3=$typeid?"WHEREarcrank=0andtypeid=$typeidorCONCAT(',',typeid2,',')LIKE'%,".$typeid.",%'and".$orwheres:"WHERE".$orwheres;
  19. }
  20. //print_r($typesql);exit;
  21. //这个是用于首页实现瀑布流加载,
  22. //因为首页加载数据是无需分类的,所以要加以判断,如果无需
  23. $total_sql="SELECTCOUNT(id)asnumFROMarchives$typesql3";
  24. $temp=$dsql->GetOne($total_sql);
  25. $total=0;//数据总数
  26. $load_num=0;
  27. if(is_array($temp)){
  28. $load_num=round(($temp['num']-$pagesize)/$pagesize);//要加载的次数,因为默认已经加载了
  29. $total=$temp['num'];
  30. }
  31. //print_r($total);exit;
  32. if($orderby==1){//新
  33. $sql="SELECTa.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
  34. t.namerule2,t.ispart,t.moresite,t.siteurl,t.sitepath
  35. FROMarchivesasaJOINarctypeAStONa.typeid=t.id$typesqlORDERBYa.idDESCLIMIT$start,$pagesize";
  36. }else{//热门
  37. $sql="SELECTa.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
  38. t.namerule2,t.ispart,t.moresite,t.siteurl,t.sitepath
  39. FROMarchivesasaJOINarctypeAStONa.typeid=t.id$typesqlORDERBYa.clickDESCLIMIT$start,$pagesize";
  40. }
  41. //echo"$sql";exit;
  42. $dsql->SetQuery($sql);//
  43. $dsql->Execute('list');//die(mysql_error());
  44. $statu=0;//是否有数据,默认没有数据
  45. $data=array();
  46. $index=0;
  47. while($row=$dsql->GetArray("list")){
  48. $row['info']=$row['info']=$row['infos']=cn_substr($row['description'],250);
  49. $row['id']=$row['id'];
  50. $row['typeid2']=get_url_by_typeid2($row['typeid2']);
  51. $row['filename']=$row['arcurl']=GetFileUrl($row['id'],$row['typeid'],$row['senddate'],$row['title'],$row['ismake'],
  52. $row['arcrank'],$row['namerule'],$row['typedir'],$row['money'],$row['filename'],$row['moresite'],$row['siteurl'],$row['sitepath']);
  53. $row['typeurl']=GetTypeUrl($row['typeid'],$row['typedir'],$row['isdefault'],$row['defaultname'],$row['ispart'],$row['namerule2'],$row['moresite'],$row['siteurl'],$row['sitepath']);
  54. if($row['litpic']=='-'||$row['litpic']==''){
  55. $row['litpic']=$GLOBALS['cfg_cmspath'].'/images/defaultpic.gif';
  56. }
  57. if(!preg_match("#^http:\/\/#i",$row['litpic'])&&$GLOBALS['cfg_multi_site']=='Y'){
  58. $row['litpic']=$GLOBALS['cfg_mainsite'].$row['litpic'];
  59. }
  60. $row['picname']=$row['litpic'];//缩略图
  61. $row['writer']=$row['writer'];
  62. $row['click']=$row['click'];
  63. $row['stime']=GetDateMK($row['pubdate']);
  64. $row['timeago']=timeago($row['pubdate']);
  65. $row['typelink']="<ahref='".$row['typeurl']."'>".$row['typename']."</a>";//分类链
  66. $row['fulltitle']=$row['title'];//完整的标题
  67. $row['shorttitle']=$row['shorttitle'];//副标题
  68. $row['title']=cn_substr($row['title'],60);//截取后的标题
  69. $data[$index]=$row;
  70. $index++;
  71. }
  72. if(!empty($data)){
  73. $statu=1;//有数据
  74. }
  75. $result=array('statu'=>$statu,'list'=>$data,'total'=>$total,'load_num'=>$load_num);
  76. echojson_encode($result);//返回数据
  77. exit();
  78. }

版权免责声明

① 本站VIP源码资源永久免费下载 www.wayu.cn
② 本网站资源来源于网络收集,如有侵权,请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流,请不要用于商业用途,否则后果自负。
④ 如果你有源码需要出售,可以联系小编,或者点击 投稿
⑤ 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。
⑧ 网站资源不做任何二次加密和授权后门(原版加密除外)

评论0

请先

源码安装后,如有要求加QQ获取帮助的,请放弃使用,小心被骗。

没有账号? 忘记密码?