ФЭНДОМ


Это расширение подключено на ФЭНДОМЕ по умолчанию.

Табуляция — это возможность создавать на странице вкладки. Для этого используются теги «tabber» и «tabview».

Tabber

С помощью тега tabber можно создавать вкладки со свободным содержимым.

Внутри кода используется формат: Заголовок=Текст

Вкладки разделяются с помощью: «|-|»

Пример
<tabber>
Сериал=1 серия, 2 сезона
|-|
Ссылки=[http://www.google.com Google]<br/>[http://www.cnn.com CNN]<br/>
|-|
Обсудить=Обсуждение
</tabber>

В результате вы получите:

1 серия, 2 сезона

Обсуждение

Вы можете добавить на вкладки любой контент, включая шаблоны и изображения.

Табуляция в шаблонах

Вы можете использовать табуляцию в шаблонах с помощью тега {{#tag:tabber|...}} и {{!}}-{{!}}.

{{#tag:tabber|
Tab1=Param1 shows up {{{1|here}}} if passed.
{{!}}-{{!}}
Tab2=Param2 shows up {{{2|here}}} if passed.
}}
Заголовки верхнего уровня

Заголовки H2 и H3 отключены в этом теге. Вы можете включить их, добавив на страницу MediaWiki:Wikia.css следующий код:

.tabberlive .tabbertab h2, .tabberlive .tabbertab h3 { 
display:block !important; 
}

Tabview

С помощью тега tabview можно добавить на вкладки содержимое других страниц вашей вики. Это могут быть как обычные страницы, так и страницы, специально созданные для вкладок (например, подстраницы текущей страницы).

Внутри кода используется формат: Текст|Заголовок. Новую вкладку пишем с новой строки.

Пример
<tabview>
Справка:Помощники и волонтёры|Помощники и волонтёры
Справка:Аватары|Аватары
Справка:Таблицы|Таблицы
</tabview>

В результате вы получите:


Кэш

Если страница из вкладки часто обновляется, то вы можете добавить false, чтобы содержимое вкладки обновлялось при каждой загрузке страницы.

<tabview>
Справка:Помощники и волонтёры|Помощники и волонтёры|false
Справка:Аватары|Аватары
Справка:Таблицы|Таблицы
</tabview>
Открытие нужной вкладки

Чтобы при загрузке страницы была открыта не первая вкладка, а та, которую хотите вы, используйте значение true. Обратите внимание, что это ключевое слово нужно ставить после двух вертикальных черт, оставляя место для слова, обновляющего кэш.

<tabview>
Справка:Helper|Helper
Справка:Ссылки сюда|Ссылки сюда||true
Справка:Отчёт о тегах|Отчёт о тегах
</tabview>

Настройка внешнего вида

Следующий код позволит настроить внешний вид закладок:

/*** Основные классы Tabber ***/
.tabberlive {
	/* стиль контейнера */
}
ul.tabbernav {
	/* список вкладок */
}
.tabberlive .tabbertab {
	/* стиль содержимого вкладок */
}
.tabberlive > .tabbertab:not(.tabbertabhide) {
	/* стиль отображаемого содержимого */
}
.tabberlive > .tabbernav > li > a {
	/* стиль закладок */
}
.tabberlive > .tabbernav > li > a:hover {
	/* закладка при наведении мыши */
}
.tabberlive > .tabbernav > li > a:active {
	/* закладка при щелчке мыши */
}
.tabberlive > .tabbernav > li.tabberactive > a {
	/* выбранная закладка */
}
.tabberlive > .tabbernav > li.tabberactive > a:hover {
	/* выбранная закладка при наведении мыши */
}
.tabberlive > .tabbernav > li.tabberactive > a:active {
	/* выбранная закладка при щелчке мыши */
}

/*** Основные классы TabView ***/
ul.tabs {/*список вкладок*/}
ul.tabs > [data-tab="flytabs_00"] {/*1ая вкладка*/}
ul.tabs > [data-tab="flytabs_01"] {/*2ая вкладка*/}
...
ul.tabs li.selected {/*активная (выбранная) вкладка*/}
div.tabBody .selected {/*отображаемое содержимое*/}
 /** Содержимое **/
div[id$="content-wrapper"] {
	/*стиль контейнера основного содержимого*/
}
div.tabbody selected  {
	/*стиль контейнера отображаемого содержимого*/
}
 
/*** Классы в случае использования id ***/
/** <tabview id="Example"> позволит создать уникальный стиль для отдельного элемента **/
/* id не должны повторяться, иначе произойдет путаница с правилами */
div#flytabs_Example {
	/*стиль контейнера вкладок*/
}
div#flytabs_Example ul.tabs {/*список вкладок*/}
div#flytabs_Example ul.tabs [data-tab="flytabs_Example0"] {/*1ая вкладка*/}
div#flytabs_Example ul.tabs [data-tab="flytabs_Example1"] {/*2ая вкладка*/}
...
div#flytabs_Example ul.tabs li.selected {/*активная (выбранная) вкладка*/}
 /** Содержимое **/
div#flytabs_Example-content-wrapper {
	/*стиль контейнера основного содержимого*/
}
 /*контейнер содержимого первой/второй/т.д. вкладок*/
div[data-tab-body="flytabs_Example0"],div[data-tab-body="flytabs_Example1"],...

Примеры

Таббер с Warframe wiki

/*** ruElderScrools Tabber ***/
.tabberlive .tabbertab {
 border:none !important;
}
ul.tabbernav {
 font-size: 14px !important;
 background-color: rgba(28, 28, 28, 0.1);
 margin:-5px 0 0 !important;
 padding-bottom:5px !important;
 border:none !important;
 text-align:center;
}
ul.tabbernav li a /*поле закладок*/ {
 background: none !important;
 border:none !important;
}
ul.tabbernav li a:link /*цвет текста закладок*/ {
 color:#000 !important;
}
ul.tabbernav li a:hover /*при наведении на закладку*/ {
 border-bottom:2px solid #000 !important;
}
ul.tabbernav li.tabberactive a /*активная закладка*/ {
 background-color:rgba(229, 229, 229, 0.6) !important;
 border-bottom:2px solid #000 !important;
}

/*** Стилизованный табвью (под стиль таббера с ElderScrollsWiki) для Варфрейм вики ***/
/** http://prntscr.com/5zn0pv ─ http://ru.test.wikia.com/wiki/Секретные_места **/
/*стиль задан для табвью с идентификатором "Secretplaces" (<tabview id="Secret places">)
 и не сработает для иных элементов*/
 
div#flytabs_Secretplaces > ul {
 border-style: none;
 background-color: rgba(28, 28, 28, 0.1);
 font: bold 12px Verdana,sans-serif;
 text-align:center;
}
/*tabs*/
div#flytabs_Secretplaces > ul > li {
 display:inline;
 float:none;
 line-height:20px;
}
 
/*internal tabs style + default border fix*/
div#flytabs_Secretplaces > ul > li > a {
 color:black;
 padding:0px 0.5em;
 border-top-left-radius:0; /* удаление закруглений */
 border-top-right-radius:0;   /* верхних углов */
}
/* удаление подчеркивания ссылки при наведении мыши */
div#flytabs_Secretplaces > ul > li > a:hover {
 text-decoration: none !important
}
/* стиль выбранной закладки */
div#flytabs_Secretplaces > ul > li.selected > a {
 background-color:rgba(28, 28, 28, 0.1);
 border-bottom:2px solid #000 !important;
}

См. также

Материалы сообщества доступны в соответствии с условиями лицензии CC-BY-SA , если не указано иное.