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

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

一,模板

模板中涉及一个函数.get_url_by_typeid2() 在这里的说明

[html] view plain copy

1. <div class="container margin-top over-hidden">
2. <div class="xl12 xb12 over-hidden">
3. <!-- 切换标签 -->
4. <style type="text/css">
6. .slideTxtBox{ width:100%; text-align:left; }
7. .slideTxtBox .hd{ height:38px; line-height:27px; position:relative; overflow:hidden }
8. .slideTxtBox .hd ul{left:10px; float:left; position:absolute; top:3px; height:39px;over-flow:hidden;}
9. .slideTxtBox .hd ul li{height:40px; float:left;color:#fff;padding:0px 7px 0px 6px; cursor:pointer; }
10. .slideTxtBox .hd ul li a{color:#fff; }
11. .slideTxtBox .hd ul li.on
12. {background:url({dede:global.cfg_templets_skin/}/images/bg5.png) repeat-x; }
13. .slideTxtBox .hd ul li.on a{color:#555}
14. .slideTxtBox .bd ul{zoom:1;padding-bottom:50px;display:none;position:relative;min-height:100px}
15. .slideTxtBox .bd li{ height:24px; line-height:24px; }
19. </style>
22. <div id="slideTxtBox"class="slideTxtBox padding00"style="overflow:visible !important;">
23. <!-- 主导航 -->
24. <div class="hd bg-main pr">
25. <ul id="tab"class="border-top border-main border-big">
26. <li class="on"id=""><a href="javascript:"onclick="javascript:loadMoreApply(1,0);">全部</a></li>
28. {dede:channel type='top' row='50' }
29. <li id="tab[field:id/]"><a href="javascript:"onclick="javascript:change_tab([field:id/]);loadMoreApply(1,[field:id/]);" >[field:typename/]</a></li>
30. {/dede:channel}
34. </ul>
36. <span class="icon-angle-down text-white width30 padding-left10 ib text-22 top7 right2 bg-main" data-target="#navbar2">
37. </span>
38. </div>
39. <!-- 下拉导航 -->
41. <div class="navbar-body margin-top6 hidden ib" id="navbar2">
42. <ul class="nav nav-inline nav-menu ">
43. {dede:channelartlist typeid="top" row='33' }
44. <li class="{dede:field.active/}">
45. <a href="javascript:"onclick="javascript:change_tab({dede:field.typeid/});loadMoreApply(1,{dede:field.typeid/});">
46. {dede:field name="typename"/}
47. </a>
48. </li>
49. {/dede:channelartlist}
50. </ul>
51. </div>
52. <div class="bd"id="slideTxtBox-bd">
54. <ul id="0" class="show">
55. <!-- 全部 -->
57. {dede:arclist row='2' titlelen='100' orderby='id' }
58. <div class="bg-fff width-100 ib pr">
59. <div class="xl12 padding10" >
60. <div class="media media-x">
61. <a class="float-left" href="[field:arcurl/]">
62. <img src="[field:litpic/]" width="80" class="radius" alt="[field:title/]">
63. </a>
64. <div class="media-body" style="width:900px;height:;">
65. <strong>[field:title/]</strong>
66. <div style="height:5px;"></div>
67. <!-- 点击 -->
68. <span>
69. <span class=" cursor icon-click"> </span>
70. <script src="/plus/count_list.php?view=yes&aid=[field:id/]" type='text/javascript' language="javascript"></script></span>
72. <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/]
73. </span>
74. <div style="height:12px;"></div>
75. <!-- 所属分类 archives-->
76. <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)"/]
77. </div>
78. </div>
79. </div>
80. <a class="button bg-main button-small right5 text-white ib pa text-14"href="javascript:;" onclick="showtip('[field:title/]')"style="top:40px">进入小程序</a>
81. </div>
82. {/dede:arclist}
84. <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>
85. </ul>
88. {dede:channel type='top' row='25' }
89. <!-- [field:typename/] -->
90. <ul id="[field:id/]">
91. <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>
92. </ul>
93. {/dede:channel}
95. </div>
98. </div>
99. <!-- slideTxtBox end -->
100. <script type="text/javascript">
101. var tabs=document.getElementById("tab").getElementsByTagName("li");
102. var divs=document.getElementById("slideTxtBox-bd").getElementsByTagName("ul");
103. for(var i=0;i<tabs.length;i++){
104. tabs[i].onclick=function(){change(this);}
105. }
106. function change(obj){
107. for(var i=0;i<tabs.length;i++)
108. {
109. if(tabs[i]==obj){
110. tabs[i].className="on";
111. divs[i].className="show";
112. }
113. else{
114. tabs[i].className="";
115. divs[i].className="";
116. }
117. }
118. }
121. //所属分类切换
122. function change_tab(typeid){
124. $("#tab"+typeid).siblings("li").removeClass("on");
126. $("#tab"+typeid).addClass("on");
128. $("#"+typeid).siblings("ul").removeClass("show");
130. $("#"+typeid).addClass("show");
132. }
135. </script>
136. <!-- 切换结束 -->
139. </div>
142. </div>
143. <script type="text/javascript">
145. $('.icon-angle-down').each(function() {
146. var e = $(this);
147. var target = e.attr("data-target");
148. e.click(function() {
149. $(target).toggleClass("hidden");
150. });
151. });
153. var loadConfig = {
154. url_api:'/plus/list.php',
155. //typeid:{dede:field name="typeid"/},
156. pagesize:2,
157. loading : 0
158. }
159. var page0=2;
162. {dede:channel type='top' row='25' }
163. var page[field:id/]=1;
164. {/dede:channel}
167. function loadMoreApply(orderby,typeid){
168. $("#navbar2").addClass("hidden");
169. eval(" page =page"+typeid+";");
171. var pagesize = loadConfig.pagesize;
172. var url = loadConfig.url_api,
173. data={ajax:'pullload',typeid:typeid,page:page,pagesize:pagesize,orderby:orderby};
174. function ajax(url, data) {
175. $.ajax({url: url,data: data,async: false,type: 'GET',dataType: 'json',success: function(data) {
177. addContent(data,typeid);
179. }});
181. }
182. ajax(url,data);
183. }
184. function addContent (rs,typeid){
185. if(rs.statu== 1){
186. var data = rs.list;
187. var total = rs.total;
188. var arr=[];
189. var length = data.length;
190. for(var i=0;i<length;i++){
193. arr.push('<div class="bg-fff width-100 ib pr">');
194. arr.push('<div class="xl12 padding10"><div class="media media-x"><a class="float-left" href="'+data[i].arcurl+'">
195. <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>');
196. 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>');
199. 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>');
201. }
203. $('#'+typeid).append(arr.join(''));
205. loadConfig.load_num = rs.load_num;
206. if(total<page*loadConfig.pagesize || page> loadConfig.load_num){
207. //$('#'+typeid).append('<p class="text-center margin-top"><a href="javascript:" class="button radius-rounded border-main width-20"id="'+typeid+'data">没有了!</a></p>');
208. $("#"+typeid+"data").html('没有了!');
209. }else{
211. //$('#'+typeid).append('<p class="text-center margin-top"><a href="javascript:" class="button radius-rounded border-main width-20"id="'+typeid+'data">加载更多</a></p>');
212. }
214. eval("page"+typeid+" ++;");
215. }else{
216. $("#"+typeid+"data").html('没有了!');
217. }
219. }
222. $(document).ready(function(){
224. loadMoreApply(1,0);
225. $('.copy-lay .close2').click(function(){
226. $('.alert2').hide();
227. });
228. $('.alert2').click(function(e){
229. if( $(e.target).parents().hasClass('copy-lay') ){
230. return;
231. }else{
232. $(this).hide();
233. }
234. });
235. });
236. function showtip(title){
237. $('#alerttip,#copyBtn').html(title);
238. $('.alert2').show();
239. }
244. </script>
245. {dede:sql sql='Select * from `myppttype` where id=2'}
246. <div class="alert2 alert-copy">
247. <div class="copy-lay" style="[field:other/]">
248. <span class="close2"></span>
249. <div class="copy" id="copyBtn"></div>
250. <div class="copy-layer-img" style="background: url('[field:pic/]') no-repeat; -o-background-size: contain; background-size: contain; "></div>
251. </div>
252. </div>
253. {/dede:sql}

二,,修改,plus/list.PHP 在require_once(dirname(__FILE__)."/../include/common.inc.php");

的下面增加一段

[php] view plain copy

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 ? " WHERE typeid=$typeid" : '';
16. if($orderby==1){//id降序
17. $typesql = $typeid ? " WHERE a.arcrank=0 and a.typeid=$typeid or CONCAT
18. ( ',', a.typeid2, ',' ) LIKE '%,".$typeid.",%' " : '';
19. $typesql3 = $typeid ? " WHERE arcrank=0 and typeid=$typeid or CONCAT
20. ( ',', typeid2, ',' ) LIKE '%,".$typeid.",%' " : '';
21. } else{//hot排序
23. $typesql = $typeid ? " WHERE a.arcrank=0 and a.typeid=$typeid or CONCAT( ',', a.typeid2, ',' )
24. LIKE '%,".$typeid.",%' and ".$orwheres : " WHERE ".$orwheres;
25. $typesql3 = $typeid ? " WHERE arcrank=0 and typeid=$typeid or CONCAT( ',', typeid2, ',' )
26. LIKE '%,".$typeid.",%' and ".$orwheres : " WHERE ".$orwheres;
28. }
29. //print_r($typesql );exit;
30. //这个是用于首页实现瀑布流加载，
31. //因为首页加载数据是无需分类的，所以要加以判断，如果无需
32. $total_sql = "SELECT COUNT(id) as num FROM `archives` $typesql3 ";
33. $temp = $dsql->GetOne($total_sql);
35. $total = 0;//数据总数
36. $load_num =0;
37. if(is_array($temp)){
38. $load_num= round(($temp['num']-$pagesize)/$pagesize);//要加载的次数,因为默认已经加载了
39. $total = $temp['num'];
40. }
41. //print_r($total);exit;
47. if($orderby==1){//新
48. $sql = "SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
49. t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath
50. FROM `archives` as a JOIN `arctype` AS t ON a.typeid=t.id
51. $typesql ORDER BY a.id DESC LIMIT $start,$pagesize";
52. }else{//热门
56. $sql = "SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
57. t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath
58. FROM `archives` as a JOIN `arctype` AS t ON a.typeid=t.id
59. $typesql ORDER BY a.click DESC LIMIT $start,$pagesize";
60. }
61. //echo "$sql";exit;
62. $dsql->SetQuery($sql);//
63. $dsql->Execute('list');//die(mysql_error());
64. $statu = 0;//是否有数据，默认没有数据
65. $data = array();
66. $index = 0;
67. while($row = $dsql->GetArray("list")){
68. $row['info'] = $row['info'] = $row['infos'] = cn_substr($row['description'],250);
69. $row['id'] = $row['id'];
70. $row['typeid2']=get_url_by_typeid2($row['typeid2']);
71. $row['filename'] = $row['arcurl'] = GetFileUrl($row['id'],$row['typeid'],
72. $row['senddate'],$row['title'],$row['ismake'],
73. $row['arcrank'],$row['namerule'],$row['typedir'],$row['money'],$row['filename'],
74. $row['moresite'],$row['siteurl'],$row['sitepath']);
76. $row['typeurl'] = GetTypeUrl($row['typeid'],$row['typedir'],$row['isdefault'],$row['defaultname'],
77. $row['ispart'],$row['namerule2'],$row['moresite'],$row['siteurl'],$row['sitepath']);
79. if($row['litpic'] == '-' || $row['litpic'] == ''){
80. $row['litpic'] = $GLOBALS['cfg_cmspath'].'/images/defaultpic.gif';
81. }
83. if(!preg_match("#^http://#i", $row['litpic']) &&$GLOBALS['cfg_multi_site'] == 'Y'){
84. $row['litpic'] = $GLOBALS['cfg_mainsite'].$row['litpic'];
85. }
86. $row['picname'] = $row['litpic'];//缩略图
87. $row['writer'] = $row['writer'];
88. $row['click'] = $row['click'];
89. $row['stime'] = GetDateMK($row['pubdate']);
90. $row['timeago']= timeago($row['pubdate']);
91. $row['typelink'] = "<a href='".$row['typeurl']."'>".$row['typename']."</a>";//分类链
92. $row['fulltitle'] = $row['title'];//完整的标题
93. $row['shorttitle'] = $row['shorttitle'];//副标题
94. $row['title'] = cn_substr($row['title'], 60);//截取后的标题
95. $data[$index] = $row;
96. $index++;
97. }
98. if(!empty($data)){
99. $statu = 1;//有数据
100. }
101. $result =array('statu'=>$statu,'list'=>$data,'total'=>$total,'load_num'=>$load_num);
102. echo json_encode($result);//返回数据
103. exit();
104. }

本文链接：http://so.lmcjl.com/news/3938/