织梦dedecms首页列表页,ajax点击加载更多,瀑布流,首页多栏目切换
简化部分主要是栏目切换时,除子第一个默认栏目,其它的全改成ajax,不再生成静态页,而且通过PHP循环,简化了代码.另外加载更多按钮等也修改了触发形式.
效果图
一,模板
模板中涉及一个函数.get_url_by_typeid2() 在这里的说明,点击查看
[html] view plain copy
- <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>
- <!-- 所属分类 archives-->
- <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' }
- <!-- [field:typename/] -->
- <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>
- <!-- slideTxtBox end -->
- <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) {