Wikia

Community Central

Help:Tab view

Talk13
101,593pages on
this wiki
This extension is enabled by default on Wikia.

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-stepEdit

  • First, you need to create a page of content for each tab you wish to display. These pages can be created anywhere on your wikia.
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:


CustomizationEdit

In addition to the title, there are two other variables you can customize in your tabs:

  • Cache
  • Preset

We'll explain each of these below. They display in this order:

<tabview>
PAGENAME|TITLE|CACHE|PRESET
</tabview>

Disabling tab cacheEdit

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.

<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 tabEdit

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 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:



ParametersEdit

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="...">

StylingEdit

Once you have set an id, you can modify every tab. For example id = 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) */
}


IssuesEdit

Broken Mobile ExperienceEdit

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.

There is a fix (or hack) for this, but it is not supported by Wikia. For more information, contact jgjake2.

View/Edit Tab ContentEdit

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. But, as stated in the issue above, this would take the user to a render page.

There is also a workaround (or hack) to improve user experience. But like above, it is not supported by Wikia. An example can be seen here.

See alsoEdit

Further help and feedbackEdit

Around Wikia's network

Random Wiki