Bootstrap вкладок (Tab) виджет

Tab (Tab) в бутстрапе навигационных элементов , введенных в этой главе. Объединив несколько атрибутов данных, вы можете легко создать вкладку интерфейс. С помощью этого плагина, вы можете поместить содержимое в виде вкладок или вкладок капсулы и даже падение вниз вкладку меню.

Если вы хотите обратиться к отдельным подключаемых функций, вам нужно ссылаться наtab.js.Или, как Bootstrap плагин Обзор упоминается в главе, вы можете обратиться кbootstrap.jsили сжатой версииbootstrap.min.js.

использование

Вы можете включить вкладки в двух направлениях:

• Спомощью атрибутов данных: Вам нужно добавить данные-переключатель = "закладка"илиданных тумблер = "таблетка"на якорь текстовые ссылки.

  Nav нав-вкладкии добавить класс кул,и будет применяться Bootstrap стиль этикетки , а также добавитьнавСЧА таблетки дляулькласса, и будет применяться Bootstrap стиль капсулы .

  <UL класс = "нав нав-табс">
  	<Li> <a href="#identifier" data-toggle="tab"> Главная </a> </ li>
  	...
  </ UL>
  

• По JavaScript: Вы можете использовать вкладки , чтобы включить Javscript, следующим образом :

  $ ( '# MyTab а'). Нажмите кнопку (функция (е) {
    e.preventDefault ()
    $ (Это) .tab ( 'шоу')
  })
  

  Следующий пример демонстрирует различные способы активации различных вкладок:

  // Выберите имя вкладки с помощью $ ( '# myTab в [HREF = "#" профиль]'). Tab ( 'шоу')
  
  // Выбор первой вкладке $ ( '# myTab: Во-первых') вкладку ( 'шоу').
  
  . // Выберите последнюю вкладку $ ( '# MyTab: с последнего') вкладку ( 'шоу')
  
  // Выберите вкладку третий (ноль индексированные)
  $ ( '# MyTab Li: экв (2)') вкладка ( 'шоу').
  

Fade эффект

Если вам необходимо установить вкладки исчезать эффект, добавьте.fade за каждой панели-TAB-.Первая закладка должна быть добавлена.в класса исчезать в исходное содержание, как это показано в следующих примерах:

<Div класс = "Вкладка-контент">
	<Div класс = "закладка-панели замирание в активном" ID = "дом"> ... </ DIV>
	<Div класс = "закладка-панель замирание" ID = "СВН"> ... </ DIV>
	<Div класс = "закладка-панель замирание" ID = "ИОС"> ... </ DIV>
	<Div класс = "закладка-панель замирание" ID = "Java"> ... </ DIV>
</ Div>

примеров

Следующий пример демонстрирует использование вкладок данных свойства (Tab) и подключаемые к выцветанию эффекты:

Результаты следующие:

способ

<Ul класс = "нав нав-язычки" ID = "myTab">
	<Li класс = "активный"> <a href="#identifier" data-toggle="tab"> Главная </a> </ li>
	.....
</ UL>
<Div класс = "Вкладка-контент">
	<Div класс = "закладка-панель активна" ID = "дом"> ... </ DIV>
	.....
</ Div>
<Script>
	$ (Function () {
		. $ ( '# MyTab: с последнего') вкладку ( 'шоу')
	})
</ Script>

примеров

Следующий пример демонстрирует вкладку (Tab) плагин использования методов.tab.В данном примере, Вторая вкладка АктивныеОС IOS:

Результаты следующие:

событие

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

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

примеров

Следующий пример демонстрирует использование вкладок (Tab) плагин события. В данном примере, он будет отображать текущий и предыдущие посещаемые вкладки:

Результаты следующие: