全站通知：

模板:切换显示/文档

来自斯露德WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索
如果是第一次来，按"Ctrl+D"可以收藏随时查看更新~觉得WIKI好玩的话，请推荐给朋友哦～(◕ω＜)☆
按右上角“WIKI功能→编辑”即可修改页面内容。


本系列模板用以手动显示/隐藏特定字符串，并批量指定字符串及按钮样式。

依赖页面

另外还须在全站CSS和JS内添加以下内容：

  • 全站CSS（这里主要为按钮和字符串样式，可自行修改）：
.textToggleDisplayButtons input[type=checkbox], input[type=radio] {
    margin: 0 !important; 
}

.textToggleDisplayButtons {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	align-content: flex-start;
	user-select: none;
}
.textToggleDisplayButtonLabel {
	display: inline-flex;
    margin: 5px;
    padding: 5px;
	border-radius: 5px;
	flex: 1 0 auto;
	box-shadow: 2px 2px 8px #ddd;
	color: #000;
	transition: 0.13s ease-in-out all;
	background-color: #fff;
}
.textToggleDisplayButtonLabel.cancelButton {
	line-height: normal;
}
.textToggleDisplayButtonLabel.on {
    box-shadow: 2px 2px 8px #FF8C69;
}
.textToggleDisplayButtonInput {
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: solid 1px #dddddd;
    border-radius: 50%;
    position: relative;
    transition: background 0.1s;
}
.textToggleDisplayButtonInput:checked {
    background: #62A7F8;
}
.textToggleDisplayButtonInput:checked::after {
    content: '';
    height: 6px;
    width: 10px;
    border: #fff solid 2px;
    position: absolute;
    top: 4px;
    left: 4px;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
}
.textToggleDisplayButtonLabelText {
    padding-left: 5px;
}
.textToggleDisplay.hidden,
.textToggleDisplayButtonLabel.cancelButton > input,
.textToggleDisplayButtonLabel.on .textToggleDisplayButtonLabelText.off,
.textToggleDisplayButtonLabel:not(.on) .textToggleDisplayButtonLabelText.on,
.textToggleDisplayButtonsStyle,
.textToggleDisplayStyle {
	display: none !important;
}


  • 全站JS：
$(function(){
	mw.loader.load("//wiki.biligame.com" + mw.util.wikiScript("") + "?title=MediaWiki:TextToggleDisplay.js&action=raw&ctype=text/javascript", "text/javascript");
});


使用示例


详细使用方法

注意字符串代号可以用小写英文字母、大写英文字母、汉字等（不被视为wikitext）：
  • 不得包含'、"、<、>、\、/、|、$，不得以@开头，否则将被无视；
  • 大小写、繁简敏感，请牢记。
{{切换显示|参数1|参数2|参数3}}：
FFF，用以指定需要手动切换的字符串。本模板没有数量限制。
  • 参数1：字符串代号；
  • 参数2：字符串内容（wikitext格式）；
    • 在参数3未指定为块元素名时参数2不可以填写需要换行的wikitext，反之当参数3指定为块元素名时参数2没有任何限制（参见#需要换行的wikitext）。
  • 参数3：FFF，用以指定字符串根元素的标签名（默认为span）（参见#根元素标签）。
{{切换显示/模板|@=【模板名称】|@tag=【根元素标签】|【参数1】=|【参数2】@【字符串代号1】=|…}}：
FFF，是{{切换显示}}的包装（即本模板是{{切换显示}}的特殊实现，与之等价），用以指定需要手动切换一个模板的某个/些参数的字符串，以减少代码书写量，提高可阅读性。本模板没有数量限制。
  • 参数格式中【】内为用户填写内容（注意填写时不要加【】，除非代号与文本内确有此内容）。
  • 参数@：调用的目标模板的名称，不需要加模板:名字空间前缀；
  • 参数@tag：FFF，同{{切换显示}}的参数3，用以指定字符串根元素的标签名（默认为span）（参见#根元素标签）；
  • 格式参数：调用的目标模板的参数的名称；
    • 参数名称与直接调动目标模板所需要书写的参数名称基本一致。唯一区别是，目标模板参数名称中的每个@字符都需要写成2个（@@），以免和表示参数名称与字符串代号间隔的1个@字符混淆；
  • 格式字符串代号：字符串代号；
    • 若不填写格式字符串代号，这个参数的值将会作为所有字符串代号的默认值；
FFF{{切换显示/模板}}实际上多次调用了目标模板，而非仅对参数部分进行处理。若目标模板代码中包含计数器等（设计时未考虑重复调用情况），需要注意对其状态进行重置。
{{切换显示按钮|@default=|@radio=|@reverse=|@forceNoCancel=|@toggleClass=|【字符串代号1】=【按钮文本1】|…}}：
FFF，用以显示切换按钮，本模板没有数量限制。若一个本模板中有多个“字符串代号”，则这些“字符串代号”对应的按钮将并排显示。
  • 参数格式为 |【字符串代号】=【按钮文本】，其中【】内为用户填写内容（注意填写时不要加【】，除非代号与文本内确有此内容）。
    【按钮文本】为wikitext格式，但其内的点击事件不会被触发（即链接、缩略图等无法点开）。
    • 可选格式如下（仅@on和@off会被识别为参数，“@+其他任意字符”则会被识别为“字符串代号”的一部分）：
      • |【字符串代号】@on=【按钮文本】：指定字符串代号对应按钮激活时显示的按钮文本（普通模式下按钮复选框/单选框勾选时显示，反转模式下按钮复选框/单选框未勾选时显示）；
      • |【字符串代号】@off=【按钮文本】：指定字符串代号对应按钮未激活时显示的按钮文本（普通模式下按钮复选框/单选框未勾选时显示，反转模式下按钮复选框/单选框勾选时显示）。
    • 另外，如果 【字符串代号】包含$，那么该按钮绑定的实际代号为 【字符串代号】按$分割后的数组，通过此方法可以将单一按钮绑定到多个元素上。
  • 另外，可以选择配置以下选项：
    • @default：FFF，用以指定默认激活的按钮（此处的参数值为该按钮对应的字符串代号）；
    • @radio：FFF，参数值不为空时将会使该模板内的按钮变为单选框，一次只能显示一种字符串；
      • 使用该参数时单选按钮旁边会显示“取消选择”按钮。
    • @reverse：FFF，参数值不为空时将会使该模板内的按钮变为反转模式：没有勾选的将会显示，勾选的将会隐藏；
    • @forceNoCancel：FFF，参数值不为空且@radio和@default均不为空时强制隐藏取消选择单选框。
    • @toggleClass：FFF，参数值不为空时可以指定切换显示具体切换的 class 名称；此 class 默认为hidden，所以只要改成hidden以外的 class 名称就可以不隐藏切换显示的内容、而是改为利用 CSS 样式表应用不同的显示效果。
FFF{{切换显示}}与{{切换显示按钮}}的位置决定了字符串和按钮的位置关系，例如编辑文档时{{切换显示}}在{{切换显示按钮}}的前面，则显示内容时字符串在按钮的前面，反之亦然。
{{切换显示样式|【字符串代号1】=【样式文本1】|…}}：
FFF，用以批量指定某些需要手动切换的字符串的样式，会同时影响按钮内文字的样式（普通模式下按钮复选框/单选框勾选时激活，反转模式下按钮复选框/单选框未勾选时激活）。本模板没有数量限制但是一个就够用了。
  • 参数格式为 |【字符串代号】=【样式文本】，其中【】内为用户填写内容（注意填写时不要加【】，除非代号与文本内确有此内容）。
{{切换显示按钮样式}}：
FFF，用以指定按钮样式。本模板没有数量限制但是一个就够用了。
  • 参数格式如下：
    • |【字符串代号】=【样式文本】：指定字符串代号对应按钮的通用样式；
      • |【字符串代号】@on=【样式文本】：指定字符串代号对应按钮激活时的样式（普通模式下按钮复选框/单选框勾选时激活，反转模式下按钮复选框/单选框未勾选时激活）；
      • |【字符串代号】@off=【样式文本】：指定字符串代号对应按钮未激活时的样式（普通模式下按钮复选框/单选框未勾选时激活，反转模式下按钮复选框/单选框勾选时激活）；
      • |【字符串代号】@input=【样式文本】：指定单选框“圆点”和复选框“对勾背景”的样式（仅在显示这些内容的情况下生效）；
      • 【字符串代号】为@cancel时将指定“取消选择”按钮的样式（所有“取消选择”按钮都使用该样式）；
        • @cancel@on指定“取消选择”按钮未激活时的样式；
        • @cancel@off指定“取消选择”按钮激活时的样式；
        • @cancel=display:none可以隐藏“取消选择”按钮；
其中，on和off样式优先于通用样式，仅在未指定on和off样式的情况下才会使用通用样式。
FFF{{切换显示样式}}和{{切换显示按钮样式}}都可以指定按钮文本样式。当二者同时存在时，{{切换显示按钮样式}}优先级高于{{切换显示样式}}。

根元素标签

本段文字说明的是{{切换显示}}的 参数3 及{{切换显示/模板}}的参数 @tag。
  • 该参数的参数值可选div、span等，默认值为span。
    • 当参数值为span时，字符串根元素为行内元素。需要换行的模板在此情况下无法隐藏，将一直显示；
    • 当参数值为div时，字符串根元素为块状元素。需要换行的模板在此情况下可以隐藏，随按钮的激活与否保持显示/隐藏状态；
    • 不需要换行的模板不受参数值的限制，但会根据字符串根元素的类型而改变版式。
示例：
需要换行的模板
参数3的参数值为span时（此时本模板无法生效）：
{{切换显示按钮
|span1=显示gifts
}}{{切换显示|span1|
{{bilibiliVideo|id=BV1nC4y147iy|page=1|width=600|height=421|autoplay=yes}}<nowiki/>
|span}}
参数3的参数值为div时：
{{切换显示按钮
|div1=显示gifts
}}{{切换显示|div1|
{{bilibiliVideo|id=BV1nC4y147iy|page=1|width=600|height=421|autoplay=yes}}<nowiki/>
|div}}


不需要换行的模板
参数3的参数值为span时：
{{切换显示按钮
|span2=显示丘比
}}{{切换显示|span2|
{{颜文字|丘比}}<nowiki/>
|span}}
参数3的参数值为div时：
{{切换显示按钮
|div2=显示丘比
}}{{切换显示|div2|
{{颜文字|丘比}}<nowiki/>
|div}}

需要换行的wikitext

添加表格
FFF由于表格wikitext较为恶心，里面所有带有|的格式符号都需要进行替换。
当然，任何时候=都需要替换。

{{切换显示按钮|data1=表格|@default=data1}} {{切换显示|data1|<nowiki/> {{(!}} class{{=}}"wikitable sortable" {{!-}} ! A ! B {{!-}} {{!}} 1 {{!}} 2 {{!-}} {{!}} 3 {{!}} 4 {{!)}}|div}}{{切换显示样式|data1=color: red; font-weight: 700;}}

添加其他需要换行的wikitext
FFF此处的<nowiki/>与wikitext之间应换行，否则wikitext会失效。

{{切换显示按钮|data2=列表|@default=data2}} {{切换显示|data2|<nowiki/> * A * B *# C *# D # 3 ##8 ; E : F |div}}{{切换显示按钮样式|data2=border-color:red}}

取自“https://wiki.biligame.com/thrud/index.php?title=模板:切换显示/文档&oldid=6132”