Twitter Bootstrap — jQuery плагин tab

В этой статье мы рассмотрим подробно Javascript плагин tab из twitter bootstrap framework. Вызов плагина tab из twitter bootstrap javascript, используя html атрибуты. Минимально необходимая обязательная верстка для плагина Togglable tabs:

<ul class="nav nav-tabs" id="login-or-register">
      <li class="active"><a data-target="#register" href="#" data-toggle="tab">Регистрация</a></li>
      <li><a href="#" data-target="#profile" data-toggle="tab">Авторизация</a></li>
 </ul>
<div class="tab-content">
      <div class="tab-pane active" id="register">
                [содержимое]
     </div>
    <div class="tab-pane active" id="profile">
                [содержимое]
    </div>
</div>

Итак, минимальная разметка осуществляется по следующим правилам:

Для ненумерованного списка ul задаем классы class=»nav nav-tabs» – это приведет к автоматическому подключению плагина tab к заголовкам для вкладок (табов). Далее в ненумерованном списке ul class=»nav nav-tabs» в элементе списка li мы можем указать класс li class=»active», чтобы сделать выбранную вкладку активной.

Внутри элемента ненумерованного списка li должен сразу следовать тег ссылки a с html атрибутом a data-toggle=»tab» (активирует плагин tab из twitter bootstrap для указанного заголовка), html атрибут href у ссылки а должен быть анкором, который связан с содержимым вкладки, указывая на элемент в документе с id, равным анкору.

Причем ссылка должна сразу начинаться с анкора – знака #, не с www, или http://, не со знака косой черты, а именно с анкора #. А элемент, связанный с анкором по id, должен обязательно существовать в документе.

Также можно, как видно из примера, оставить атрибут href ссылки a в покое и не заполнять анкор, а задать связанный элемент через data-target=»#profile», где значение атрибута data-target и есть id связанного в содержимом элемента в контексте страницы с содержимым вкладки (можно передать класс элемента, но по связанному id работать будет быстрее).

Например для заголовка:

<li><a href="#profile" data-toggle="tab">Авторизация</a></li>

Среди дочерних элементов в регионе div class=»tab-content» должен существовать элемент div class=»tab-pane active» id=»profile» (в нем будет располагаться связанное с заголовком содержимое вкладки).

Далее желательно сразу после ненумерованного списка с заглавием расположить обязательный контейнер для содержимого вкладок:

<div class="tab-content">

В котором будут следовать все вкладки, связанные с анкорами заголовков. В нашем случае это вкладки Авторизация и Регистрация:

<div class="tab-content">
<div class="tab-pane active" id="register">
                [содержимое]
     </div>
    <div class="tab-pane active" id="profile">
                [содержимое]
    </div>
</div>

Для выделения содержимого активной вкладки вместе с классом .tab-pane используется класс .active.

Классы стилей для изменения внешнего вида вкладок jQuery плагина tab из twitter bootstrap

.nav, .nav-tabs – управляют внешним видом заголовков ненумерованного стиля, границами общей области заголовков;
.nav li, .nav-tabs li a – управление внешним видом каждого из заголовков;
.nav li.active, .nav li.active a – управление внешним видом активного заголовка вклакди;
.tab-content – управление внешним видом области содержимого вкладок (всей области);
.tab-pane – управление внешним видом содержимого вкладки;
.tab-pane.active – управление внешним видом содержимого активной вкладки;

Javascript методы jQuery плагина tab из twitter bootstrap

.tab(‘show’) – метод предназначен для активации указанной вкладки и ее содержимого (можно по id, или другим удобным способом). Чтобы в нашем примере активировать первую вкладку, необходимо добавить следующий код:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#login-or-register a:first).tab('show');
}
</script>

В виде аргумента jQuery передаем необходимый заголовок вкладки (ссылку а) для активации.

Примечание автора: для увеличения быстродействия достаточно назначить каждой ссылке – заголовку для вкладки (таба) свой id, и вызывать активацию вкладки по умолчанию (например, после загрузки документа) по id ссылки a.

Javascript события плагина tab из twitter bootstrap

.show – событие происходит при выборе новой вкладки (по щелчку по ссылке новой вкладки), но еще до того, как будет отображено содержимое этой вкладки. Кстати, внутри события можно использовать следующие переменные объекта event, как указатели на текущий заголовок вкладки (ссылку, по которой щелкнул посетитель) – event.target, а также переменную event.relatedTarget – как указатель на ссылку – заголовок предыдущей вкладки (если предыдущая вкладка имеется в документе). При этом сам объект event требуется передать в функцию – обработчик события явно, например:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('a[data-toggle="tab"]').on('show', function (event) {
  alert(event.target); // активная вкладка
  alert(event.relatedTarget); // предыдущая вкладка
});
});
</script>

shown – событие происходит при показе текущей вкладки, когда содержимое вкладки уже доступно для взаимодействия с посетителем (вкладка показана полностью). Здесь также доступны: event.target, event.relatedTarget.

Вот, пожалуй, и все, что необходимо знать нам о работе этих плагинов. В этом цикле статей мы ознакомились на конкретном примере верстки формы авторизации/регистрации для сайта с работой jQuery плагинов modal,tab из framework twitter bootstrap, а также познакомились с их методами внедрения и api.

В следующем цикле статей мы рассмотрим jQuery плагин popover из twitter bootstrap в реализации примеров для оповещения пользователя при неверном заполнении формы, а также в реализации примера со всплывающими областями для регистрации, авторизации, компактными по размеру и без необходимости вызова и применения модальных окон.

Поделитесь со своими друзьями