维基百科:旧版折叠显示

(重定向自Wikipedia:NAVFRAME

在中文维基百科,折叠显示应用在很多条目的导航模板讨论页等地方,通过鼠标的点击就可以展开和收缩一些版面,以方便读者进行导航阅读。

此外,中文维基百科在2011年7月引入了新的折叠效果,其客制性更强,有关详情参见#新折叠效果

弃用说明

编辑

NavFrame已弃用,取而代之的是使用mw-collapsiblemw-collapsedmw-collapsible-contentCSS类。在将NavFrame从所有包含它的条目中移除或替换后,CSSJavaScript也将被移除。用户可能希望更新页面,以便折叠元素继续按照他们预期的方式工作。见下文

迁移

编辑

用户应放弃NavFrame,可通过以下三种方式之一进行迁移:

  1. 选择合适的折叠模板
  2. 迁移到表格结构
  3. 自行迁移HTML

关于2和3的基础知识可从MediaWiki.org上获取。

要迁移带有div的基本HTML,您需要进行以下更改:

<div class="NavFrame (collapsed)">
  <div class="NavHead">折叠标题</div>
  <div class="NavContent">
    折叠内容
  </div>
</div>
<div class="mw-collapsible (mw-collapsed)">
  <div class="collapsible-title">折叠标题</div>
  <div class="mw-collapsible-content">
    折叠内容
  </div>
</div>

要以完美像素的方式进行迁移,请参见下文。这种方式保留了颜色和边框,并消除了导航切换按钮和居中标题的一些跳跃感,但确实需要添加一个新的div,以及与应用于NavFrame元素的任何现有样式合并:

<div class="NavFrame (collapsed)">
  <div class="NavHead">折叠标题</div>
  <div class="NavContent">
    折叠内容
  </div>
</div>
<div class="mw-collapsible (mw-collapsed)" style="padding: 4px; border: 1px solid #a2a9b1; text-align: center; font-size: 95%;">
  <div class="skin-nightmode-reset-color collapsible-title" style="line-height: 1.6em; font-weight: bold; background-color: #ccf;"><div style="margin: 0 4em;">折叠标题</div></div>
  <div class="mw-collapsible-content" style="font-size: 100%; text-align: left;">
    折叠内容
  </div>
</div>

要在迁移后保持折叠标题可点击的特性,请前往您的参数设置,单击“小工具”选项卡,选中“可点击折叠标题”的复选框。有关更多信息,详见Wikipedia:可点击折叠标题

折叠模板

编辑

为了方便wiki编辑的使用,下面例举了一些常用的有折叠功能的模板。至于它们的实现基础,放在最下方说明,以供有兴趣研究它的维基人。

{{hideH|通用摺疊}}摺疊內容{{hideF}}
通用折叠
折叠内容
{{delH|關閉刪除投票}}刪除討論內容{{delF}}
本讨论已经结束,处理结果:关闭删除投票。请不要对这个存档做任何编辑。
删除讨论内容
{{Talkendh|關閉保护页面、破坏等请求(完成与未完成)}}刪除討論內容{{Talkendf}}
本讨论已经结束,处理结果:关闭保护页面、破坏等请求。请不要对这个存档做任何编辑。
删除讨论内容
{{talkH|關閉無關討論}}討論內容{{talkF}}

关闭无关讨论,本框内讨论文字已关闭,相关文字不再存档。
如有异议,请咨询互助客栈或其他管理员。执行人:讨论内容

{{TransH}}非中文文字{{TransF}}
已隐藏部分未翻译内容,欢迎参与翻译
非中文文字 not chinese

注意:{{delH}}重定向至{{Talkendh}},{{delF}}、{{Talkendf}}、{{TransF}}重定向至{{hideF}},其余参见Category:折叠模板

相关方针

编辑

折叠功能在主条目空间和portal空间的使用是有限制的,但在其它空间页面下一般不会限制。由于主条目空间和portal空间是作为百科知识的载体,面对读者,它不应当在知识的呈现上进行过多的花哨展示;并且,维基百科的条目内容要在包括电脑的多种界面上装载,比如纸介质、PDA、手机等,在这些界面上的折叠展示是受限的。

在条目空间使用折叠功能的指导思想是:折叠功能不可用时,必须不影响该条目的知识完整性;被折叠部分本身对于条目的完善、阅读有辅助价值。

所有在条目空间出现的折叠块应当是noprint的,即不可打印。

以下是一些可接受的使用折叠的方面:

  • 未完成的、中文读者还不能阅读的、没有形成有效知识的内容(比如未翻译成中文的文字、短时间内正在撰写的不成型段落、可疑无来源的文字)
  • 与该条目相关的主题导航
  • 对多数读者不适的内容和图片(该内容图片不影响条目的完整性)
  • 阅读指导,包括字词转换说明、免责说明等
  • 自我参照的内容,比如站务维护指示

实现基础

编辑

注意:中文维基百科是独立实现的折叠,与其它维基媒体项目的折叠功能在语法上有细小差异。

阅读这一节的内容要求你有一定的HTMLCSS基础知识,通过在源代码中设置特定的class(HTML属性)值,就可以实现指定版面的可折叠性。

MediaWiki:Common.js中的javascript脚本会自动完成相关的DHTML动作。

目前有两种HTML元素可以设置成可折叠,分别是div元素和table元素。本章节的以下说明用CSS选择器来说明各种class设置。

定义折叠块

编辑
  • div.NavFrametable.collapsible :指示该区域或表格是可折叠的,该值是实现某元素的折叠功能所必须的。
折叠块 折叠表格
<div class="NavFrame">...</div>
<table class="collapsible">...</table>
{|
class="collapsible"
這里放置表格的 wiktext 語法
|}
  • div.collapsedtable.collapsed :指示该折叠块的初始状态是已折叠的,如果没有设置该值,则折叠块的默认初始状态是展开的。以下两种折叠块都可以通过点击进行折叠和展开。
  • div.autocollapsetable.autocollapse :指示该折叠块的初始状态是否折叠由该页面的可折叠块数量控制。如果有2个及以上的折叠块,则自动折叠块就折叠,否则自动折叠块展开。

定义折叠标题

编辑

折叠标题的作用是系统自动生成“显示▼/隐藏▲”的指示,鼠标在折叠标题单击时,就会产生折叠或展开的动作。

折叠块使用例

编辑

定义折叠标题主要是针对div折叠块的,通过在div.NavFrame中放置一个div.NavHead元素,则这个div.NavHead元素就变成折叠标题供点击。

<div class="NavFrame collapsed"><div class="NavHead">設定了 collapsed</div><div class="NavContent"><center>展開的文字</center></div></div>

如果在 div.NavFrame 中没有设置 div.NavHead,则该折叠块将没有折叠标题,因此隐藏的内容无法显示。

<div class="NavFrame collapsed"><div>没有設定 collapsed</div><div class="NavContent"><center>展開的文字</center></div></div>

表格用例

编辑

至于table,系统自动将表格的第一行(并且该行有标题单元)作为折叠标题。如果在 table.collapsible 中第一行没有标题单元格,则该折叠块将没有折叠标题。

代码 效果
{| class="collapsible collapsed"
|-
! 第一行
|-
| 第二行
|}
{| class="collapsible collapsed"
|-
| 第一行
|-
| 第二行
|}

新折叠效果

编辑

新的折叠效果并不是中文维基百科开发的,而是由一些外语wiki社群开发,中文维基百科再采用。以下各项均可加入 mw-collapsed 以实现默认隐藏。

代码及显示 CSS ID,Class 提示
<div class="mw-collapsible" data-collapsetext="點此隱藏" data-expandtext="點此開啟">
Lorem ipsum
</div>

Lorem ipsum

mw-collapsible 可以加入“data-collapsetext”属性定义打开时的文字,及“data-expandtext”定义隐藏时显示的文字。
<div class="mw-collapsible mw-collapsed">
Lorem ipsum
</div>

Lorem ipsum

mw-collapsible mw-collapsed
<div class="mw-collapsible mw-collapsed">
第一個摺疊
<div class="mw-collapsible" style="background:#eee">
第一个子摺疊
</div>
<div class="mw-collapsible" style="background:#eee">
第二个子摺疊
</div>
</div>

第一个折叠

第一个子折叠

第二个子折叠

mw-collapsible mw-collapsed 可在折叠中包含多个子折叠
{| class="wikitable sortable mw-collapsible"
! 你好
! 世界
|-
| 內容
| 會在
|-
| 這裡
| 出現
|}
你好 世界
内容 会在
这里 出现
wikitable sortable mw-collapsible 首行将会作为标题显示
<table class="wikitable">
<tr>
<th>X</th> <th>Y</th> <th>Z</th>
</tr>
<tr>
<td>下面的內容是預設隱藏的</td> <td>35</td> <td>91</td>
</tr>
<tr>
<td class="mw-collapsible mw-collapsed">我是mw-collapsible的內容</td> <td>42</td> <td>63</td>
</tr>
</table>
X Y Z
下面的内容是默认隐藏的 35 91
我是mw-collapsible的内容 42 63
mw-collapsible mw-collapsed 这个有时候需要较深的HTML代码,正常理应使用简单的wikitable代码。
<ul class="mw-collapsible">
<li>Lorem
<li>Ipsum
<li>Dolor
</ul>
  • Lorem
  • Ipsum
  • Dolor
mw-collapsible 可以使用较简单的代码
<ol class="mw-collapsible">
<li>One
<li>Two is more than one
<li>..a total of three items!
</ol>
  1. One
  2. Two is more than one
  3. ..a total of three items!
mw-collapsible
:<strong class="mw-customtoggle-myDivision">@</strong>

<div class="mw-customtoggle-myDivision">點選這裡或任何@來打開或隱藏。</div>

<div class="mw-customtoggle-myDivision" style="cursor:pointer">
[[File:At_char.svg|100px|left|link=|title=Click me!]] ⇐ @@這裡或圖片都可以打開@@
<div style="clear:both"></div></div>

<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">
<div class="toccolours mw-collapsible-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
. Morbi commodo, ipsum sed pharetra gravida
</div>
</div>
@
点击这里或任何@来打开或隐藏。
 
title=Click me!
⇐ @@这里或图片都可以打开@@

Lorem ipsum dolor sit amet, consectetuer adipiscing elit . Morbi commodo, ipsum sed pharetra gravida

class=mw-customtoggle-myDivision, class=toccolours mw-collapsible-content, id=mw-customcollapsible-myDivision 每页面只可用一次
<div class="mw-customtoggle-myTable">點此摺疊表格</div>
{| class="wikitable sortable mw-collapsible" id="mw-customcollapsible-myTable"
! Hello
! World
|-
| Content
| Goes
|-
| In
| Here
|}
点此折叠表格
Hello World
Content Goes
In Here
mw-customtoggle-myTable 每页面只可用一次
<div class="mw-customtoggle-myList">摺疊列表</div>

<ul class="mw-collapsible" id="mw-customcollapsible-myList">
<li>A
<li>B
<li>C
<li>D
</ul>
折叠列表
  • A
  • B
  • C
  • D
mw-customcollapsible-myList 每页面只可用一次
<table class="wikitable">
<tr>
<th>X</th> <th>Y</th> <th>Z</th>
</tr>
<tr>
<td><span class="mw-customtoggle-AA mw-customtoggle-BB mw-customtoggle-CC">
點這裡隱藏或顯示行A,B及C
</span></td> <td>20</td> <td>11</td>
</tr>
<tr id="mw-customcollapsible-AA" class="mw-collapsible mw-collapsed">
<td>行A</td> <td>20</td> <td>7</td>
</tr>
<tr id="mw-customcollapsible-BB" class="mw-collapsible mw-collapsed">
<td>行B</td> <td>21</td> <td>11</td>
</tr>
<tr id="mw-customcollapsible-CC" class="mw-collapsible mw-collapsed">
<td>行C</td> <td>29</td> <td>1</td>
</tr>
<tr>
<td>普通行</td><td>0</td><td>30</td>
</tr>
</table>
X Y Z

点这里隐藏或显示行A,B及C

20 11
行A 20 7
行B 21 11
行C 29 1
普通行030
mw-customtoggle, mw-customcollapsible, mw-collapsible mw-collapsed 每页面只可用一次,宜使用更简单的表格代码