帮助:Tab切换

Tab是wiki中常见的内容折叠收纳方式，这里罗列出灰机wiki支持的tab实现方法

帮助

简单

入门

进阶

复杂

开发

Tab

不再使用!
在灰机2.1.0+版本中已经不再使用。如需继续使用需要开启兼容模式。

替代方案!
我们推荐用以下方案来替代本功能：实用组件集

该部分内容仅在HuijiWiki的维基平台生效，请注意该部分代码的兼容性。

效果图

代码:<tab>。
作用：用于添加多页的标签。
示例：
<tab> tab1|一些内容 tab2|另一些内容 </tab>
效果：点此查看
参数：

参数	类型	默认值	描述
class	class	nav-tabs	可选值为nav-tabs nav-pills nav-stacked nav-justified

值：每一个tab应该都在一行。形如：tab的名字|tab的内容。其中tab的内容可以是模板。请注意：这里的模板是没有参数的模板；如果模板带有参数，建议在其外面套上一个没有参数的模板/页面，然后将外面的的模板/页面放入tab的内容。

零件：简易自定义过滤器

安装地址：简易自定义过滤器（by Yuee）

自定义过滤器效果图

零件：Tabber

安装地址：Tabber（by Yuee）

本零件是简易自定义过滤器的升级版，包含简易自定义过滤器的功能，并且与其使用了不同的class，所以可以共存。

零件共有三个工作模式，三个模式之间没有任何实际上的关联，一旦决定好工作模式，就会按照对应的逻辑进行执行
本脚本只使用class和ID作为选择器，不会用到HTML元素作为选择器，所以原则上所有HTML元素都可以作为操作对象
所有class均为选择器使用，没有配置任何样式，请自行根据需要补充样式
模式1和模式2，在异步加载内容的等待期间，使用了以下内容作为loading占位，可以通过样式为其设定一张loading图，如果有开发者权限的话也可以自行修改内容

<div class="tabber-loading-block" style="min-height: 140px;text-align: center;"><div class="tabber-loading" style="margin-top:40px;"></div></div>

模式0

模式0为默认模式

该模式下，需要事先在页面中生成切换内容，零件只根据条件控制各元素是否显示

本模式与简易自定义过滤器完全相同，区别只在检测的class名称不一样

详细文档请参考模式0详细说明

效果：

选项1的内容

选项2的内容

选项3的内容

代码：

<div class="tabber">
	<div class="tabber-filter">
		<div class="tabber-filter-item selected" data-type="test" data-test="1" style="display: inline-block;background: #efb1b1;padding: 1px 5px;margin-right: 3px;cursor: pointer;">选项1</div>
		<div class="tabber-filter-item" data-type="test" data-test="2" style="display: inline-block;background: #b1efcd;padding: 1px 5px;margin-right: 3px;cursor: pointer;">选项2</div>
		<div class="tabber-filter-item" data-type="test" data-test="3" style="display: inline-block;background: #b1bbef;padding: 1px 5px;margin-right: 3px;cursor: pointer;">选项3</div>
	</div>
	<div class="tabber-item" data-test="1" style="background: #efb1b1;width: 200px;height: 50px;padding: 2px 5px;">选项1的内容</div>
	<div class="tabber-item" data-test="2" style="background: #b1efcd;width: 200px;height: 50px;padding: 2px 5px;">选项2的内容</div>
	<div class="tabber-item" data-test="3" style="background: #b1bbef;width: 200px;height: 50px;padding: 2px 5px;">选项3的内容</div>
</div>

模式1

模式1在用户交互的感受上，与模式0相同（通过切换过滤器显示不同内容）

区别在于，模式0的内容需要提前渲染在页面中，而模式1是通过API异步解析模板或是读取页面来加载内容

例如下面的例子中

在class=tabber的元素上，指定了data-mode=1表示使用模式1，指定了data-template=TabberTest表示解析templatemanager:模板:TabberTest的内容，指定了data-param="a=共用文字"作为参数
在每个选择器（tabber-filter-item）子项中，指定了data-param作为参数
执行时会将tabber的param和每个filter中被选中项目的param连在一起，例如点击“选项1”后，会通过API请求解析{{TabberTest|a=共用文字|选项1|你好|c=efb1b1}}这个模板，并将结果内容更新到tabber的子元素tabber-content中
选项3则指向了一个页面，会异步将这个页面的内容加载过来

详细文档请参考模式1详细说明

效果：

代码：

<div class="tabber" data-mode="1" data-template="TabberTest" data-param="a=共用文字">
	<div class="tabber-filter">
		<div class="tabber-filter-item selected" data-param="选项1|你好|c=efb1b1" style="display: inline-block;background: #efb1b1;padding: 1px 5px;margin-right: 3px;cursor: pointer;">选项1</div>
		<div class="tabber-filter-item" data-param="选项2|我好|c=b1efcd" style="display: inline-block;background: #b1efcd;padding: 1px 5px;margin-right: 3px;cursor: pointer;">选项2</div>
		<div class="tabber-filter-item" data-page="Manifest:Tabber/测试页" style="display: inline-block;background: #b1bbef;padding: 1px 5px;margin-right: 3px;cursor: pointer;">选项3</div>
	</div>
	<div class="tabber-content"></div>
</div>

调用的模板内容：

<div style="background: #{{{c}}};width: 200px;padding: 2px 5px;">这是TabberTest，内容
*{{{1|第1个参数的内容}}}
*{{{2|第2个参数的内容}}}
*{{{a|参数a的内容}}}
</div>

调用的页面： templatemanager:Manifest:Tabber/测试页

模式2

模式2是一个简化版的模式1，通过异步解析模板或是读取页面来加载内容，显示元素中

该模式主要用来将页面中的一部分内容改为异步加载，来减轻页面的渲染压力

该内容会在脚本加载后，就自动执行进行解析

详细文档请参考模式2详细说明

效果：

代码：

<div class="tabber" data-mode="2" data-template="TabberTest" data-param="自动加载|异步|c=fba030"></div>

零件：RichTab

本模板为危险模板，预计2023年3月后将不再支持该模板的正常工作，详见危险模板

安装地址：RichTab（by Honestleaf）

示例

{{RichTab
|[[File:中国.png|150px|link=]]
|中国
|[[File:美国.png|150px|link=]]
|美国
|[[File:日本.png|150px|link=]]
|日本
|class=nav-pills
}}

帮助:Tab切换

目录

Tab

零件：简易自定义过滤器

零件：Tabber

模式0

模式1

模式2

零件：RichTab

相关说明

示例

另行参见