discuz.htm 采用Tab样式展示板块

转载 2018年04月15日 16:41:37
discuz的论坛首页样式与点击版块分区名称后的样式是一样的,用的都是discuz.htm这个模板。只不过部分区域使用了<!--{if empty($gid)}-->来做区分。
       在创作模板中,如果我们把版块分区名称版块名称分别调用。当版块分区名称聚合在一起我们去点击的时候,其实就已经形成了一个伪Tab。为什么这里要说是伪Tab呢。因为在点击版块分区名称的时候,会产生URL的跳转,其实说白了就是跳转到对应的版块分区名称的页面了。只不过模板的样式一样。
       既然我们要做成Tab,那么肯定就不能有URL跳转。于是经过几天的研究和讨论做出了这么一个框架

[代码]php代码:

01<div class="Currency_Tab">
02        <nav class="tab-hd">
03                <!--{loop}-->
04                        <li class="active><a href="javascript:void(0)">分区</a></li>
05                <!--{/loop}-->
06        </nav>
07        <div class="tab-bd">
08                <!--{loop $key }-->
09                        <div style="display:{if $key==0}block{else}none{/if};">
10                                版块
11                        </div>
12                <!--{/loop}-->
13        </div>
14</div>
  来说一下思路,这里比较复杂。
       因为要用Tab做版块分区名称版块名称的分离,那么这里就需要分开loop{实际的效果是版块分区名称单独写loop的查询语句,版块名称使用默认模板的loop查询语句}。
       这还远远不够,要做出最终的效果,对jQuery的Tab插件也要求很高。因为这里涉及到 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>里面,直接loop出 tab-hd 对应的版块名称就可以。但是有一个地方需要注意,那就是这么写,只能调用出已存在的版块,如果后续添加新的版块分区名称版块名称,那还需要在模板里再写对应的查询语句来loop。所以只能loop一次。 

这样一个Tab的版块分区就形成了。如果想打开页面时,先显示的是全部版块,那么就需要对上面的框架结构做一个改善

[代码]php代码:

01<div class="Currency_Tab">
02        <nav class="tab-hd">
03                <li class="active"><a href="javascript:void(0)">全部</a></li>
04                <!--{loop}-->
05                        <li><a href="javascript:void(0)">分区</a></li>
06                <!--{/loop}-->
07        </nav>
08        <div class="tab-bd">
09                <div style="display: block;">
10                        <!--{loop}-->
11                                全部版块
12                        <!--{/loop}-->
13                </div>
14                <!--{loop}-->
15                        <div style="display: none;">
16                                版块
17                        </div>
18                <!--{/loop}-->
19        </div>
20</div>
如果使用带有“全部”的Tab时,其他地方与上面的相同。唯独需要注意的一个地方就是默认先展示的“全部版块” 不能从Gid层开始loop,否则就不是按照版块的列表排序而是Gid的。loop这里,需要剔除上面的Gid的loop。直接从版块名称开始loop。




最后:
这里需要特别注意的是:这个jQuery的Tab。是可以在同一个页面多次使用的,如果最终的样式 tab-hd 和 tab-bd 这2个框架并不能同时在class="Currency_Tab"里,
       1.给包含tab-hd 和 tab-bd 的父级div层一个class="Currency_Tab"
       2.如果不适合给父级class="Currency_Tab",那么这个页面只能使用一次

Jquery

[代码]php代码:

01<script type="text/javascript">
02        jQuery(function(){
03                function tabs(tabTit,on,tabCon){
04                        jQuery(tabTit).children().hover(function(){
05                                jQuery(this).addClass(on).siblings().removeClass(on);
06                                var index = jQuery(tabTit).children().index(this);
07                                jQuery(tabCon).children().eq(index).show().siblings().hide();
08                        });
09                };
10        tabs(".tab-hd","active",".tab-bd");
11        });
12</script>

微信公众平台架构设计及微信开发样式库

微信公众平台开发有关与架构设计、安全、微信UI的相关知识。提供全套的开发工具,从“零基础”开始讲解,教授如何注册、使用开发账号。特别的,还有专门的课程,手把手教同学们如何搭建环境。
  • 2016年04月11日 08:28

dojo的TabContainer竖排摆放tab标签

因项目样式需要,要使用TabContainer并需要将Tab标签在左侧竖排显示,并添加关闭按钮。 创建TabContainer var tabContainer = new TabCont...
  • GISsunchangfu
  • GISsunchangfu
  • 2015-08-24 16:11:08
  • 852

一个简单的tab样式

html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" > title>Testti...
  • nanjing0412
  • nanjing0412
  • 2017-03-10 15:55:13
  • 660

漂亮的JSP TAB选项卡

  • 2009年10月15日 21:48
  • 149KB
  • 下载

仿微信滑动Tab框架

package cn.com.dsyc.canteenappforseller; import cn.com.dsyc.canteenappforseller.widget.ActionBarIte...
  • lebron_wei
  • lebron_wei
  • 2016-01-30 15:51:29
  • 689

discuz的htm模板代码分析

 {template header}    如果只是游客(条件:$gid || !$discuz_uid),则输出:$bbname和个人空间相应的链接,否则输出:用户名($discuz_user)在这...
  • phpsome
  • phpsome
  • 2009-02-19 14:54:00
  • 19477

web开发之Tab页的常见实现方法

tab和内容分离布局: 用一个大的container div容器包裹住tab-control和tab-content两个div块给每一个tab-control的项(a标签的href属性)设置锚点 给每...
  • Tan_D
  • Tan_D
  • 2017-12-21 14:38:27
  • 150

CSS样式漂亮Tab页

  • 2009年09月28日 11:48
  • 52KB
  • 下载

一个比较漂亮的tab样式

直接上代码吧: Html代码   html>   head>   meta http-equiv="Content-Type" content="text/html; ch...
  • nanjing0412
  • nanjing0412
  • 2017-03-09 15:53:03
  • 941

从Bootstrap中分离出tab组件的样式

话不多说,直接上代码: body { font-family: 'Segoe UI',Arial,Verdana,Tahoma; font-size: 13px; l...
  • bingleiyuren
  • bingleiyuren
  • 2016-03-01 18:04:05
  • 2329
收藏助手
不良信息举报
您举报文章:discuz.htm 采用Tab样式展示板块
举报原因:
原因补充:

(最多只允许输入30个字)