Использование Bootstrap 3 табов без Bootstrap’a

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

Плагин, как и сам bootstrap 3 имеет следующие требования: ie8+, jQuery 1.9.1+ (но не выше 4 версии).

Понадобится лишь следующий код:

Разметка
<div class="twb-tabs">
        <ul class="twb-tablist">
                <li class="active"><a href="#tab1" data-toggle="tab">Таб номер 1</a></li>
                <li><a href="#tab2" data-toggle="tab">Таб номер 2</a></li>
                <li><a href="#tab3" data-toggle="tab">Таб номер 3</a></li>
                <li><a href="#tab4" data-toggle="tab">Таб номер 4</a></li>
        </ul>
        <div class="twb-tab-content tab-content">
                <div id="tab1" class="tab-pane fade in active">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                <div id="tab2" class="tab-pane fade">Aliquam auctor rutrum justo, a laoreet augue luctus sit amet.</div>
                <div id="tab3" class="tab-pane fade">In tortor erat, interdum eget mauris sit amet, rhoncus tincidunt quam.</div>
                <div id="tab4" class="tab-pane fade">Praesent rhoncus fermentum nunc, eu faucibus massa tempor vitae.</div>
        </div>
</div>
Обязательный CSS
.twb-tabs .fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}
.twb-tabs .fade.in {
    opacity: 1;
}
.twb-tabs .tab-content > .tab-pane {
    display: none;
}
.twb-tabs .tab-content > .active {
    display: block;
}

Посмотреть обязательный Javascript код

+function ($) {
  'use strict';

  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
  // ============================================================

  function transitionEnd() {
    var el = document.createElement('bootstrap')

    var transEndEventNames = {
      WebkitTransition : 'webkitTransitionEnd',
      MozTransition    : 'transitionend',
      OTransition      : 'oTransitionEnd otransitionend',
      transition       : 'transitionend'
    }

    for (var name in transEndEventNames) {
      if (el.style[name] !== undefined) {
        return { end: transEndEventNames[name] }
      }
    }

    return false // explicit for ie8 (  ._.)
  }

  // http://blog.alexmaccaw.com/css-transitions
  $.fn.emulateTransitionEnd = function (duration) {
    var called = false
    var $el = this
    $(this).one('bsTransitionEnd', function () { called = true })
    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
    setTimeout(callback, duration)
    return this
  }

  $(function () {
    $.support.transition = transitionEnd()

    if (!$.support.transition) return

    $.event.special.bsTransitionEnd = {
      bindType: $.support.transition.end,
      delegateType: $.support.transition.end,
      handle: function (e) {
        if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
      }
    }
  })

}(jQuery);
/* ========================================================================
 * Bootstrap: tab.js v3.3.7
 * http://getbootstrap.com/javascript/#tabs
 * ========================================================================
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */


+function ($) {
  'use strict';

  // TAB CLASS DEFINITION
  // ====================

  var Tab = function (element) {
    // jscs:disable requireDollarBeforejQueryAssignment
    this.element = $(element)
    // jscs:enable requireDollarBeforejQueryAssignment
  }

  Tab.VERSION = '3.3.7'

  Tab.TRANSITION_DURATION = 150

  Tab.prototype.show = function () {
    var $this    = this.element
    var $ul      = $this.closest('ul:not(.dropdown-menu)')
    var selector = $this.data('target')

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
    }

    if ($this.parent('li').hasClass('active')) return

    var $previous = $ul.find('.active:last a')
    var hideEvent = $.Event('hide.bs.tab', {
      relatedTarget: $this[0]
    })
    var showEvent = $.Event('show.bs.tab', {
      relatedTarget: $previous[0]
    })

    $previous.trigger(hideEvent)
    $this.trigger(showEvent)

    if (showEvent.isDefaultPrevented() || hideEvent.isDefaultPrevented()) return

    var $target = $(selector)

    this.activate($this.closest('li'), $ul)
    this.activate($target, $target.parent(), function () {
      $previous.trigger({
        type: 'hidden.bs.tab',
        relatedTarget: $this[0]
      })
      $this.trigger({
        type: 'shown.bs.tab',
        relatedTarget: $previous[0]
      })
    })
  }

  Tab.prototype.activate = function (element, container, callback) {
    var $active    = container.find('> .active')
    var transition = callback
      && $.support.transition
      && ($active.length && $active.hasClass('fade') || !!container.find('> .fade').length)

    function next() {
      $active
        .removeClass('active')
        .find('> .dropdown-menu > .active')
          .removeClass('active')
        .end()
        .find('[data-toggle="tab"]')
          .attr('aria-expanded', false)

      element
        .addClass('active')
        .find('[data-toggle="tab"]')
          .attr('aria-expanded', true)

      if (transition) {
        element[0].offsetWidth // reflow for transition
        element.addClass('in')
      } else {
        element.removeClass('fade')
      }

      if (element.parent('.dropdown-menu').length) {
        element
          .closest('li.dropdown')
            .addClass('active')
          .end()
          .find('[data-toggle="tab"]')
            .attr('aria-expanded', true)
      }

      callback && callback()
    }

    $active.length && transition ?
      $active
        .one('bsTransitionEnd', next)
        .emulateTransitionEnd(Tab.TRANSITION_DURATION) :
      next()

    $active.removeClass('in')
  }


  // TAB PLUGIN DEFINITION
  // =====================

  function Plugin(option) {
    return this.each(function () {
      var $this = $(this)
      var data  = $this.data('bs.tab')

      if (!data) $this.data('bs.tab', (data = new Tab(this)))
      if (typeof option == 'string') data[option]()
    })
  }

  var old = $.fn.tab

  $.fn.tab             = Plugin
  $.fn.tab.Constructor = Tab


  // TAB NO CONFLICT
  // ===============

  $.fn.tab.noConflict = function () {
    $.fn.tab = old
    return this
  }


  // TAB DATA-API
  // ============

  var clickHandler = function (e) {
    e.preventDefault()
    Plugin.call($(this), 'show')
  }

  $(document)
    .on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
    .on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)

}(jQuery);

Внешний вид получившихся табов можно настроить самостоятельно, в примере используются кастомные стили. При желании можно вытащить и все стили для табов из самого Bootstrap'а.

Посмотреть кастомный CSS

.twb-tabs .twb-tablist{
	list-style: none;
	margin: 0;
	padding: 0;
}
.twb-tabs .twb-tablist:before,
.twb-tabs .twb-tablist:after{
	content:'';
	display: table;
}
.twb-tabs .twb-tablist:after{
	clear:both;
}
.twb-tabs .twb-tablist li{
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
}
.twb-tabs .twb-tablist li a{
	position: relative;
	display: block;
	top:1px;
	text-decoration: none;
	padding: 15px;
	border:1px solid #ccc;
	border-bottom-width:0;
	border-left-width:0;
}
.twb-tabs .twb-tablist li:first-child a{
	border-left-width:1px;
}
.twb-tabs .twb-tablist li.active a,
.twb-tabs .twb-tablist li a:hover,
.twb-tabs .twb-tablist li a:focus,
.twb-tabs .twb-tablist li a:active{
	color: #333;
	background: #fff;
}
.twb-tabs .twb-tablist li.active a{
	z-index: 1;
}
.twb-tabs .twb-tab-content{
	position: relative;
	padding: 15px;
	border:1px solid #ccc;
}
Результат
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam auctor rutrum justo, a laoreet augue luctus sit amet.
In tortor erat, interdum eget mauris sit amet, rhoncus tincidunt quam.
Praesent rhoncus fermentum nunc, eu faucibus massa tempor vitae.

Ссылки таб-навигации обязательно должны иметь атрибут data-toggle="tab", в таком случае никакой дополнительной инициализации не потребуется, их список должен по структуре состоять из тегов <ul>, <li>(может быть и другим тэгом, но так, как <ul> обязателен, то <li> семантически правильней), <a>(может быть и другим тэгом, но необходим href="", поэтому <a> семантически правильней), как в примере. Для того, чтобы какая-то из ссылок таб-навигации была активной при загрузке страницы, ее обертке <li> нужно добавить класс .active, в противном случае ни одна из ссылок при загрузке страницы активной не будет.

За счет классов .tab-pane таб-панели скрываются и появляются. По умолчанию все таб-панели, скрыты, чтобы при загрузке страницы была видна конкретная таб-панель, ей необходимо добавить класс .active вручную. Класс .active нужно добавить хотябы к одной таб-панели, иначе они все будут скрыты по умолчанию. Класс .fade служит для создания эффекта плавного появления и исчезновения таб-панелей, он изменяет opacity элемента на 0. Если вы добавляете класс .fade к таб-панелям, то таб-панели с классом .active нужно дописать класс .in, чтобы ее opacity стал равен 1.

Кстати Плавное появление и исчезновение табов работает в Bootstrap'е за счет CSS3 свойства transition и в старых браузерах, которые это свойство не поддерживают, например в ie9 и ie8, плавные переходы работать не будут, табы просто будут сменять друг друга без эффектов.

В примере ссылки в таб-навигации и таб-панели связаны через id таб-панелей, связи также можно устанавливать через любые CSS способы указания элемента, например .имя_класса или name=[значение].

Пример.Разметка
<div class="twb-tabs">
        <ul class="twb-tablist">
                <li class="active"><a href=".tab1" data-toggle="tab">Таб номер 1</a></li>
                <li><a href="[name='tab2']" data-toggle="tab">Таб номер 2</a></li>
                <li><a href="[title='tab3']" data-toggle="tab">Таб номер 3</a></li>
                <li><a href="[role='tab4']" data-toggle="tab">Таб номер 4</a></li>
        </ul>
        <div class="twb-tab-content tab-content">
                <div class="tab-pane fade tab1 in active">Эта таб-панель активируется через класс .tab1</div>
                <div name="tab2" class="tab-pane fade">Эта таб-панель активируется через атрибут [name='tab2']</div>
                <div title="tab3" class="tab-pane fade">Эта таб-панель активируется через атрибут [title='tab3']</div>
                <div role="tab4" class="tab-pane fade">Эта таб-панель активируется через атрибут [role='tab4']</div>
        </div>
</div>
Живой пример
Эта таб-панель активируется через класс .tab1
Эта таб-панель активируется через атрибут [name='tab2']
Эта таб-панель активируется через атрибут [title='tab3']
Эта таб-панель активируется через атрибут [role='tab4']

Табы, вложенные в другие табы не поддерживаются!

Про дополнительные способы использования, методы и события Bootstrap 3 табов читайте на официальной страничке

Скачать исходники (.ZIP)
Добавить комментарий
Ваше имя (Обязательно)
Ваш e-mail (Обязательно)
Ваш комментарий
Что это? Всатвить код: Link CSS HTML Javascript PHP SQL
Чтобы добавить в комментарий ссылку, стили, разметку или скрипт, оберните его в соответствующий тег с помощью этих кнопок, например [CSS].my-class{margin:0}[/CSS]. Вы можете создать теги обертки с помощью кнопок и вписать туда свой код, или же написав код, выделить его и нажать на кнопку тега, это обернет ваш код в желаемый тег.