FANDOM


本頁使用了標題或全文手工轉換

统一社区平台(Unified Community Platform,UCP)的wiki目前无法使用此功能。
更多有关新平台的信息,请参见此页
此擴展功能在Fandom上已經預設啟用

標籤展示(Tab view),是一種工具,可以利用標籤,在同一篇文章中展示不同頁面的內容,在組織內容時非常實用。

關於另一個不需要多個頁面的類似展示功能,參見 標籤器

步驟

  • 首先,你需要創建幫每個想要展示的標籤創建頁面。這頁面可以是在wiki上的任何位置。
在這個例子中,我們已經先創建了三個子頁面,將會用在標籤上,它們的名稱為:
  • 打開想要展示這些標籤的頁面,編輯並進入源代碼模式
  • 按至以下輸入代碼:
<tabview>
頁面標題1|標籤名稱1
頁面標題2|標籤名稱2
頁面標題3|標籤名稱3
</tabview>

因此,在我們的例子中,會輸入:

<tabview>
Help:標籤展示/標籤1內容|標籤 1
Help:標籤展示/標籤2內容|標籤 2
Help:標籤展示/標籤3內容|標籤 3
</tabview>

結果會顯示如下:


自訂

除了標籤名稱之外,有兩個變項是你可以自訂的:

  • 緩存(Cache)
  • 預設(Preset)

我們將會在後面段落介紹,它們在語法中的排列依序如下

<tabview>
頁面名稱|標籤名稱|緩存|預設
</tabview>

關閉標籤緩存

如果一個頁面常常需要更新資訊,你可能會希望在每次頁面載入時,都讓標籤去檢查最新內容,亦即不要使用緩存,在緩存那一欄(第三欄)位中打上「false」即可設定。但這個設定最好儘量少用,因為它會讓網頁開啟的速度變慢。

以下的例子即設定讓標籤1不使用緩存。

<tabview>
Help:標籤展示/標籤1內容|標籤 1|false
Help:標籤展示/標籤2內容|標籤 2
Help:標籤展示/標籤3內容|標籤 3
</tabview>

選擇預設的標籤

這個變項是用來設定當頁面開啟時預設顯示的標籤內容。一般預設所有的標籤為關閉,但你可以使用第4欄位加上「true」,讓這個標籤預設為開啟:

以下的例子即讓標籤2預設為開啟。

<tabview>
Help:標籤展示/標籤1內容|標籤 1
Help:標籤展示/標籤2內容|標籤 2||true
Help:標籤展示/標籤3內容|標籤 3
</tabview>

這樣會顯示為:


參數

標籤展示的參數包括"title"和"id"。你可以自訂每一個標籤展示。目前這個設定需要透過CSS。其中的參數為:

<tabview title="..." id="...">

修改樣式

你如果設定好了一個id,你可以調整每一個標籤,例如,id = Example

ul.tabs > [data-tab="flytabs_Example1"] {
	/* style goes here for data-tab="flytabs_Example1" */
}
ul.tabs > [data-tab="flytabs_Example2"] {
	/* style goes here for data-tab="flytabs_Example2" */
}
ul.tabs > [data-tab="flytabs_Example3"] {
	/* style goes here for data-tab="flytabs_Example3" */
}

用CSS來設定標籤樣式

標籤展示會自動顯示它預設的樣式,但也可以在CSS中自訂。你可以剪貼以下的CSS(藍色的標籤樣式)到你的wiki的 CSS中,你也可以如以下例子調整標籤的顏色和配置等。

/*** TabView extension ***/

/* Style of all unselected tabs */
.yui-navset .yui-nav li
{
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    background-color: #D9D9D9;
    color: #3A3A3A;
    font-size: 12px;
    margin-top: 7px;
    padding: 6px 20px 3px;
}
/* END Style of all unselected tabs */

/* Style of the selected tab */
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a
{
    background-color: #7FB5D7;
    color: white;
    font-weight: bold;
}
/* END Style of the selected tab */

/* Padding between tabs */
.ui-tabs .ui-tabs-nav li
{
    margin: 0 0.2em 1px 0;
    padding: 0;
}
/* END Padding between tabs */

/* Remove the border & space between tabs & content */
.ui-tabs .ui-tabs-nav
{
    border-bottom: 0 none;
    margin-bottom: 0;
}
/* Remove the border & space between tabs & content */

/* Background color and border of tab content */
.ui-tabs .ui-tabs-panel
{
    background: none repeat scroll 0 0 white;
    border: 2px groove gray;
}
/* END Background color and border of tab content */

注意事項

手機板面問題

  • 標籤展示(tabview)行動裝置上不能正確顯示,鏈接會破壞。由這個擴展的PHP部分所產生的HPML,只會產生扭曲的連結清單列表。其他部分則會由它的javascript所設定。如果標籤展示的javascript無法載入,它會使頁面變回原來的連結樣貌。

然而,PHP代碼產生的連結不會讓使用者進入真正的wiki頁面,它會直接連結到另外開啟的頁面。這個問題在無法載入標籤展示JS的時候才會出現。在行動裝置上延著連結會被導入一個只有該文章內容的頁面。

原本使用這樣的代碼會讓連結指向原始內容,而使用數據屬性點會到另開啟的頁面。

查看/編輯 標籤內容

標籤尉示功能沒有一個簡單的查看和編輯原始頁面的方式,對於不熟悉但想編輯內容的用戶來說可能十分困擾。標籤實際上是一個連結元素,使用者可以點擊它並手動打開連結。但是如上所說,這會讓用戶進入另一個開啟的頁面。

其他

  • 避免使用兩層的標籤展示(tabview),即不可以於標籤展示的頁面存在任何的標籤展示,這樣會造成Wiki錯誤, 導致嚴重問題。如果有類似需要,只能其中一層使用一般的鏈接或模板,另一層再使用tabview,或是於同一頁面上,以上下兩個段落顯示兩個不同的標籤展示(tabview)
  • 標籤展示(tabview)只能顯示真實頁面,並不能創建頁面。任何未存在或不存在的頁面會一律被隱藏(或無視)。

另參見

除了特别提示,社区内容遵循CC-BY-SA 授权许可。

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+