Jump to content

Manual:可折叠元素

本頁使用了標題或全文手工轉換
From mediawiki.org
This page is a translated version of the page Manual:Collapsible elements and the translation is 83% complete.
Outdated translations are marked like this.
MediaWiki为MediaWiki 1.18及更高版本提供了开箱即用的可折叠类。 对于早期的社区版本,请参阅此次修订

jQuery.makeCollapsible

请参阅jQuery.makeCollapsible 文档来了解关于该功能生效方式的更多信息。

参见Manual:Collapsible elements/Demo/Advanced 以获取更多示例。

从MediaWiki 1.18以及更高版本起,此模块默认包含在MediaWiki 核心中。 此模块默认随MediaWiki一起提供。 你并不需要将其复制进wiki中。 The source (if you're interested) is in the repository for mediawiki-core (resources/src/jquery/jquery.makeCollapsible.js and resources/src/jquery/jquery.makeCollapsible.css).

给任意元素(div、table、list等任何元素)加入mw-collapsible类以启用。

Skin:Minerva Neue 中不生效(phab:T111565)。

Please note that the built-in search of browsers doesn’t find content in collapsed elements (phab:T327893).

表格

表格可以像任何其他元素一样折叠。 区别是,表格的部分内容会保持显示,即使已经被折叠。 带有表格标题(caption)的标题会保持表格标题可见:

{| class="mw-collapsible"
|+ 标题
|-
! scope="col" | 表头1
! scope="col" | 表头2
|-
| 数据1
| 数据2
|}
标题
表头1 表头2
数据1 数据2

没有标题(caption)的表格,保持第一行可见:

{| role="presentation" class="mw-collapsible"
|-
| Lorem
| ipsum  
|-
| dolor
| sit
|}

结果:

指定初始状态

您可以在mw-collapsible后添加mw-collapsed,以便在加载页面时默认将内容折叠。

若要将初始状态设置为折叠,请添加“mw-collapsed”,如下表所示:

{| class="mw-collapsible mw-collapsed wikitable"
! colspan="2" | 表头仍然可见。  
|-
| 此内容 || 被隐藏了
|-
| 在初次 || 加载时
|}
表头仍然可见。  
此内容 被隐藏了
在初次 加载时
{| class="mw-collapsible mw-collapsed wikitable"
|+ style=white-space:nowrap | 标题仍然可见。 
|-
! 文本 !! 更多文本
|-
| 此内容 || 被隐藏了
|-
| 在初次 || 加载时
|}
标题仍然可见。
文本 更多文本
此内容 被隐藏了
在初次 加载时

You can add a padded border around the caption to make it easier to see that it is a collapsed table:

|+ style="white-space:nowrap; border:1px solid; padding:3px;" | 标题仍然可见。
标题仍然可见。
文本 更多文本
此内容 被隐藏了
在初次 加载时

简单

<!-- 用于修复折叠的显示效果,因为切换链接有float:right;属性 -->
<div class="toccolours mw-collapsible" style="width:400px; overflow:auto;">
此本文可折叠。 {{Lorem}}
</div>

结果:

此本文可折叠。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Using the data-collapsetext and data-expandtext attributes one can define a custom text for the toggle labels added by the script. When added in wikitext these could be populated by a localized message like:

<div class="mw-collapsible" data-expandtext="{{int:show}}" data-collapsetext="{{int:hide}}">

简单带有标题

<div class="toccolours mw-collapsible" style="width:400px; overflow:auto;">
<div style="font-weight:bold;line-height:1.6;">Lorem ipsum 示例</div>
<div class="mw-collapsible-content">
此本文可折叠。 {{Lorem}}
</div></div>

结果:

Lorem ipsum 示例
此本文可折叠。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

带有指定的可折叠部分

默认情况下,可折叠的非表格元素将完全折叠。

若想要使某些内容在折叠时也保持可见,您可以指定哪个部分是可折叠内容。

<div class="toccolours mw-collapsible mw-collapsed">
此文本不可折叠,但是后面的文本可折叠且默认隐藏:
<div class="mw-collapsible-content">{{Lorem}}</div>
</div>

结果:

此文本不可折叠,但是后面的文本可折叠且默认隐藏:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

自定义切换链接文本

MediaWiki版本:
1.41

您可以通过在可折叠元素中放置一个类(class)为mw-collapsible-toggle-placeholder的元素来控制切换链接在其中的位置。 The placeholder will be completely replaced with a standard toggle link, at the exact position in the DOM where you put the placeholder. 请参阅高级演示查看示例。

You will want to combine this with a specified collapsible part (see above), and put the placeholder outside the mw-collapsible-content element, to ensure that the toggle is still reachable in the collapsed state.

带有自定义的开关链接

这个方法不可使用,且对屏幕阅读器读者不易理解,应避免使用。

If you don't want the script to put the default toggle link (whether or not with a custom label) in your element, you can make one of your own. This could reside anywhere inside or outside the collapsible element. Its relationship to the collapsible element is detected by using an ID attribute with the prefix mw-customcollapsible and a corresponding class attribute with prefix mw-customtoggle for the collapsible element and the togglelink respectively.

<span class="mw-customtoggle-myDivision">切换链接</span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">切换文本</div>
<span class="mw-customtoggle-myDivision">另一个切换链接</span>

结果:

切换链接

切换文本

额外切换链接

在其它元素中

您也可以在其它元素(例如表格)中使用可折叠元素。

包含可折叠信息的表格
标题 示例
Lorem Ipsum
更多信息
数字 字母  
1 A
2 B
3 C

将开关移到左边

Wide images and long bare URLs in collapsible tables or elements can cause the toggle link to go offscreen to the right when expanded. In cell phones for example. Sometimes it is difficult or impossible to get over to the toggle link to click it and close it. The following CSS puts the toggle link all the way to the left, and leaves a little space between it and the text to its right. The toggle link position does not change as the table or element is expanded or collapsed. 通过编辑“MediaWiki:Common.css”页面将CSS放在common.css中。 Also edit mobile.css if you are importing jquery.makeCollapsible into mobile.js. For examples see common.css, mobile.js, and mobile.css

/* 可折叠元素。切换链接移至左侧。
/* 调整周围的外边距(margin)。 */

.mw-collapsible span.mw-collapsible-toggle {
    float:left;
    margin-left:0;
    margin-right:1em;
}

从开关中移除方括号

如果想隐藏默认或自定义标签切换链接中的括号(出于美观或其他原因):

.mw-collapsible-toggle-default:before, .mw-collapsible-toggle-default:after {
    display: none;
}

参见