標籤展示(Tab view),是一種工具,可以利用標籤,在同一篇文章中展示不同頁面的內容,在組織內容時非常實用。
關於另一個不需要多個頁面的類似展示功能,參見Tabber。
由於Fandom考慮停止支援該擴充功能,TabView的使用在UCP平台上將受到限制。強烈建議您的wiki不要增加新的Tabview代碼。
步驟[]
- 首先,你需要創建幫每個想要展示的標籤創建頁面。這頁面可以是在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)只能顯示真實頁面,並不能創建頁面。任何未存在或不存在的頁面會一律被隱藏(或無視)。
參見[]
- Wikia標籤展示的源代碼(英文)
- 標籤器