Универсальные вкладки на JQuery
Сегодня мы будем создавать универсальный JQuery скрипт для вкладок (ТАБОВ) - то есть когда у нас есть содержимое на нескольких вкладках и мы переключаемся между ними без перезагрузки страницы. Здорово, правда? Давайте приступим.
Универсальные вкладки еще и тем, что скрипт позволяет создавать вложенные вкладки. То есть переходим на вкладку №2 и там опять видим вкладки. Не знаю, конечно, кому может потребоваться такая возможность, но мы ее реализуем.
Для начала создадим разметку html:
<div class="tabs-content"> <ul class="tabs"> <li class="current">Первая вкладка</li> <li>Вторая вкладка</li> <li>Третья вкладка</li> <li>Червертая вкладка</li> </ul> <div class="box visible"> <div class="tabs-content"> <ul class="tabs"> <li class="current">Подвкладка 1</li> <li>Подвкладка 2</li> </ul> <div class="box visible"> <h2>Подвкладка 1</h2> <p>Содержание 1 подвкладки</p> </div> <div class="box"> <h2>Подвкладка 2</h2> <p>Содержание 2 подвкладки</p> </div> </div> </div> <div class="box"> <h2>2</h2> <p>Содержание 2 вкладки</p> </div> <div class="box"> <h2>3</h2> <p>Содержание 3 вкладки</p> </div> <div class="box"> <h2>4</h2> <p>Содержание 4 вкладки</p> </div> </div>
Тут все просто - вкладки, подвкладки в первой вкладке, содержимое вкладок в контейнерах box - ничего сложного, разбирать не будем.
Я специально не перегружал пример стилями и добавил только необходимые css:
.box { display: none; } .box.visible { display: block; }
И теперь самое главное - наш скрипт (не забываем подключить свежую библиотеку JQuery):
(function($) { $(function() { $('ul.tabs').delegate('li:not(.current)', 'click', function() { $(this).addClass('current').siblings().removeClass('current') .parents('div.tabs-content').eq(0).find('>div.box').hide().eq($(this).index()).fadeIn(500).show(); return false; }) }) })(jQuery)
Тут стоит отметить то, что при клике по вкладкам (пунктам списка) им присваивается класс current, а содержимому вкладок присваивается класс visible. Еще интересное свойство - .fadeIn(500) - которое означает скорость изменения прозрачности элемента или плавности появления содержимого вкладок. Значение задается в миллисекундах. Можно убрать из кода.
Вот и все - наши универсальные вкладки на JQuery готовы.
Весь код страницы целиком:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Универсальные вкладки на JQuery</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> (function($) { $(function() { $('ul.tabs').delegate('li:not(.current)', 'click', function() { $(this).addClass('current').siblings().removeClass('current') .parents('div.tabs-content').eq(0).find('>div.box').hide().eq($(this).index()).fadeIn(500).show(); return false; }) }) })(jQuery) </script> <style> .box { display: none; } .box.visible { display: block; } </style> </head> <body> <div class="tabs-content"> <ul class="tabs"> <li class="current">Первая вкладка</li> <li>Вторая вкладка</li> <li>Третья вкладка</li> <li>Червертая вкладка</li> </ul> <div class="box visible"> <div class="tabs-content"> <ul class="tabs"> <li class="current">Подвкладка 1</li> <li>Подвкладка 2</li> </ul> <div class="box visible"> <h2>Подвкладка 1</h2> <p>Содержание 1 подвкладки</p> </div> <div class="box"> <h2>Подвкладка 2</h2> <p>Содержание 2 подвкладки</p> </div> </div> </div> <div class="box"> <h2>2</h2> <p>Содержание 2 вкладки</p> </div> <div class="box"> <h2>3</h2> <p>Содержание 3 вкладки</p> </div> <div class="box"> <h2>4</h2> <p>Содержание 4 вкладки</p> </div> </div> </body> </html>
А теперь немного интерактива - код скрипта, в котором запоминается активная вкладка после перезагрузки страницы (с помощью cookie)
(function($) { $(function() { function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } function eraseCookie(name) { createCookie(name,"",-1); } $('ul.tabs').each(function(i) { var cookie = readCookie('tabCookie'+i); if (cookie) $(this).find('li').eq(cookie).addClass('current').siblings().removeClass('current') .parents('div.tabs-content').find('>div.box').hide().eq(cookie).show(); }) $('ul.tabs').delegate('li:not(.current)', 'click', function() { $(this).addClass('current').siblings().removeClass('current') .parents('div.tabs-content').eq(0).find('>div.box').hide().eq($(this).index()).fadeIn(500).show(); var ulIndex = $('ul.tabs').index($(this).parents('ul.tabs')); eraseCookie('tabCookie'+ulIndex); createCookie('tabCookie'+ulIndex, $(this).index(), 365); }) }) })(jQuery)
Код скрипта, в котором запоминается активная вкладка после перезагрузки страницы (с помощью localStorage, меньше кода по сравнению с cookie)
(function($) { $(function() { $('ul.tabs').each(function(i) { var storage = localStorage.getItem('tab'+i); if (storage) $(this).find('li').eq(storage).addClass('current').siblings().removeClass('current') .parents('div.tabs-content').find('>div.box').hide().eq(storage).show(); }) $('ul.tabs').delegate('li:not(.current)', 'click', function() { $(this).addClass('current').siblings().removeClass('current') .parents('div.tabs-content').eq(0).find('>div.box').hide().eq($(this).index()).fadeIn(500).show(); var ulIndex = $('ul.tabs').index($(this).parents('ul.tabs')); localStorage.removeItem('tab'+ulIndex); localStorage.setItem('tab'+ulIndex, $(this).index()); }) }) })(jQuery)
Код скрипта, в котором при переходе по ссылке с якорем, указывающим на номер таба, активируется соответствующий таб
(function($) { $(function() { $('ul.tabs').delegate('li:not(.current)', 'click', function() { $(this).addClass('current').siblings().removeClass('current') .parents('div.tabs-content').eq(0).find('>div.box').hide().eq($(this).index()).fadeIn(500).show(); }) var tabIndex = window.location.hash.replace('#tab','')-1; if (tabIndex != -1) $('ul.tabs li').eq(tabIndex).click(); $('a[href*=#tab]').click(function() { var tabIndex = $(this).attr('href').replace(/(.*)#tab/, '')-1; $('ul.tabs li').eq(tabIndex).click(); }); }) })(jQuery)