Extension:Header Tabs
 Release status: stable |
|||
|---|---|---|---|
| Implementation | Parser function, User interface | ||
| Description | Displays top-level headers as tabs, using jQuery or YUI | ||
| Author(s) | Sergey Chernyshev, Yaron Koren | ||
| Last version | 0.9.2 (April 2012) | ||
| MediaWiki | 1.16 or greater | ||
| License | GPL | ||
| Download | Download section Version history |
||
| Example | Wiki of the Month on semantic-mediawiki.org | ||
|
|||
| Check usage and version matrix | |||
This extension transforms top-level MediaWiki headers into tabs using the jQuery and jQuery UI Javascript libraries. (With MediaWiki 1.16, the Yahoo! User Interface (YUI) Javascript library is used instead.)
Contents |
Usage [edit]
To enable tabs on a page after you installed the extension, you need to add a
<headertabs />
tag into the page in place where the last tab should end (everything below this tag will be shown under the tab view). Most of the time, though, you'll want to put it at the bottom of the page.
In addition to that, the page should have top-level headers defined in it like this:
= Header title =
Each such top-level header, if it's anywhere above the <headertabs/> tag, will be displayed as a tab.
Linking to tabs [edit]
You can link to a tab, both from another page and from within that same page (and, within that same page, both from another tab and from outside the tab view). This is done using the {{#switchtablink}} parser function, which is called like this:
{{#switchtablink:Tab name|Link text|Page name}}
This will create a link to the tab with the name "Tab name", and the text of the link will read "Link text". If you want the link to a point to a tab on another page, you can optionally add the third parameter, "Page name".
Semantic MediaWiki factbox [edit]
In addition to user-defined tabs, Header Tabs can convert the Semantic MediaWiki factbox into a tab, and add it as the last tab in the tab view. This feature is currently only works in MediaWiki 1.16 and lower.
Example [edit]
Some text above the tab view
= First section header =
This will be displayed on the first tab
{{#switchtablink:Second section header|Click here to go to the next tab...}}
= Second section header =
This will be displayed on the second tab
<headertabs/>
= Third section header =
This will be always displayed under the tab view
because it's below the <headertabs/> tag.
The header titles get automatically converted into tab titles.
Download [edit]
You can download the Header Tabs code, in .tgz format, here.
You can also download the code directly via Git from the MediaWiki source code repository. From a command line, call the following:
git clone https://gerrit.wikimedia.org/r/p/mediawiki/extensions/HeaderTabs.git
To view the code online, including version history for each file, go here.
 |
You can also download this extension as part of Semantic Bundle, which includes Header Tabs, as well as some other very interesting extensions. |
Installation [edit]
First, download the code into your wiki's /extensions/ folder.
Then add the following to LocalSettings.php:
require_once("$IP/extensions/HeaderTabs/HeaderTabs.php");
Skin modification [edit]
If you wish to change the jQuery UI tabs styling in MW 1.17+, please see the "JQueryStyles" section concerning the use of the $htStyles configuration variable.
If you want to override the YUI skin in MW 1.16 or earlier, feel free to modify your skin in the 'skins-yui' directory and assign skin class (e.g. yui-skin-sam) to <body> tag. See YUI skinning documentation for more details.
Configuration parameters [edit]
The following parameters can be changed in the LocalSettings.php file below the require_once(...).
In MediaWiki 1.16 and lower, only the $htUseHistory setting, out of all of these, is available and enabled.
$htUseHistory [edit]
The $htUseHistory variable defines whether tab navigation should be tracked within the browser history and within the URL, updating the hash value. By default this variable is set to true, i.e. history is used. You can disable it by adding the following:
$htUseHistory = false;
$htRenderSingleTab [edit]
The $htRenderSingleTab variable defines if Header Tabs will activate if only a single top-level header is found. By default this variable is set to false, i.e. no tabs will be shown if only one top-level header is found. You can enable this behaviour by adding the following:
$htRenderSingleTab = true;
$htAutomaticNamespaces [edit]
The $htAutomaticNamespaces variable defines the set of namespaces for which you don't need to add the <headertabs /> tag in order to enable tabs. If a namespace ID is defined in this variable, header tabs will activate automatically when you have two top-level headers (or one, if you have $htRenderSingleTab set to true) in an article. By default this variable holds no namespaces. You can add namespaces to this list by adding the following for each namespace:
$htAutomaticNamespaces[] = NS_MAIN;
$htDefaultFirstTab [edit]
The $htDefaultFirstTab variable defines whether Header Tabs puts any content before the first defined header and put it into its own tab. By default this variable is set to false. You can enable this behavior by adding the default name using the following:
$htDefaultFirstTab = 'DefaultTabName';
If using this setting, be careful not to enable $htRenderSingleTab as it will lead to tabs appearing in other parts of the UI.
$htDisableDefaultToc [edit]
The $htDisableDefaultToc variable defines whether Header Tabs will disable the MediaWiki article's table of contents (TOC) when tabs are enabled for a given article. This saves you the trouble of having to add __NOTOC__ to your article. If tabs are not enabled because of a lack of top-level headers, the table of contents will appear as usual. By default this variable is set to true, i.e. the MediaWiki TOC is disabled if header tabs are shown. You can disable this behavior by adding the following:
$htDisableDefaultToc = false;
$htGenerateTabTocs [edit]
The $htGenerateTabTocs variable defines if Header Tabs will try to generate a TOC for each tab. By default this variable is set to false, i.e. no tab TOCs will be generated. You can enable this behavior by adding the following:
$htGenerateTabTocs = true;
$htEditTabLink [edit]
The $htEditTabLink variable defines if Header Tabs will add a edit link to the right of the tabs which let you edit only the tabs' text. By default this variable is set to true, i.e. a edit link for the tab will be shown. You can disable this behavior by adding the following:
$htEditTabLink = false;
$htStyle [edit]
The $htStyle variable defines what visual style is used for the tabs. By default this variable is set to 'jquery-large'. You can change the style by adding the following:
$htStyle = 'style-name';
Styles included with the extension are:
| Name | Description | Screenshot |
|---|---|---|
| jquery | The basic styling provided by MediaWiki - it makes text smaller and links black. | |
| jquery-large | The default style. It makes the text normal-size and turns links blue (or red) again. | |
| bare | Similar formatting to the jquery-large style, but without most of the borders and background colors, so that the only real change to the page is the tabs themselves. |
A wider selection of user-made styles as well as information about how to create your own styles is on our /JQueryStyles page.
Version history [edit]
To see a list of changes for each version, see version history. For a list of features planned for future releases, please see roadmap.
Changes since version 0.8.3:
- Extension:Configure support
- new 1.17+ options:
- jquery to use RL
- $htRenderSingleTab
- $htAutomaticNamespaces
- $htDefaultFirstTab
- $htDisableDefaultToc
- $htGenerateTabTocs
- $htEditTabLink
- $htStyle
- style 'jquery-large'
- style 'bare'
- history navigation
- MediaWiki TOC links now work
Known limitations and issues [edit]
- When used with MediaWiki 1.16 and lower, this extension may break custom skins, because it overrides styles like body, table, pre, code etc. (it uses default YUI reset styles)
- You cannot use the tag more than once. In other words, a second tag will not produce a second series of tabs.
- Tabs render on top of infoboxes in Chrome
- Incompatibility issues with other extensions:
- Header Tabs, when used with the MathJax extension, leads to faulty HTML, which results in a broken display in at least the Firefox web browser. (Things might have changed as Extension:MathJax has been updated. You can at least disable that extension by including __NOMATHJAX__ on a specific page.)
- Header Tabs doesn't work with Extension:Terminology. The header tabs don't appear. Try Extension:Lingo instead.
- Using Extension:UsabilityInitiative, HT 0.8+, and MW 1.16.4+ will result in header tabs not working as described (due to a jQuery conflict).
- When used with Extension:AddThis (or the Widget version & WidgetsFramework) or Extension:FancyBoxThumbs, only the first tab is shown with FireFox and no icons with Safari.
Sites using this extension [edit]
See here for a list of wikis. If you use this extension, please add a link to your wiki at the bottom of this list.
Support [edit]
The best way to seek help with this extension is to send questions the to mediawiki-l mailing list. The extension maintainers, and active users and contributors, are on this list and will be able to help you.
