腾讯云网站解决方案帮您轻松应对建站成本高/网络不稳等常见问题

Discuz高级教程-discuz.htm采用Tab样式展示板块

0
回复
1354
查看
[复制链接]

765

主题

779

帖子

3万

积分

董事

Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72

积分
33029
发表于 19-2-15 11:20:16 | 显示全部楼层 |阅读模式      紫钻仅向指定用户开放  
首先先要说discuz.htm。在默认模板的情况下,discuz的论坛首页样式与点击版块分区名称后的样式是一样的,用的都是discuz.htm这个模板。只不过部分区域使用了<!--{if empty($gid)}-->来做区分。       
在创作模板中,如果我们把版块分区名称版块名称分别调用。当版块分区名称聚合在一起我们去点击的时候,其实就已经形成了一个伪Tab。为什么这里要说是伪Tab呢。因为在点击版块分区名称的时候,会产生URL的跳转,其实说白了就是跳转到对应的版块分区名称的页面了。只不过模板的样式一样。       
既然我们要做成Tab,那么肯定就不能有URL跳转。于是经过几天的研究和讨论做出了这么一个框架
[mw_shl_code=html,true]<div class="Currency_Tab">  e6 y3 _9 ^! `3 Q, v
        <nav class="tab-hd">
& A9 ?/ e+ _2 Q* o                <!--{loop}-->- M* g( o8 v2 t# }4 m4 H
                        <li class="active><a href="javascript:void(0)">分区</a></li>
9 J- W4 D7 R! P% Q, N                <!--{/loop}-->
0 ~3 `8 }. n, Y1 F9 Q4 F        </nav>7 Z1 s  L. Q1 t' T
        <div class="tab-bd">1 ?, E% K$ p5 T
                <!--{loop $key }-->: F3 k9 M+ x5 X' H
                        <div style="display:{if $key==0}block{else}none{/if};">
' j4 f5 `! D! q0 v7 L                                版块" z0 ?3 P3 h0 w' U' `
                        </div>
7 J2 f# g/ Y- D$ h) R# E                <!--{/loop}-->
6 s3 X! k- W( l" Q9 v1 k        </div>/ p4 g# H0 `  n$ ^* s
</div>[/mw_shl_code]
来说一下思路,这里比较复杂。        
因为要用Tab做版块分区名称版块名称的分离,那么这里就需要分开loop{实际的效果是版块分区名称单独写loop的查询语句,版块名称使用默认模板的loop查询语句}。       
这还远远不够,要做出最终的效果,对jQueryTab插件也要求很高。因为这里涉及到 tab-bd 里面必须要于 tab-hd 自动对接,不需要对 tab-hd tab-bd 里的框架分别做对应的 id=         
为什么<div class="tab-bd"></div>里只写一个 <!--{loop}-->,而不是对应 tab-hd 的个数写出对应的<div style="display: block;">版块</div>呢?这里需要着重的解释一下。        
因为如果下面写无限个(对应其 tab-hd 的个数)<div style="display: block;">版块</div>,再在里面去写loop。是可以省很多的事情,不需要考虑style="block"怎么给,也不用考虑怎么和 tab-hd 的个数自动对接。每一个<div style="display: block;">版块</div>里面,直接looptab-hd 对应的版块名称就可以。但是有一个地方需要注意,那就是这么写,只能调用出已存在的版块,如果后续添加新的版块分区名称版块名称,那还需要在模板里再写对应的查询语句来loop所以只能loop一次。   
这样一个Tab的版块分区就形成了。如果想打开页面时,先显示的是全部版块,那么就需要对上面的框架结构做一个改善
[mw_shl_code=html,true]<div class="Currency_Tab">8 J: c  U! C( z7 i3 D# `. \
        <nav class="tab-hd">
/ x( _* Y( j: S8 j                <li class="active"><a href="javascript:void(0)">全部</a></li>
: h  A( S/ ?# S; z1 o/ F                <!--{loop}-->
& ]4 [) K+ Z0 @                        <li><a href="javascript:void(0)">分区</a></li>
3 J! E5 b4 F+ V                <!--{/loop}-->& D  Q  C5 E' z& g, x+ ~; o, ]
        </nav>" t3 a+ i  w0 L8 f! ]% [, n+ Y9 }
        <div class="tab-bd">. W. B4 K9 }9 e. k. M; H7 S
                <div style="display: block;">
. Z0 t/ |. J) v4 Y, `                        <!--{loop}-->( @/ \. E9 Z, ~+ v1 e" ~
                                全部版块
$ M( D- j8 a. _& K3 b9 H! o0 {                        <!--{/loop}-->
! D0 Q3 Z& l5 C9 `/ }( |3 k$ ]                </div>5 Q. d! |. E9 a" s5 O$ b
                <!--{loop}-->9 M0 h$ l& y+ V6 J5 F: C6 p
                        <div style="display: none;">" S3 |9 j2 S# l2 ^2 p
                                版块
- |) T. x! M( I2 q) t5 z1 X" q                        </div>
9 j* |* f, j$ I) I4 O9 |% J                <!--{/loop}-->. K' ]4 G0 K7 I
        </div>4 m$ k5 X9 S% S
</div>[/mw_shl_code]
如果使用带有“全部”的Tab时,其他地方与上面的相同。唯独需要注意的一个地方就是默认先展示的“全部版块” 不能从Gid层开始loop,否则就不是按照版块的列表排序而是Gid的。loop这里,需要剔除上面的Gidloop。直接从版块名称开始loop。     
最后: 这里需要特别注意的是:这个jQueryTab。是可以在同一个页面多次使用的,如果最终的样式 tab-hd tab-bd 2个框架并不能同时在class="Currency_Tab"里,       
  • 给包含tab-hd tab-bd 的父级div层一个class="Currency_Tab"        
  • 如果不适合给父级class="Currency_Tab",那么这个页面只能使用一次5 m  Y7 T5 l5 z) _
[mw_shl_code=javascript,true]<script type="text/javascript">
! ~  p4 F, w- K" ]) ]        jQuery(function(){. u0 c# W" k) H$ D; r$ h3 f
                function tabs(tabTit,on,tabCon){1 x! s2 k, n' `& S
                        jQuery(tabTit).children().hover(function(){
6 |7 F0 c7 @) T% [0 G; U! Z/ R                                jQuery(this).addClass(on).siblings().removeClass(on);- A! p' L0 e1 I7 y# ?# M. r
                                var index = jQuery(tabTit).children().index(this);
3 p+ ^8 j) M0 R$ }  V                                jQuery(tabCon).children().eq(index).show().siblings().hide();3 w6 j; k/ N9 ~  F$ c- q
                        });
9 ]- c& `9 d6 H, v                };5 n, F9 a% F- A1 l( j  Y9 G
        tabs(".tab-hd","active",".tab-bd");* t- l" q4 u0 z! {" G- t
        });$ c  T9 A% c9 [. T
</script>[/mw_shl_code]
网站简介

球球发,是一家 Discuz! 商业插件、风格模板、网站源码、 Discuz!运营维护技术等于一体的交流分享网站,全站95%的资源都是免费下载,对于资源我们是每天更新,每个亲测资源最新最全---球球发(如果我们有侵犯了您权益的资源请联系我们删除