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 授权许可。