No edit summary Tag: rte-source |
m (Removed table of contents which is no needed) Tags: Visual edit Help |
||
(27 intermediate revisions by 18 users not shown) | |||
Line 1: | Line 1: | ||
− | {{enabled by default}} |
+ | {{UCP unavailable}}{{tocright}}{{enabled by default}} |
'''Tab view''' provides an easy way to display multiple content pages in a single article using tabs. This can be an attractive and useful view for organizing content. |
'''Tab view''' provides an easy way to display multiple content pages in a single article using tabs. This can be an attractive and useful view for organizing content. |
||
Line 5: | Line 5: | ||
For a similar extension that doesn't require multiple pages, see [[Help:Tabber|Tabber]]. |
For a similar extension that doesn't require multiple pages, see [[Help:Tabber|Tabber]]. |
||
− | ==Step-by-step== |
+ | == Step-by-step == |
⚫ | |||
− | |||
⚫ | |||
− | |||
: In this example, we've created three subpages to this article, which we will use in our tabs below. They are titled: |
: In this example, we've created three subpages to this article, which we will use in our tabs below. They are titled: |
||
:* [[Help:Tab view/Sample tab content 1]] |
:* [[Help:Tab view/Sample tab content 1]] |
||
:* [[Help:Tab view/Sample tab content 2]] |
:* [[Help:Tab view/Sample tab content 2]] |
||
:* [[Help:Tab view/Sample tab content 3]] |
:* [[Help:Tab view/Sample tab content 3]] |
||
− | |||
* Open the page that you'd like to display tabs on for editing, and switch to [[Help:Editing|source mode]]. |
* Open the page that you'd like to display tabs on for editing, and switch to [[Help:Editing|source mode]]. |
||
− | |||
* Enter your tab code in the following format: |
* Enter your tab code in the following format: |
||
Line 39: | Line 35: | ||
Help:Tab view/Sample tab content 3|Tab 3 |
Help:Tab view/Sample tab content 3|Tab 3 |
||
</tabview> |
</tabview> |
||
+ | {{clr}} |
||
⚫ | |||
− | <br clear=all /> |
||
⚫ | |||
− | |||
⚫ | |||
⚫ | |||
− | |||
− | * Cache |
||
− | * Preset |
||
− | |||
− | We'll explain each of these below. They display in this order: |
||
<pre><tabview> |
<pre><tabview> |
||
Line 54: | Line 44: | ||
</tabview></pre> |
</tabview></pre> |
||
− | ===Disabling tab cache=== |
+ | === 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, followed by the word "false." This should be used '''sparingly''', however, as it can slow down the overall reading experience. |
+ | 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, followed by the word "false." This should be used '''sparingly''', however, as it can slow down the overall reading experience. By default, this option is "true". |
− | <pre |
+ | <pre><tabview> |
Help:Tab view/Sample tab content 1|Tab 1|false |
Help:Tab view/Sample tab content 1|Tab 1|false |
||
Help:Tab view/Sample tab content 2|Tab 2 |
Help:Tab view/Sample tab content 2|Tab 2 |
||
Help:Tab view/Sample tab content 3|Tab 3 |
Help:Tab view/Sample tab content 3|Tab 3 |
||
− | </tabview |
+ | </tabview></pre> |
− | ===Preset an open tab=== |
+ | === Preset an open tab === |
− | The last variable chooses which tab is open when the page loads. By default, |
+ | The last variable chooses which tab is open when the page loads. By default, the first tab is open, but you can choose an open tab by using a third pipe followed by the word "true": |
− | <pre |
+ | <pre><tabview> |
Help:Tab view/Sample tab content 1|Tab 1 |
Help:Tab view/Sample tab content 1|Tab 1 |
||
Help:Tab view/Sample tab content 2|Tab 2||true |
Help:Tab view/Sample tab content 2|Tab 2||true |
||
Help:Tab view/Sample tab content 3|Tab 3 |
Help:Tab view/Sample tab content 3|Tab 3 |
||
− | </tabview |
+ | </tabview></pre> |
This will give you: |
This will give you: |
||
Line 79: | Line 69: | ||
Help:Tab view/Sample tab content 3|Tab 3 |
Help:Tab view/Sample tab content 3|Tab 3 |
||
</tabview> |
</tabview> |
||
+ | {{clr}} |
||
⚫ | |||
− | <br clear=all /> |
||
⚫ | |||
− | |||
⚫ | |||
⚫ | |||
:<code><nowiki><tabview title="..." id="..."></nowiki></code> |
:<code><nowiki><tabview title="..." id="..."></nowiki></code> |
||
− | ===Styling=== |
+ | === Styling === |
− | + | With the "id" parameter in place, you can modify every tab. |
|
+ | Example: |
||
⚫ | |||
+ | |||
+ | <syntaxhighlight lang="css"> |
||
⚫ | |||
/* style goes here for data-tab="flytabs_Example0" (first tab) */ |
/* style goes here for data-tab="flytabs_Example0" (first tab) */ |
||
} |
} |
||
Line 96: | Line 88: | ||
ul.tabs > [data-tab="flytabs_Example2"] { |
ul.tabs > [data-tab="flytabs_Example2"] { |
||
/* style goes here for data-tab="flytabs_Example2" (third tab) */ |
/* style goes here for data-tab="flytabs_Example2" (third tab) */ |
||
− | }</ |
+ | }</syntaxhighlight> |
− | The tabs themselves will appear in a div with the id "flytabs_Example", and their content will be placed in a separate div with the id "flytabs_Example-content-wrapper". |
+ | The tabs themselves will appear in a [[wikipedia:Span_and_div|<code><nowiki><div></nowiki></code>]] with the "id" "flytabs_Example", and their content will be placed in a separate <code><nowiki><div></nowiki></code> with the id "flytabs_Example-content-wrapper". |
⚫ | |||
− | <!-- unwork |
||
⚫ | |||
− | ==Styling the tabs via CSS== |
||
+ | On mobile devices, the indicated pages are shown as a list of links rather than as tabs. This is because tabbed experiences are difficult to operate on mobile devices. |
||
− | Tab view has default styles and formatting provided automatically, but it can also be given a custom style through CSS. You may copy the following CSS (the blue tab style as seen on Wikia Help) to your site's global [[Help:CSS|CSS]]. You can adjust the values in the example below to create a unique color scheme and layout for the tabs. |
||
+ | === View/edit tab content === |
||
− | <pre> |
||
⚫ | Tab view does not provide a simple way to view/edit the original page. This can be troublesome for inexperienced users that want to edit the content inside a tab. Since the tab is actually a link element, a user could right click it and click open to manually follow the link. However there is a script on the Fandom Developers Wiki called [[w:c:dev:TabViewEditLinks|TabViewEditLinks]] that adds the edit links. |
||
− | /*** TabView extension ***/ |
||
+ | === Nesting tabs === |
||
− | /* Style of all unselected tabs */ |
||
+ | Tabview does not handle nested tabs correctly. In other words, pages you include in your tabs cannot have their own tabview section. The viewer will start to experience the issue when they open a tab that contains another tabview section. Although the specifics of the glitch appear to be inconsistent, the general issue is that the content of the first tab will be displayed followed by the intended tab content. Another issue is that the nested tabs will be displayed as a bulleted list of links instead of 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 */ |
||
+ | Once this has occurred, the offending tab's content will display at the end of each of the other tabs. Navigating back to the offending tab may append yet another copy of the tab's content to the end when viewing the other tabs. For example, let's assume we include a 4th page (as "Tab 4") that has its own tabview section. When the viewer opens "Tab 4", they will see the contents of "Tab 1" followed by the contents of "Tab 4". If they navigate to "Tab 3", they will now see the contents of "Tab 3" followed by the contents of "Tab 4". If they navigate to "Tab 4" again and then to "Tab 2", they will see the contents of "Tab 2" followed by 2 copies of the contents of "Tab 4". |
||
− | /* 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 */ |
||
+ | If you wish to have nested tabs, you will need to use [[Help:Tabber|tabber]] instead of tabview. |
||
− | /* Padding between tabs */ |
||
− | .ui-tabs .ui-tabs-nav li |
||
− | { |
||
− | margin: 0 0.2em 1px 0; |
||
− | padding: 0; |
||
− | } |
||
− | /* END Padding between tabs */ |
||
+ | === Search engines === |
||
− | /* Remove the border & space between tabs & content */ |
||
+ | Because a page using Tabview must use JavaScript to extract other pages and insert them elsewhere, the results may slow down the performance of search engine crawling. Additionally, the same page content is shown in multiple result pages. |
||
− | .ui-tabs .ui-tabs-nav |
||
− | { |
||
− | border-bottom: 0 none; |
||
− | margin-bottom: 0; |
||
− | } |
||
− | /* Remove the border & space between tabs & content */ |
||
+ | === Include tags === |
||
− | /* Background color and border of tab content */ |
||
+ | Tabview does not transclude page content. As such, the original page will be displayed and elements such as [[Help:Wikitext|wikitext]] include tags (<code><includeonly></code>, <code><noinclude></code>, and <code><onlyinclude></code>) will show the same content as the source page. |
||
− | .ui-tabs .ui-tabs-panel |
||
− | { |
||
− | background: none repeat scroll 0 0 white; |
||
− | border: 2px groove gray; |
||
− | } |
||
− | /* END Background color and border of tab content */ |
||
⚫ | |||
− | </pre> --> |
||
− | |||
⚫ | |||
− | |||
⚫ | |||
− | Keep in mind that the Tab View "breaks" links when viewed on a mobile device. The HTML generated by the PHP portion of the extension simply creates a list of links wrapped inside a div element. Everything else is handled by the javascript portion of the extension. This would normally be good coding practice, allowing the page to fallback to raw links if Tab View's javascript is unable to load. |
||
− | |||
− | However, the links generated by the PHP code do not direct the user to the actual wiki page. It instead links directly to the render page. This wouldn't be much of a problem until you consider Wikia's mobile site doesn't load Tab View's JS. In fact, the mobile site doesn't load any of the javascript most extensions depend on. Thus anyone following said link on a mobile device is directed to a page with '''only''' the article's content. |
||
− | |||
− | Conventional implementations of code like this would have the link's href point to the original content, and a data attribute point to the render page. |
||
− | |||
− | ===View/Edit Tab Content=== |
||
⚫ | Tab view does not provide a simple way to view/edit the original page. This can be troublesome for inexperienced users that want to edit the content inside a tab. Since the tab is actually a link element, a user could right click it and click open to manually follow the link. |
||
− | |||
⚫ | |||
− | * [https://github.com/Wikia/app/tree/dev/extensions/wikia/TabView/TabView.php Source code of Tabview at Wikia] |
||
* [[Help:Tabber]] |
* [[Help:Tabber]] |
||
− | ==Further help and feedback== |
+ | == Further help and feedback == |
⚫ | |||
− | |||
⚫ | |||
− | |||
⚫ | |||
[[es:Ayuda:Vista en pestañas]] |
[[es:Ayuda:Vista en pestañas]] |
||
− | [[fr:Aide: |
+ | [[fr:Aide:Tab View]] |
⚫ | |||
[[ja:ヘルプ:タブビュー]] |
[[ja:ヘルプ:タブビュー]] |
||
[[pl:Pomoc:Tab view]] |
[[pl:Pomoc:Tab view]] |
||
⚫ | |||
− | [[ru:Справка:Табуляция]] |
||
+ | [[tr:Yardım:Sekme görünümü]] |
||
+ | [[vi:Trợ giúp:Tabview]] |
||
[[zh:Help:標籤展示]] |
[[zh:Help:標籤展示]] |
||
⚫ | |||
− | |||
[[Category:Help|{{PAGENAME}}]] |
[[Category:Help|{{PAGENAME}}]] |
||
+ | __NOTOC__ |
Revision as of 03:31, 18 June 2020
- This feature is not currently available on wikis which use the new Unified Community Platform (UCP).
See this page for more information on the new platform. - This extension is enabled by default on Fandom.
Tab view provides an easy way to display multiple content pages in a single article using tabs. This can be an attractive and useful view for organizing content.
For a similar extension that doesn't require multiple pages, see Tabber.
Step-by-step
- First, you need to create a page of content for each tab you wish to display. These pages can be created anywhere on your wiki.
- In this example, we've created three subpages to this article, which we will use in our tabs below. They are titled:
- Open the page that you'd like to display tabs on for editing, and switch to source mode.
- Enter your tab code in the following format:
<tabview> PAGENAME1|TITLE1 PAGENAME2|TITLE2 PAGENAME3|TITLE3 </tabview>
So, in our example here, we'll enter:
<tabview> Help:Tab view/Sample tab content 1|Tab 1 Help:Tab view/Sample tab content 2|Tab 2 Help:Tab view/Sample tab content 3|Tab 3 </tabview>
This will give us the following tabs:
Customization
In addition to the title, there are two other variables you can customize in your tabs: cache and preset. They are configured in this order:
<tabview> PAGENAME|TITLE|CACHE|PRESET </tabview>
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, followed by the word "false." This should be used sparingly, however, as it can slow down the overall reading experience. By default, this option is "true".
<tabview> Help:Tab view/Sample tab content 1|Tab 1|false Help:Tab view/Sample tab content 2|Tab 2 Help:Tab view/Sample tab content 3|Tab 3 </tabview>
Preset an open tab
The last variable chooses which tab is open when the page loads. By default, the first tab is open, but you can choose an open tab by using a third pipe followed by the word "true":
<tabview> Help:Tab view/Sample tab content 1|Tab 1 Help:Tab view/Sample tab content 2|Tab 2||true Help:Tab view/Sample tab content 3|Tab 3 </tabview>
This will give you:
Parameters
The only parameters available in tabview are "title" and "id". You cannot customize each tabview in the page using wikitext; it has to be done via site CSS. The parameters are:
<tabview title="..." id="...">
Styling
With the "id" parameter in place, you can modify every tab. Example:
ul.tabs > [data-tab="flytabs_Example0"] {
/* style goes here for data-tab="flytabs_Example0" (first tab) */
}
ul.tabs > [data-tab="flytabs_Example1"] {
/* style goes here for data-tab="flytabs_Example1" (second tab) */
}
ul.tabs > [data-tab="flytabs_Example2"] {
/* style goes here for data-tab="flytabs_Example2" (third tab) */
}
The tabs themselves will appear in a <div>
with the "id" "flytabs_Example", and their content will be placed in a separate <div>
with the id "flytabs_Example-content-wrapper".
Issues
Mobile experience
On mobile devices, the indicated pages are shown as a list of links rather than as tabs. This is because tabbed experiences are difficult to operate on mobile devices.
View/edit tab content
Tab view does not provide a simple way to view/edit the original page. This can be troublesome for inexperienced users that want to edit the content inside a tab. Since the tab is actually a link element, a user could right click it and click open to manually follow the link. However there is a script on the Fandom Developers Wiki called TabViewEditLinks that adds the edit links.
Nesting tabs
Tabview does not handle nested tabs correctly. In other words, pages you include in your tabs cannot have their own tabview section. The viewer will start to experience the issue when they open a tab that contains another tabview section. Although the specifics of the glitch appear to be inconsistent, the general issue is that the content of the first tab will be displayed followed by the intended tab content. Another issue is that the nested tabs will be displayed as a bulleted list of links instead of tabs.
Once this has occurred, the offending tab's content will display at the end of each of the other tabs. Navigating back to the offending tab may append yet another copy of the tab's content to the end when viewing the other tabs. For example, let's assume we include a 4th page (as "Tab 4") that has its own tabview section. When the viewer opens "Tab 4", they will see the contents of "Tab 1" followed by the contents of "Tab 4". If they navigate to "Tab 3", they will now see the contents of "Tab 3" followed by the contents of "Tab 4". If they navigate to "Tab 4" again and then to "Tab 2", they will see the contents of "Tab 2" followed by 2 copies of the contents of "Tab 4".
If you wish to have nested tabs, you will need to use tabber instead of tabview.
Search engines
Because a page using Tabview must use JavaScript to extract other pages and insert them elsewhere, the results may slow down the performance of search engine crawling. Additionally, the same page content is shown in multiple result pages.
Include tags
Tabview does not transclude page content. As such, the original page will be displayed and elements such as wikitext include tags (<includeonly>
, <noinclude>
, and <onlyinclude>
) will show the same content as the source page.
See also
Further help and feedback
- Browse and search other help pages at Help:Contents
- Check Fandom Community Central for sources of further help and support
- Check Contacting Fandom for how to report any errors or unclear steps in this article