Tabs: Difference between revisions

Revision as of 18:54, 30 November 2016

This article is about creating a tabbed user interface in a MediaWiki installation.

Single Page

If all the content you want to display in a tabbed interface lives on a single page, then the UI is accomplished using the Extension:HeaderTabs extension:

Some content for the first tab

Something really exciting is here in the second tab.

Wow, we're on to tab 3 now.

In conclusion, I'd like to thank all the tabs for their work in creating this formidable display of jQuery Tabs in a Wiki.

Multiple Page

Another method involves connecting multiple pages together into a wizard or tutorial with a tabbed navigation. An example of this latter technique is the series of pages at https://en.wikipedia.org/wiki/Wikipedia:Tutorial

The interface for this technique involves using the page tabs template and the result looks like this:

@@ Line 1: / Line 1: @@
+__NOTOC__
 This article is about creating a tabbed user interface in a MediaWiki installation.
 == Single Page ==
-There are a few ways of doing this.  One method involves presenting the content of a single page in a tabbed interface; kind of a showcase or slideshow.  We'll document that method later.
+If all the content you want to display in a tabbed interface lives on a single page, then the UI is accomplished using the [[mw:Extension:HeaderTabs|Extension:HeaderTabs]] extension:
+= Tab 1 =
+Some content for the first tab
+= Tab 2 =
+Something really exciting is here in the second tab.
+= Tab 3 =
+Wow, we're on to tab 3 now.
+= Tab 4 =
+In conclusion, I'd like to thank all the tabs for their work in creating this formidable display of jQuery Tabs in a Wiki.
+<headertabs/>
 == Multiple Page ==