Універсальний jQuery-скрипт для блоків з вкладками (табами)
- вступ Моє знайомство з фреймворком jQuery сталося в 2008-му році, після того, як, одного разу, на...
- Додано 07.03.2010 (оновлено 09.04.2015)
- завантажити
- HTML-код, який потрібно використовувати для скрипта
- Обов'язкові CSS-стилі для вищевказаного HTML-коду
- приклади
вступ
Моє знайомство з фреймворком jQuery сталося в 2008-му році, після того, як, одного разу, на одному з англомовних сайтів я знайшов jQuery-скрипт, який дозволяє створювати блоки з зручними вкладками. Цьому скрипту я присвятив окремий пост на даному блозі.
З тих пір пройшло 2 роки, я набрався певного досвіду в роботі з jQuery, і вищевказаний скрипт перетворився в абсолютно новий скрипт, написаний мною повністю з нуля. Перед цим був ще один варіант даного скрипта, яким я користувався, напевно, рік. Про нього я ніде не писав, та й зараз вже немає сенсу це робити, тому що він втратив свою актуальність.
Чому я називаю свій новий скрипт для jQuery-вкладок універсальним:
- він дозволяє створювати необмежену кількість вкладок в межах одного блоку, при цьому немає необхідності нумерувати вкладки за допомогою CSS-класів, як це було зроблено в старому варіанті ;
- можна створити скільки завгодно таких блоків з вкладками знову ж без необхідності нумерувати ці блоки через CSS-класи;
- вміст jQuery-скрипта, що реалізує вкладки, залишається незмінним (всього 0,3 кілобайт), тобто НЕ розростається в залежність від кількості блоків або вкладок, як це було в старому варіанті, при цьому розмір нового варіанта скрипта не більш розміру скрипта для одного блоку з вкладками з старого варіанту.
Що ж, вистачить сухих слів, переходимо до суті.
до змісту ↑
Код jQuery-скрипта для перемикаються блоків з вкладками
Не забувайте в першу чергу підключити сам фреймворк jQuery (якщо він ще не підключений на вашому сайті), наприклад, так (вставляється між тегами <head> і </ head>):
<Script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </ script>
Я віддаю перевагу «брати» його з Гугла, оскільки, по-перше, велика ймовірність, що у відвідувача, який зайде на сайт, jQuery вже закешовану в браузері (значить сторінка завантажиться швидше), по-друге, швидкість серверів Гугла стабільна і швидка, по-третє, Гугл віддає його в стислому вигляді (gzip), і, наприклад, для версії 1.4.2 розмір складає всього 24 кілобайт в порівнянні з стислому вигляді файлом (70 Кб).
Ось такий у мене вийшов скрипт:
(Function ($) {$ (function () {$ ( 'ul.tabs'). Each (function () {$ (this) .find ( 'li'). Each (function (i) {$ (this) .click (function () {$ (this) .addClass ( 'active'). siblings (). removeClass ( 'active') .parents ( 'div.tabs'). find ( 'div.tabs__content'). eq ( i) .fadeIn (150) .siblings ( 'div.tabs__content'). hide ();});});});})}) (jQuery)
до змісту ↑
Додано 07.03.2010 (оновлено 09.04.2015)
У коментарях підказали ще більш скорочений варіант цього скрипта (зверніть увагу, що для нього потрібно використовувати jQuery не нижче версії 1.7):
(Function ($) {$ (function () {$ ( 'ul.tabs__caption'). On ( 'click', 'li: not (.active)', function () {$ (this) .addClass ( 'active ') .siblings (). removeClass (' active ') .closest (' div.tabs '). find (' div.tabs__content '). removeClass (' active '). eq ($ (this) .index ()) .addClass ( 'active');})})}) (jQuery)
Для тих, хто ще не знає, як підключати цей скрипт - створити файл з розширенням .js, вставити в нього код скрипта і підключити за аналогією c jQuery (див. Вище), природно, замінивши посилання на адресу скрипта.
до змісту ↑
завантажити
Якщо ви бажаєте віддячити автора фінансово, скористайтеся наступною формою, вказавши довільну суму рублів:
до змісту ↑
HTML-код, який потрібно використовувати для скрипта
<Div class = "tabs"> <ul class = "tabs__caption"> <li class = "active"> 1-я вкладка </ li> <li> 2-я вкладка </ li> </ ul> <div class = "tabs__content active"> Вміст першого блоку </ div> <div class = "tabs__content"> Вміст другого блоку </ div> </ div> <! - .tabs ->
Зверніть увагу, що структура HTML-коду суворо прив'язана до скрипту, тому, якщо ви побажаєте змінити назви використовуваних класів, не забувайте їх поміняти і в скрипті.
до змісту ↑
Обов'язкові CSS-стилі для вищевказаного HTML-коду
.tabs__content {display: none; / * За замовчуванням ховаємо все блоки * /} .tabs__content.active {display: block; / * За замовчуванням показуємо потрібний блок * /}
Якщо, наприклад, необхідно, щоб за замовчуванням відображався другий блок, тоді потрібно перемістити клас .active до другого блоку div.tabs__content, а також перемістити клас .active в другій елемент в списку вкладок.
до змісту ↑
приклади
- 1-й приклад .
- 2-й приклад , В якому запам'ятовується активна вкладка після перезавантаження сторінки (за допомогою cookie).
- 3-й приклад , В якому запам'ятовується активна вкладка після перезавантаження сторінки (за допомогою localStorage, менше коду в порівнянні з cookie).
- 4-й приклад , В якому при переході по посиланню з якорем, що вказує на номер таба, активується відповідний таб.
PS Мені в твіттері якось сказали, що я «винаходжу колесо», що такий скрипт вже є в jQuery UI. Ну і нехай, нехай я «винайшов колесо», головне, що я отримую велике задоволення від цього процесу і одночасно підвищую свій досвід в jQuery. Хіба це погано? =)
* * *
Потрібна розробка друкованого каталогу товарів або послуг? створення каталогу в студії «Верстаем.ru» це оптимальне рішення!
Хіба це погано?Потрібна розробка друкованого каталогу товарів або послуг?