Gorik: jQuery tabsSwitch

Описание Подключение Параметры Ресурсы

Небольшой скрипт для анимированного переключения табов на странице.

  • Подключаем библиотеку jQuery 1.10.0+
  • Добавляем фунцию из файла tabs.switch.js
  • Проставляем классы в HTML:
     .js_tabs - область действия скрипта
     .js_tab_btn - кнопка переключения таба
     .js_tabs_content - область с контентом для каждой кнопки
  • Прописываем атрибут для каждой кнопки:
     data-target-id="target_item_ID", где 'target_item_ID' - это ID блока с контентом для этой кнопки
  • Запускаем скрипт на странице:
        $('document').ready(function(){
           tabsSwitch();
        });
  • Прописываем стили для табов (есть в примере в css/styles.css).
    * Я не особо люблю инлайнить стили скриптом, посему все стили прописаны ручками в css (выделено /*THIS CSS*/)

data-target-id="target_item_ID" - 'target_item_ID' - это ID блока с контентом для этой кнопки.

tbsDuration - переменная в скрипте, отвечает за скорость анимации в ms.

Файл JS tabs.switch.js

Файл CSS (только стили для .select) styles.css

Описание:

Небольшой скрипт для анимированного переключения табов на странице.

Подключение:

  • Подключаем библиотеку jQuery 1.10.0+
  • Добавляем фунцию из файла tabs.switch.js
  • Проставляем классы в HTML:
     .js_tabs - область действия скрипта
     .js_tab_btn - кнопка переключения таба
     .js_tabs_content - область с контентом для каждой кнопки
  • Прописываем атрибут для каждой кнопки:
     data-target-id="target_item_ID", где 'target_item_ID' - это ID блока с контентом для этой кнопки
  • Запускаем скрипт на странице:
        $('document').ready(function(){
           tabsSwitch();
        });
  • Прописываем стили для табов (есть в примере в css/styles.css).
    * Я не особо люблю инлайнить стили скриптом, посему все стили прописаны ручками в css (выделено /*THIS CSS*/)

Параметры:

data-target-id="target_item_ID" - 'target_item_ID' - это ID блока с контентом для этой кнопки.

tbsDuration - переменная в скрипте, отвечает за скорость анимации в ms.

Ресурсы:

Файл JS tabs.switch.js

Файл CSS (только стили для .select) styles.css