Help:Tab View
出典: Wikia
| Tab View | |
|---|---|
| |
| 区分 | パーサーフック |
| 対象 | 全利用者 |
| 実装状況 | 全プロジェクト |
| ウィキア |
|---|
| Help |
| 拡張機能 |
| ブログ記事 （ブログリスト） 画像の追加 Google Map Google Spreadsheets My Home Inputbox RandomSelection YouTube ニコニコ動画 Tab View RandomImage RSS イメージマップ SyntaxHighlight EditSimilar WikiaStats |
| 編集 |
| 管理者向けガイド |
| 方針 |
| コミュニケーション |
Tab Viewは、既存のページをタブ状に表示するウィキアの拡張機能です。
ただし、この機能を使った場合ページ全体を読み込んでから表示しますので、大量に利用する場合には注意してください。
目次 |
[編集] 基礎
既に作成してあるページを以下のように並べます。
<tabview> ページ1 ページ2 ページ3 </tabview>
こうすると、
という風に表示することができます。
[編集] オプションパラメータ
[編集] タイトルを変更する
タブのそれぞれのタイトルを変更するには、以下のようにします。
<tabview> ページ1|ページ1のタイトル ページ2|ページ2のタイトル ページ3|ページ3のタイトル </tabview>
[編集] キャッシュの無効化
キャッシュを利用している関係で、更新頻度の高いページを表示するとTab Viewでは正常に表示できない場合もあります。その際には、キャッシュを無効にする事で最新データの表示を行うことができます。
<tabview> ページ1|ページ1のタイトル|false ページ2|ページ2のタイトル ページ3|ページ3のタイトル </tabview>
[編集] デフォルトで表示するページを指定する
Tab Viewを利用したページを表示した際に、デフォルトで表示するページを指定できます。
<tabview> ページ1|ページ1のタイトル ページ2|ページ2のタイトル||true ページ3|ページ3のタイトル </tabview>
こうすると、ページ2を最初に表示するようになります。
[編集] パラメータのスキップ
上記パラメータをスキップするには、単にパイプ(|)だけを加えます。
<tabview> ページ1|||true ページ2| ページ3| </tabview>
[編集] デザイン
Tab Viewのデザインを変更するには、以下の要素をMediaWiki:Common.cssなどに記載してください。
/* TabView extension */
/*set the base backcolor of the 'off' tabs */
.yui-navset .yui-nav li
{
background-color: #D4DEE8;
padding-left: 10px;
padding-right: 10px;
}
/*set the background color of the content and the 'on' tab the same*/
.yui-content, .yui-navset .yui-nav li.selected
{
background-color: #E7F2FF;
}
/** style the 'on' tab **/
.yui-navset .yui-nav .selected {
border-style: solid;
border-width: 2px 0 0 0;
border-top-color: #2F5DBA;
}
/* keep the side padding, but enforce no gap between content area and tabs */
.yui-content {
margin-top: 0;
padding-top: 0.25em;
padding-left: 0.5em;
padding-right: 0.5em;
}
[編集] 参考リンク
| This is a new feature on Wikia!
|
- This extension is enabled by default on Wikia.
- Due to restrictions, please see Help:Tab view on Wikia Help for fully working examples if you are reading this page via Shared Help.
Tab view gives an easy way of combining pages into one page with a tab for each sub-page. This can be an attractive and useful view for organising content.
Using tab view
To use this feature, just list the pages you want to include inside the special tabs:
<tabview> Help:Page for tab 1 Help:Page for tab 2 Help:Page for tab 3 </tabview>
This will give you:
Changing tab text
To change the text on the tabs, add a title separated from the page name with a pipe ("|"):
<tabview> Help:Page for tab 1|Tab 1 Help:Page for tab 2|Tab 2 Help:Page for tab 3|Tab 3 </tabview>
This will give you:
Disabling tab cache
If a page is showing very frequently updated information, you may want to force the tab to check for new content on each page load. This can be done with a second pipe. This should be used sparingly.
<tabview> Help:Page for tab 1|Tab 1|false Help:Page for tab 2|Tab 2 Help:Page for tab 3|Tab 3 </tabview>
Preset an open tab
The last variable chooses which tab is open when the page loads. By default, all tabs are closed, but you can choose an open tab by using a third pipe:
<tabview> Help:Page for tab 1|Tab 1 Help:Page for tab 2|Tab 2||true Help:Page for tab 3|Tab 3 </tabview>
This will give you:
Skipping variables
As you can see in the last example, any variables you don't need can be left blank. For example, if you want to have the third tab as the active tab on page load, but not to set any other variables, you would use:
<tabview> Help:Page for tab 1 Help:Page for tab 2 Help:Page for tab 3|||true </tabview>
Parameters
The only parameters available in tabview is "title" and "id". You cannot customize each tabview in the page. Currently it has to be done via site CSS. The parameters are:
<tabview title="..." id="...">
Styling the tabs via CSS
The tabs are styled by the site CSS. It has no styles or formatting by default. You may copy the following CSS (the blue tab style as seen on Wikia Help) to your site's global CSS, i.e. MediaWiki:Common.css.
If you want to change the colours or other styling, then you can add changes to your local CSS, which is located at ...
/* TabView extension */
/*set the base backcolor of the 'off' tabs */
.yui-navset .yui-nav li
{
background-color: #D4DEE8;
padding-left: 10px;
padding-right: 10px;
}
/*set the background color of the content and the 'on' tab the same*/
.yui-content, .yui-navset .yui-nav li.selected
{
background-color: #E7F2FF;
}
/** style the 'on' tab **/
.yui-navset .yui-nav .selected {
border-style: solid;
border-width: 2px 0 0 0;
border-top-color: #2F5DBA;
}
/* keep the side padding, but enforce no gap between content area and tabs */
.yui-content {
margin-top: 0;
padding-top: 0.25em;
padding-left: 0.5em;
padding-right: 0.5em;
}
