Skip to content

Плагин для реализации адаптивных табов, превращающихся в селект

License

Notifications You must be signed in to change notification settings

pafnuty/tabsToSelect

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

tabsToSelect

Плагин для реализации табов, превращающихся в селект с колбэками и адаптивностью.

пример

HTML

<div class="tts-tabs">
    <ul class="tts-tabs-switchers">
        <li class="tts-tabs-switcher active">таб 1</li>
        <li class="tts-tabs-switcher">таб 2</li>
        <li class="tts-tabs-switcher">таб 3</li>
    </ul>

    <div class="tts-tabs-item active">контент таба 1</div>      
    <div class="tts-tabs-item">контент таба 2</div> 
    <div class="tts-tabs-item">контент таба 3</div> 
</div>

минимум js для работы плагина

$.tabsToSelect();

js (полный пример)

$.tabsToSelect({
    // Класс, добавляемый с селекту
    selectCalss: 'styler', 
    // Класс, добавляемый с обёртке селекта
    selectWrapperCalss: 'styler-wrapper', 
    // Куда вставлять сформированный селект (селектор внутри блока с табами)
    selectAppendTo: '',
    onInit: function () {
       // Срабатывает при инициализации плагина
    },
    beforeTabSwich: function (e) {
        // Срабатывает перед сменой активного таба
        // Если функция вернёт false - смена таба не произойдёт
    },
    afterTabSwich: function (e) {
        // Срабатывает после смены активного таба
    },
    onResized: function () {
        // Срабатывает при изменении размера окна
    }
});

About

Плагин для реализации адаптивных табов, превращающихся в селект

Resources

License

Stars

Watchers

Forks

Packages

No packages published