Manual:Collapsible elements/zh

From Linux Web Expert

Revision as of 06:18, 17 April 2024 by imported>FuzzyBot (Updating to match new version of source page)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

MediaWiki为MediaWiki 1.18及更高版本提供了开箱即用的可折叠类。 对于早期的社区版本，请参阅此次修订。

jQuery.makeCollapsible

-{H|zh-cn:账号; zh-tw:帳號;}--{H|账户=>zh-cn:账号; 账户=>zh-tw:帳號;}--{H|賬戶=>zh-cn:账号; 賬戶=>zh-tw:帳號;}--{H|賬號=>zh-cn:账号; 賬號=>zh-tw:帳號;}--{H|帐户=>zh-cn:账号; 帐户=>zh-tw:帳號;}--{H|帳戶=>zh-cn:账号;}--{H|帐号=>zh-cn:账号; 帐号=>zh-tw:帳號;}--{H|zh-cn:大量账号创建者; zh-tw:大量帳號建立者; zh-hk:大量帳號建立者;}--{H|zh-cn:高级; zh-tw:進階;}--{H|zh-cn:规范控制; zh-tw:權威控制;}--{H|zh-cn:封禁; zh-tw:封鎖; zh-hk:封鎖;}--{H|zh-cn:更改; zh-tw:變更;}--{H|zh-cn:字符; zh-tw:字元;}--{H|zh-cn:著作权; zh-tw:著作權; zh-hk:版權; zh-mo:著作權;}--{H|版权=>zh-tw:著作權; 版权=>zh-mo:著作權;}--{H|版权信息=>zh-cn:著作权信息; 版权信息=>zh-sg:著作权信息; 版权信息=>zh-my:著作权信息; 版权信息=>zh-tw:著作權資訊; 版权信息=>zh-mo:著作權資訊;}--{H|zh-cn:创建; zh-tw:建立;}--{H|創建=>zh-tw:建立; 創建=>zh-hk:建立; 創建=>zh-mo:建立;}--{H|zh-hans:当前; zh-hant:目前;}--{H|zh-cn:自定义; zh-tw:自訂;}--{H|自定義=>zh-hk:自訂; 自定義=>zh-tw:自訂;}--{H|自定=>zh-hk:自訂; 自定=>zh-tw:自訂;}--{H|zh-cn:默认; zh-tw:預設;}--{H|默認=>zh-tw:預設;}--{H|zh-cn:文件; zh-tw:檔案;}--{H|档案=>zh-cn:文件; 档案=>zh-sg:文件; 档案=>zh-my:文件;}--{H|zh-cn:文件名; zh-tw:檔案名稱;}--{H|zh-hans:机器用户; zh-tw:機器使用者; zh-hk:機械用戶;}--{H|zh-cn:脚注; zh-tw:註腳;}--{H|zh-cn:帮助:; zh-tw:說明:;}--{H|zh-cn:帮助讨论:; zh-tw:說明討論:;}--{H|zh-cn:信息; zh-tw:資訊;}--{H|zh-hans:界面; zh-hant:介面;}--{H|zh-cn:界面管理员; zh-tw:介面管理員;}--{H|zh-cn:IP封禁豁免; zh-tw:IP封鎖豁免;}--{H|IP封禁例外=>zh-hans:IP封禁豁免; IP封禁例外=>zh-hant:IP封鎖豁免;}--{H|IP封鎖例外=>zh-hans:IP封禁豁免; IP封禁例外=>zh-hant:IP封鎖豁免;}--{H|zh-cn:导入; zh-tw:匯入;}--{H|汇入=>zh-cn:导入; 汇入=>zh-sg:导入; 汇入=>zh-my:导入;}--{H|導入=>zh-tw:匯入; 導入=>zh-hk:匯入; 導入=>zh-mo:匯入;}--{H|zh-hans:换行符;zh-hant:換行字元;}--{H|zh:換行符;zh-hans:换行符;zh-hant:換行字元;}--{H|zh:换行字元;zh-hans:换行符;zh-hant:換行字元;}--{H|zh-cn:链接; zh-tw:連結;}--{H|连结=>zh-cn:链接; 连结=>zh-sg:链接; 连结=>zh-my:链接;}--{H|鏈接=>zh-tw:連結; 鏈接=>zh-hk:連結; 鏈接=>zh-mo:連結;}--{H|鏈結=>zh-tw:連結; 鏈結=>zh-hk:連結; 鏈結=>zh-mo:連結;}--{H|内链=>zh-tw:內部連結; 内链=>zh-hk:內部連結; 内链=>zh-mo:內部連結;}--{H|內鏈=>zh-tw:內部連結; 內鏈=>zh-hk:內部連結; 內鏈=>zh-mo:內部連結;}--{H|外链=>zh-tw:外部連結; 外链=>zh-hk:外部連結; 外链=>zh-mo:外部連結;}--{H|外鏈=>zh-tw:外部連結; 外鏈=>zh-hk:外部連結; 外鏈=>zh-mo:外部連結;}--{H|红链=>zh-tw:紅色連結; 红链=>zh-hk:紅色連結; 红链=>zh-mo:紅色連結;}--{H|紅鏈=>zh-tw:紅色連結; 紅鏈=>zh-hk:紅色連結; 紅鏈=>zh-mo:紅色連結;}--{H|绿链=>zh-tw:綠色連結; 绿链=>zh-hk:綠色連結; 绿链=>zh-mo:綠色連結;}--{H|綠鏈=>zh-tw:綠色連結; 綠鏈=>zh-hk:綠色連結; 綠鏈=>zh-mo:綠色連結;}--{H|蓝链=>zh-tw:藍色連結; 蓝链=>zh-hk:藍色連結; 蓝链=>zh-mo:藍色連結;}--{H|藍鏈=>zh-tw:藍色連結; 藍鏈=>zh-hk:藍色連結; 藍鏈=>zh-mo:藍色連結;}--{H|zh-cn:链入; zh-tw:連入;}--{H|鏈入=>zh-tw:連入;}--{H|zh-hans:日志详情; zh-hant:日誌明細;}--{H|zh-hans:登录; zh-hant:登入;}--{H|zh-hant:登出; zh-hans:退出;}--{H|zh-cn:模块; zh-tw:模組;}--{H|模组=>zh-cn:模块; 模组=>zh-sg:模块; 模组=>zh-my:模块;}--{H|zh-hans:命名空间; zh-hant:命名空間;}--{H|名字空间=>zh-cn:命名空间; 名字空间=>zh-hk:命名空間; 名字空间=>zh-mo:命名空間; 名字空间=>zh-tw:命名空間; 名字空间=>zh-sg:命名空间; 名字空间=>zh-my:命名空间;}--{H|名字空間=>zh-cn:命名空间; 名字空間=>zh-hk:命名空間; 名字空間=>zh-mo:命名空間; 名字空間=>zh-tw:命名空間; 名字空間=>zh-sg:命名空间; 名字空間=>zh-my:命名空间;}--{H|zh-cn:解析器函数; zh-hk:解析器函數; zh-tw:解析器函數;}--{H|zh-cn:参数设置; zh-tw:偏好設定; zh-hk:參數設置;}--{H|zh-hans:项目; zh-hant:專案; zh-tw:專案;}--{H|专案=>zh-cn:项目; 专案=>zh-sg:项目; 专案=>zh-my:项目; 专案=>zh-tw:專案;}--{H|計劃=>zh-cn:项目; 計劃=>zh-sg:项目; 計劃=>zh-my:项目; 計劃=>zh-tw:專案; 計劃=>zh-hk:專案; 計劃=>zh-mo:專案;}--{H|zh-hans:项目页面; zh-hant:專案頁面; zh-tw:專案頁面;}--{H|項目頁面=>zh-tw:計畫頁面; 項目頁面=>zh-hk:專案頁面; 項目=>zh-mo:專案頁面;}--{H|zh-hans:最近更改; zh-hant:近期變更;}--{H|zh-cn:重定向; zh-tw:重新導向;}--{H|zh-cn:重定向页; zh-tw:重新導向頁面;}--{H|重定向页面=>zh-tw:重新導向頁面; 重定向页面=>zh-hk:重新導向頁面; 重定向页面=>zh-mo:重新導向頁面;}--{H|zh-cn:举报; zh-tw:檢舉;}--{H|zh-cn:示例; zh-tw:範例;}--{H|皮肤=>zh-tw:外觀; 皮肤=>zh-hk:外觀; 皮肤=>zh-mo:外觀;}--{H|zh-hans:原始码; zh-hant:原始碼; zh-cn:源代码;}--{H|源代碼=>zh-hk:原始碼; 源代碼=>zh-mo:原始碼; 源代碼=>zh-tw:原始碼; 源代碼=>zh-sg:原始码; 源代碼=>zh-my:原始码;}--{H|源码=>zh-hk:原始碼; 源码=>zh-mo:原始碼; 源码=>zh-tw:原始碼; 源码=>zh-sg:原始码; 源码=>zh-my:原始码;}--{H|源碼=>zh-hk:原始碼; 源碼=>zh-mo:原始碼; 源碼=>zh-tw:原始碼; 源碼=>zh-sg:原始码; 源碼=>zh-my:原始码;}--{H|zh-cn:字符串; zh-tw:字串;}--{H|zh-hans:模板数据; zh-hant:模板資料; zh-tw:模板資料;}--{H|zh-hans:模板文档; zh-hant:模板文件;}--{H|zh-cn:通过; zh-tw:透過;}--{H|zh-cn:撤销; zh-tw:復原;}--{H|撤消=>zh-tw:復原; 撤消=>zh-hk:復原; 撤消=>zh-mo:復原;}--{H|zh-hans:用户; zh-hant:使用者; zh-tw:使用者; zh-hk:用戶;}--{H|zh-cn:用户组; zh-tw:使用者群組; zh-hk:用戶組;}--{H|用户名字空間=>zh-hk:用戶命名空間; 用户名字空間=>zh-mo:用戶命名空間; 用户名字空間=>zh-tw:使用者命名空間;}--{H|用戶名字空间=>zh-hk:用戶命名空間; 用戶名字空间=>zh-mo:用戶命名空間; 用戶名字空间=>zh-tw:使用者命名空間;}--{H|用戶名字空間=>zh-hk:用戶命名空間; 用戶名字空間=>zh-mo:用戶命名空間; 用戶名字空間=>zh-tw:使用者命名空間;}--{H|zh-cn:用户页; zh-tw:使用者頁面; zh-hk:用戶頁;}--{H|用户頁=>zh-tw:使用者頁面;}--{H|用戶页=>zh-tw:使用者頁面;}--{H|用户页面=>zh-tw:使用者頁面;}--{H|使用者頁=>zh-tw:使用者頁面;}--{H|使用者頁面=>zh-tw:使用者頁面;}--{H|用户权限 => zh-tw:使用者權限;用戶權限 => zh-tw:使用者權限;}--{H|用户权 => zh-tw:使用者權限;用戶權 => zh-tw:使用者權限;}--{H|zh-cn:用户框; zh-tw:使用者方塊; zh-hk:用戶框;}--{H|zh-hans:用户名; zh-hant:用戶名; zh-tw:使用者名稱;}--{H|用户名称=>zh-cn:用户名; 用户名称=>zh-my:用户名; 用户名称=>zh-sg:用户名; 用户名称=>zh-tw:使用者名稱;}--{H|用戶名稱=>zh-cn:用户名; 用戶名稱=>zh-my:用户名; 用戶名稱=>zh-sg:用户名; 用戶名稱=>zh-tw:使用者名稱;}--{H|zh-cn:查看; zh-tw:檢視;}--{H|zh-cn:可视化; zh-tw:視覺化;}--{H|zh-cn:监视列表; zh-tw:監視清單;}--{H|zh-cn:档案馆; zh-tw:檔案館;}--{H|档案馆=>zh-cn:档案馆; 档案馆=>zh-sg:档案馆; 档案馆=>zh-my:档案馆;}--{H|zh-hans:当前的破坏; zh-hant:目前的破壞;}--{H|zh-hans:引用; zh-hant:引用;}--{H|zh-hans:共享资源; zh-hant:共享資源;}--{H|zh-cn:全域; zh-tw:全域;}--{H|zh-hans:日志; zh-hant:日誌;}--{H|zh-cn:日志项目; zh-tw:日誌項目;}--{H|zh-hans:主页面; zh-hant:主頁面;}--{H|zh-hans:讯息; zh-hant:訊息;}--{H|zh-hans:本地的; zh-hant:本地的;}--{H|zh-hans:对象; zh-hant:對象;}--{H|zh-hans:执行; zh-hant:執行;}--{H|zh-hans:程序; zh-hant:程序;}--{H|zh-hans:区段; zh-hant:區段;}--{H|zh-hans:签名; zh-hant:簽名;}--{H|zh-hans:支持; zh-hant:支持;}--{H|用户名字空間=>zh-hk:用戶命名空間; 用户名字空間=>zh-mo:用戶命名空間; 用户名字空間=>zh-tw:使用者命名空間;}--{H|用戶名字空间=>zh-hk:用戶命名空間; 用戶名字空间=>zh-mo:用戶命名空間; 用戶名字空间=>zh-tw:使用者命名空間;}--{H|用戶名字空間=>zh-hk:用戶命名空間; 用戶名字空間=>zh-mo:用戶命名空間; 用戶名字空間=>zh-tw:使用者命名空間;}--{H|zh-hans:社群; zh-hant:社群;}-

请参阅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: 中不生效（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.

自定义切换链接文本

<td class="mw-version-versionbox" title="<translate nowrap> The latest stable version is <tvar name=1>1.41</tvar></translate>">
<translate> ≥</translate> 1.41
<translate> MediaWiki version:</translate>

您可以通过在可折叠元素中放置一个类（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;
}

参见

Retrieved from "https://www.linuxwebexpert.com/wiki/index.php?title=Manual:Collapsible_elements/zh&oldid=27677"