jQuery FlexTabs

        

        <!-- jQuery FlexTabs Styles -->
        <link rel="stylesheet" href="dist/jquery.flextabs.min.css">

        <!-- jQuery FlexTabs Theme Default -->
        <link rel="stylesheet" href="dist/jquery.flextabs.theme-default.min.css">

        <!-- jQuery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <!-- jQuery FlexTabs -->
        <script src="dist/jquery.flextabs.min.js"></script>

        
      

    $('[data-ft]').flexTabs({
      // Параметры...
    });

  

    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">>path d="M48.293 23.293l-16.293 16.293-16.293-16.293-1.414 1.561 17 17.146h1.414l17-17.146z"/></svg>'

  

    {
      // Общий контейнер
      container: 'ft-container',

      // Общий контейнер. Режим: Tabs
      mtb: 'ft-tabs',

      // Общий контейнер. Режим: Accordion
      mac: 'ft-accordion',

      // Контейнер для содержимого вкладок
      contents: 'ft-contents',

      // Контейнер для вкладок
      nav: 'ft-nav',

      // Вкладка
      tab: 'ft-tab',

      // Вкладка, содержащая иконку
      tabIcon: 'ft-tab-icon',

      // Контент вкладки
      content: 'ft-content',

      // Контейнер с иконкой
      icon: 'ft-icon',

      // Активная вкладка/контент
      active: 'active'
    }

  

    $('.example').flexTabs({
      breakpoint: 1024,
      fade: 500,
      icon: false
    });

  

    var options = { /* Параметры... */ },
      newOpts = { /* Новые параметры... */ },

      example = $('.example');

    // Варианты Init, Reinit, Destroy
    example.flexTabs(); // Инициализация с пар-ми поум.
    example.flexTabs(options); // Инициализация с польз. пар-ми
    example.flexTabs('init', options); // Инициализация с польз. пар-ми
    
    example.flexTabs('reinit', newOpts); // Реинициализация с новыми example
    example.flexTabs('reinit'); // Реинициализация с текущими пар-ми

    example.flexTabs('destroy'); // Деинициализация
    
    // Управление вкладками
    example.flexTabs('open', 0); // Открыть первую вкладку
    example.flexTabs('close', 0); // Закрыть первую вкладку
    example.flexTabs('closeAll'); // Закрыть все вкладки
    example.flexTabs('switch', 0); // Переключить первую вкладку

    // Смена режима отображения
    example.flexTabs('changeMode', 'tabs'); // Переключиться в режим "tabs"
    example.flexTabs('changeMode', 'accordion'); // Переключиться в режим "accordion"
    ex.flexTabs('changeMode', 'tabs', false, function() {
      // Откл. смену режима при изменении ширины окна браузера
      this.settings.responsive = false;
    }); // Переключиться в режим "tabs" принудительно

  

    var example = $('.example');

    example.on('afterOpen.ft', function(e, instance, targetTab) {
      console.log( 'beforeClose: ', e, instance, targetTab );
      /* Аргументы:
        e - объект события
        instance - экз. "класса" FlexTabs для элемента, на котором вызвано событие
        targetTab - объект целейвой вкладки
      */
    });

    example.flexTabs(); // Инициализация
  

    /* Изменение параметров по умолчанию (свойство): */
    FlexTabs.defaults.event = 'mouseover';

    /* Изменение параметров по умолчанию (объект): */
    $.extend(true, FlexTabs.defaults, {
      theme: 'ft-theme-new',
      fade: 0
    });

    /* Далее инициализация... */
    $('.example').flexTabs();
  
  

  $('.example').flexTabs({
    theme: 'ft-theme-default'
  });
  

    // Добав. прелоадер в объект настроек по умолчанию
    FlexTabs.defaults.preloader = 
      '<div class="ft-preloader">' +
      '<svg width="25" height="25" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a"><stop stop-color="#222" stop-opacity="0" offset="0%"/><stop stop-color="#222" stop-opacity=".631" offset="63.146%"/><stop stop-color="#222" offset="100%"/></linearGradient></defs><g transform="translate(1 1)" fill="none"><path d="M36 18c0-9.94-8.06-18-18-18" stroke="#222" stroke-width="2"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"/></path><circle fill="#222" cx="36" cy="18" r="1"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"/></circle></g></svg>' +
      '</div>';

    var example = $('.example');

    example.on('afterOpen.ft', function(e, instance, targetTab) {

      // Контент загружен — выход
      if( targetTab.loaded ) return;

      // Вбросить прелоадер в область с контентом
      targetTab.preloader = $(FlexTabs.defaults.preloader);
      targetTab.content.append(targetTab.preloader);

      $.ajax({
        method: 'POST',
        url: 'ajax-content.php',
        data: {},
        success: function(data) {
          var data = $(data);

          // Убрать прелоадер
          targetTab.preloader.fadeOut(500, function() {

            // Вбросить контент вкладки
            data.hide()
             .appendTo(targetTab.content)
             .fadeIn(500);

            // Вкладка загружена
            targetTab.loaded = true;

          });
          
        },
        error: function(data) {
          // Ошибка AJAX...
        }
      });

    });

    // Инит
    example.flexTabs();