王鹏飞seo博客,专注郑州seo,郑州网站优化,百度seo优化,提供免费seo诊断方案。seo外包顾问QQ:931519643,电话15617834052。
Loading
0

织梦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*from`myppttype`whereid=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)asnumFROM`archives`$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. FROM`archives`asaJOIN`arctype`AStONa.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. FROM`archives`asaJOIN`arctype`AStONa.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. }
本站文章均来自互联网,如有侵权请及时联系郑州seo。并发送侵权证明至邮箱931519643@qq.com,证实后立即删除。
鞭挞我吧!鞭挞我吧! 鞭挞我吧!鞭挞我吧!

如果你觉得不错,不如打赏一下!

最后编辑于:2019/4/27作者: 王鹏飞SEO

王鹏飞seo,专注郑州SEO网站优化,分享百度SEO优化知识,提供免费seo优化方案。

暂无评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???

扫一扫,获取免费seo诊断!

扫一扫,获取免费seo诊断!