织梦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/]">