Найлегший плагін jQuery для створення вкладок (табів)

50

Пропоную на розгляд дуже простий і напевно, найлегший плагін jQuery, для створення вкладок(табів), за допомогою якого, ви зможете організувати на своїх сайтах, висновок контенту у вигляді динамічних, перемикаються блоків з вмістом.

Писав плагін давно і для себе, хотілося мати під рукою надійний, простий в налаштуванні і використанні інструмент, який може бути включений в роботу на будь-якому сайті або блозі замовника. Стилі вкладок сформував загалом за стандартом і дбайливо упакував в окремий файл (tabs-style.css), який ви можете підключити до документа, або скопіювавши його вміст, вставити в базову таблицю стилів вашого сайту.
Зараз, звичайно, можна обійтися і без javascript для створення «табів», зробити все на чистому CSS3, про це я розповідав раніше, але плагін забезпечує більш впевнену підтримку всіма браузери: Google Chrome, Mozilla Firefox, Opera, Safari, IE (8.0+).

Плагин jQuery для создания вкладок(табов)

Усього кілька рядків коду JQuery, самий мінімум, і ваші вкладки(таби) прекрасно працюють. По ідеї, вкладок може бути необмежена кількість, кількість вкладок обмежується лише розмірами контейнера, у який ви зумієте втиснути сам блок «табів», так що…

Все, що вам потрібно, це заздалегідь підключена бібліотека jQuery, сам плагін dm-tabs.js і набір правил css, для формування стилів вкладок.
Для підключення актуальної версії бібліотеки jQuery і плагіна dm-tabs.js у секції між тегами …, а краще всього (чому? — гугл в допомогу…) в кінці сторінки, перед закриваючим тегом , необхідно прописати наступне:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
<script src="js/dm-tabs.js">

Код jQuery-скрипта:

Скрипт вийшов зовсім крихітний, весь «фарш» займає всього лише кілька рядків:

(function(s) {
var n;
s(".tabs").on("click", "li:not(.active)", function() {
n = s(this).parents(".tabs_block"), s(this).dmtabs(n)
}), s.fn.dmtabs = function(n) {
s(this).addClass("active").siblings().removeClass("active"), n.find(".box").eq(s(this).index()).show(1, function() {
s(this).addClass("open_tab")
}).siblings(".box").hide(1, function() {
s(this).removeClass("open_tab")
})
}
})(jQuery);

(function(s) {
var n;
s(“.tabs”).on(“click”, “li:not(.active)”, function() {
n = s(this).parents(“.tabs_block”), s(this).dmtabs(n)
}), s.fn.dmtabs = function(n) {
s(this).addClass(“active”).siblings().removeClass(“active”), n.find(“.box”).eq(s(this).index()).show(1, function() {
s(this).addClass(“open_tab”)
}).siblings(“.box”).hide(1, function() {
s(this).removeClass(“open_tab”)
})
}
})(jQuery);

При підключенні до документа, незабутній правильно вказати посилання на адресу скрипта, приклад (див. вище), каталог(папка) куди ви запхнете скрипт може відрізнятись, так що будьте пильні))).

HTML-Розмітка вкладок:

Вкладки не потребують яких-небудь окремих ідентифікатори, або href атрибути у посиланнях навігації, для прив’язки їх до блоків з вмістом. Для виділення активної вкладки при завантаженні сторінки, ви можете вказати клас active, за замовчуванням відкритої завантажується перша вкладка, щоб призначити іншу вкладку спочатку відкритою, додайте клас active потрібного вам пункту

  • , а відповідного блоку з вмістом

    • Вкладка1
    • Вкладка2
    • Вкладка3

    Зміст першої вкладки...

    Зміст другої вкладки...

    Зміст третьої вкладки...

    • Вкладка1
    • Вкладка2
    • Вкладка3

    Зміст першої вкладки…

    Зміст другої вкладки…

    Зміст третьої вкладки…

    Блок вкладок відмінно вписується в будь батьківського контейнера, за замовчуванням заданий інтервал зміни розмірів ширини з максимального 600px до 300px — мінімальний розмір, при якому вкладки коректно відображаються при використанні в невеликих блоках сторінки (бічна панель, в статтях і т. д…). При перегляді вкладки «автоматом» підлаштовуються під розміри екранів різних користувацьких пристроїв.

    CSS-стилі вкладок:

    В стилях особливо не буйствував, постарався зробити все по мінімуму. Вас ніхто і ніщо не обмежує, «тюнингуйте» вкладки як хочете))). Невеликі коментарі до коду, допоможуть вам розібратися, який селектор, за що відповідає.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    
    /* базовий контейнер вкладок */
    .tabs_block {
    width: 100%;
    max-width: 600px;
    min-width: 300px;
    margin: 0 auto;
    }
    .tabs_block:after {
    content:"";
    display:block;
    clear:both;
    }
    /* панель вкладок навігації */
    .tabs {
    margin: 0;
    padding: 0;
    list-style: none;
    float:left;
    }
    /* список вкладок */
    .tabs li {
    text-align:center;
    float:left;
    padding:8px 15px;
    background:#48c3d6;
    margin-right:1px;
    cursor:pointer;
    color:#fff;
    -webkit-transition:all .2s linear 0s;
    -webkit-transition-delay:.2s 0s;
    transition:all .2s linear 0s;
    }
    /* активна вкладка */
    .tabs li.active {
    background:#fdfdfd;
    color:#4F5559;
    }
    /* блоки вкладок змістом */
    .box {
    background:#fdfdfd;
    width:96%;
    padding:5px 2% 6px;
    display:none;
    text-align: left;
    float: left;
    }
    /* параграф всередині вкладок */
    .box p {
    margin-bottom: 15px;
    }
    /* активний блок при завантаженні */
    .visible, .open_tab {
    display: block;
    }
    /* картинки всередині вкладок */
    .box img {
    width: 25%;
    height: auto;
    }
    /* картинки ліворуч */
    .pl-left {
    float:left;
    margin:5px 15px 5px 0;
    }
    /* картинки праворуч */
    .pl-right {
    float:right;
    margin:5px 0 5px 15px;
    }
    /* прибираємо вирівнювання на маленьких екранах */
    @media (max-width: 300px) {
    .tabs, .tabs li {
    float: none;
    }
    }

    /* базовий контейнер вкладок */
    .tabs_block {
    width: 100%;
    max-width: 600px;
    min-width: 300px;
    margin: 0 auto;
    }
    .tabs_block:after {
    content:””;
    display:block;
    clear:both;
    }
    /* панель вкладок навігації */
    .tabs {
    margin: 0;
    padding: 0;
    list-style: none;
    float:left;
    }
    /* список вкладок */
    .tabs li {
    text-align:center;
    float:left;
    padding:8px 15px;
    background:#48c3d6;
    margin-right:1px;
    cursor:pointer;
    color:#fff;
    -webkit-transition:all .2s linear 0s;
    -webkit-transition-delay:.2s 0s;
    transition:all .2s linear 0s;
    }
    /* активна вкладка */
    .tabs li.active {
    background:#fdfdfd;
    color:#4F5559;
    }
    /* блоки вкладок змістом */
    .box {
    background:#fdfdfd;
    width:96%;
    padding:5px 2% 6px;
    display:none;
    text-align: left;
    float: left;
    }
    /* параграф всередині вкладок */
    .box p {
    margin-bottom: 15px;
    }
    /* активний блок при завантаженні */
    .visible, .open_tab {
    display: block;
    }
    /* картинки всередині вкладок */
    .box img {
    width: 25%;
    height: auto;
    }
    /* картинки ліворуч */
    .pl-left {
    float:left;
    margin:15px 5px 5px 0;
    }
    /* картинки праворуч */
    .pl-right {
    float:right;
    margin:5px 0 15px 5px;
    }
    /* прибираємо вирівнювання на маленьких екранах */
    @media (max-width: 300px) {
    .tabs, .tabs li {
    float: none;
    }
    }

    От і все! Компоненти плагіна підключені, вкладки оформлені, залишається тільки наповнити змістом.

    Передбачена можливість використання на сторінці кількох блоків вкладок, для цього додатково нічого не потрібно. Ініціалізація плагіна по накатаній, достатньо правильно прописати шлях до файлу js. На демо-сторінці спеціально розмістив два блоки вкладок, так що можете подивитися приклад.
    Так, для прикладу, використовував вбудовані зображення всередині вкладок. Картинки в «табах» ви можете відправити, як ліворуч, так і праворуч, для цього досить додати тегу img відповідний клас class=”pl-left” або class=”pl-right”. Позиції зображень визначаються через float: right і float: left відповідно.
    Зображень всередині вкладок, виставив значення ширини %, тим самим забезпечивши можливість пропорційного зміни, при зміні розмірів базового контейнера вкладок (табів). Звичайно ж, ніхто і ніщо не заважає вам використовувати фіксовані розміри картинок:)

    На валідність і різного роду помилки особливо не перевіряв, працює, не спотикається, а що ще нуна.
    Исходники упакував в архів і закинув на Яндекс.диск, від туди сміливо і забирайте.

    ДемоСкачать

    Для тих кому, з якогось переляку, раптом знадобляться вкладки з можливістю вкладення однієї в іншу, спеціально замутив невеликий приклад реалізації вкладок (табів) з нескінченною вкладеністю

    З Повагою, Андрій .

    Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: