一个资源分享、信息整合的综合性站点。

标题: discuz中discuz.htm如何采用Tab样式展示板块？ [打印本页]

作者: 树苗收集系 时间: 2019-11-23 20:14
标题: discuz中discuz.htm如何采用Tab样式展示板块？
   先来BB一下原理。
   首先先要说discuz.htm。在默认模板的情况下，discuz的论坛首页样式与点击版块分区名称后的样式是一样的，用的都是discuz.htm这个模板。只不过部分区域使用了来做区分。
   在创作模板中，如果我们把版块分区名称和版块名称分别调用。当版块分区名称聚合在一起我们去点击的时候，其实就已经形成了一个伪Tab。为什么这里要说是伪Tab呢。因为在点击版块分区名称的时候，会产生URL的跳转，其实说白了就是跳转到对应的版块分区名称的页面了。只不过模板的样式一样。
   既然我们要做成Tab，那么肯定就不能有URL跳转。于是经过几天的研究和讨论做出了这么一个框架
[code]<div class="Currency_Tab">
      <nav class="tab-hd">
            
                     <li class="active><a href="javascript:void(0)">分区</a></li>
            
      </nav>
      <div class="tab-bd">
            
                     <div style="display:{if $key==0}block{else}none{/if};">
                              版块
                     </div>
            
      </div>
</div>
[/code][color=#000][font=&quot]来说一下思路，这里比较复杂。[/font][/color]
[color=#000][font=&quot]    因为要用Tab做[/font][/color][color=#ff8c00][font=&quot]版块分区名称[/font][/color][color=#000][font=&quot]和[/font][/color][color=#ff8c00][font=&quot]版块名称[/font][/color][color=#000][font=&quot]的分离，那么这里就需要分开loop｛实际的效果是版块分区名称单独写loop的查询语句，版块名称使用默认模板的loop查询语句｝。[/font][/color]
[color=#000][font=&quot]    这还远远不够，要做出最终的效果，对jQuery的Tab插件也要求很高。因为这里涉及到 tab-bd 里面必须要于 tab-hd 自动对接，不需要对 tab-hd 和 tab-bd 里的框架分别做对应的 id=[/font][/color]

[color=#000][font=&quot]    为什么<div class="tab-bd"></div>里只写一个 ，而不是对应 tab-hd 的个数写出对应的<div style="display: block;">版块</div>呢？这里需要着重的解释一下。[/font][/color]

[color=#000][font=&quot]    因为如果下面写无限个（对应其 tab-hd 的个数）<div style="display: block;">版块</div>，再在里面去写loop。是可以省很多的事情，不需要考虑style="block"怎么给，也不用考虑怎么和 tab-hd 的个数自动对接。每一个<div style="display: block;">版块</div>里面，直接loop出 tab-hd 对应的版块名称就可以。但是有一个地方需要注意，那就是这么写，只能调用出已存在的版块，如果后续添加新的[/font][/color][color=#ff8c00][font=&quot]版块分区名称[/font][/color][color=#000][font=&quot]和[/font][/color][color=#ff8c00][font=&quot]版块名称[/font][/color][color=#000][font=&quot]，那还需要在模板里再写对应的查询语句来loop。[/font][/color][color=#ff0000][font=&quot]所以只能loop一次。[/font][/color]
[color=#000][font=&quot]这样一个Tab的版块分区就形成了。如果想打开页面时，先显示的是全部版块，那么就需要对上面的框架结构做一个改善。[/font][/color]
[code]<div class="Currency_Tab">
      <nav class="tab-hd">
            <li class="active"><a href="javascript:void(0)">全部</a></li>
            
                     <li><a href="javascript:void(0)">分区</a></li>
            
      </nav>
      <div class="tab-bd">
            <div style="display: block;">
                     
                              全部版块
                     
            </div>
            
                     <div style="display: none;">
                              版块
                     </div>
            
      </div>
</div>
[/code][color=#000][font=&quot]如果使用带有“全部”的Tab时，其他地方与上面的相同。唯独需要注意的一个地方就是默认先展示的“全部版块” 不能从Gid层开始loop，否则就不是按照版块的列表排序而是Gid的。loop这里，需要剔除上面的Gid的loop。直接从版块名称开始loop。[/font][/color]
[b][color=#ff0000]
[/color][/b]
[b][color=#ff0000]最后：[/color][/b]
[color=#ff0000][font=&quot][b]这里需要特别注意的是：这个jQuery的Tab。是可以在同一个页面多次使用的，如果最终的样式 tab-hd 和 tab-bd 这2个框架并不能同时在class="Currency_Tab"里，
[/b][/font][/color][color=#ff0000][font=&quot][b]    1.给包含tab-hd 和 tab-bd 的父级div层一个class="Currency_Tab"[/b][/font][/color]
[color=#ff0000][font=&quot][b]    2.如果不适合给父级class="Currency_Tab"，那么这个页面只能使用一次Jquery[/b][/font][/color]

[code]<script type="text/javascript">
      jQuery(function(){
            function tabs(tabTit,on,tabCon){
                     jQuery(tabTit).children().hover(function(){
                              jQuery(this).addClass(on).siblings().removeClass(on);
                              var index = jQuery(tabTit).children().index(this);
                              jQuery(tabCon).children().eq(index).show().siblings().hide();
                     });
            };
      tabs(".tab-hd","active",".tab-bd");
      });
</script>
[/code]

作者: 红颜纷扰红尘 时间: 2021-3-6 18:39
学习了，这就去试试

作者: 青栀琉璃裙 时间: 2022-6-18 17:04
支持一下，期待更多东西

欢迎光临一个资源分享、信息整合的综合性站点。 (https://sorv.cn/)