欢迎光临
我们一直在努力

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

建站超值云服务器,限时71元/月

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

<div class="Currency_Tab">
        <nav class="tab-hd">
                <!--{loop}-->
                        <li class="active><a href="javascript:void(0)">分区</a></li>
                <!--{/loop}-->
        </nav>
        <div class="tab-bd">
                <!--{loop $key }-->
                        <div style="display:{if $key==0}block{else}none{/if};">
                                版块
                        </div>
                <!--{/loop}-->
        </div>
</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的版块分区就形成了。如果想打开页面时,先显示的是全部版块,那么就需要对上面的框架结构做一个改善,

<div class="Currency_Tab">
        <nav class="tab-hd">
                <li class="active"><a href="javascript:void(0)">全部</a></li>
                <!--{loop}-->
                        <li><a href="javascript:void(0)">分区</a></li>
                <!--{/loop}-->
        </nav>
        <div class="tab-bd">
                <div style="display: block;">
                        <!--{loop}-->
                                全部版块
                        <!--{/loop}-->
                </div>
                <!--{loop}-->
                        <div style="display: none;">
                                版块
                        </div>
                <!--{/loop}-->
        </div>
</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
<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>

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

<div class="Currency_Tab">
        <nav class="tab-hd">
                <!--{loop}-->
                        <li class="active><a href="javascript:void(0)">分区</a></li>
                <!--{/loop}-->
        </nav>
        <div class="tab-bd">
                <!--{loop $key }-->
                        <div style="display:{if $key==0}block{else}none{/if};">
                                版块
                        </div>
                <!--{/loop}-->
        </div>
</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的版块分区就形成了。如果想打开页面时,先显示的是全部版块,那么就需要对上面的框架结构做一个改善

<div class="Currency_Tab">
        <nav class="tab-hd">
                <li class="active"><a href="javascript:void(0)">全部</a></li>
                <!--{loop}-->
                        <li><a href="javascript:void(0)">分区</a></li>
                <!--{/loop}-->
        </nav>
        <div class="tab-bd">
                <div style="display: block;">
                        <!--{loop}-->
                                全部版块
                        <!--{/loop}-->
                </div>
                <!--{loop}-->
                        <div style="display: none;">
                                版块
                        </div>
                <!--{/loop}-->
        </div>
</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
<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>


赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » Discuz 高级教程 – discuz.htm 采用Tab样式展示板块
分享到: 更多 (0)