跳至內容

維基百科:舊版摺疊顯示

本頁使用了標題或全文手工轉換
維基百科,自由的百科全書

在中文維基百科,摺疊顯示應用在很多條目的導覽模板討論頁等地方,透過滑鼠的點擊就可以展開和收縮一些版面,以方便讀者進行導覽閱讀。

此外,中文維基百科在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!
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 每頁面只可用一次,宜使用更簡單的表格代碼