Универсальный jQuery-скрипт для блоков с вкладками (табами)
Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге.
С тех пор прошло 2 года, я набрался определенного опыта в работе с jQuery, и вышеуказанный скрипт превратился в абсолютно новый скрипт, написанный мною полностью с нуля. Перед этим был еще один вариант данного скрипта, которым я пользовался, наверное, год. О нем я нигде не писал, да и сейчас уже нет смысла это делать, т.к. он потерял свою актуальность.
Почему я называю свой новый скрипт для jQuery-вкладок универсальным:
- он позволяет создавать неограниченное количество вкладок в пределах одного блока, при этом нет необходимости нумеровать вкладки с помощью CSS-классов, как это было сделано в старом варианте;
- можно создать сколько угодно таких блоков с вкладками опять же без необходимости нумеровать эти блоки через CSS-классы;
- содержимое jQuery-скрипта, реализующего вкладки, остается неизменным (всего 0,4 килобайта), т.е. не разрастается в зависимость от количества блоков или вкладок, как это было в старом варианте, при этом размер нового варианта скрипта не больше размера скрипта для одного блока с вкладками из старого варианта.
Что ж, хватит сухих слов, переходим к сути.
Код jQuery-крипта для переключаемых блоков с вкладками
Не забывайте в первую очередь подключить сам фреймворк jQuery (если он еще не подключен на вашем сайте), например, так (вставляется между тегами <head> и </head>):
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
Я предпочитаю “брать” его с Гугла, поскольку, во-первых, велика вероятность, что у посетителя, который зайдет на сайт, jQuery уже закэширован в браузере (значит страница загрузится быстрее), во вторых, скорость серверов Гугла стабильна и быстра.
Вот такой у меня получился, на мой взгляд, миниатюрный и красивенький скрипт:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | (function($) { $(function() { $('ul.tabs').each(function() { $(this).find('li').each(function(i) { $(this).click(function(){ $(this).addClass('current').siblings().removeClass('current'); var p = $(this).parents('div.section'); p.find('div.box').hide(); p.find('div.box:eq('+i+')').fadeIn(150); }); }); }); }) })(jQuery) |
Для тех, кто еще не знает, как подключать этот скрипт - создать файл с расширением .js, вставить в него код скрипта и подключить по аналогии c jQuery (см. выше), естественно, заменив ссылку на адрес скрипта.
В этом скрипте, кстати, еще реализован эффект плавного появления переключаемых блоков.
HTML-код, который нужно использовать для скрипта
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="section"> <ul class="tabs"> <li class="current">1-я вкладка</li> <li>2-я вкладка</li> </ul> <div class="box visible"> Содержимое первого блока </div> <div class="box"> Содержимое второго блока </div> </div><!-- .section --> |
Обратите внимание, что структура HTML-кода строго привязана к скрипту, поэтому, если вы пожелаете изменить названия используемых классов, не забывайте их поменять и в скрипте.
Обязательные CSS-стили для вышеуказанного HTML-кода
1 2 3 4 5 6 | .box { display: none; /* по умолчанию прячем все блоки */ } .box.visible { display: block; /* по умолчанию показываем нужный блок */ } |
Если, например, необходимо, чтобы по умолчанию отображался второй блок, тогда нужно переместить класс .visible во второй блок div.box, а также переместить класс .current во второй элемент в списке вкладок.
Примеры
- Живой пример jQuery-вкладок вы можете наблюдать прямо на этом блоге в сайдбаре.
- Отдельный пример, который можно скачать ниже. На этот раз представляю 2 варианта: с горизонтальными и с вертикальными вкладками.
Скачать
Универсальный jQuery-скрипт для блоков с вкладками
Загрузок: 144 | Размер: 4 Кб
Я не исключаю того, что можно создать аналогичный скрипт меньшего размера (можеть быть он и существует), но пока у меня получилось так, как получилось, и меня это только радует. Вдвойне приятно то, что я пришел к этому сам.
P.S. Мне в твиттере как-то сказали, что я “изобретаю колесо”, что такой скрипт уже есть в jQuery UI. Ну и пусть, пусть я “изобрел колесо”, главное, что я получаю большое удовольствие от данного процесса и одновременно повышаю свой опыт в jQuery. Разве это плохо? =)
Обновление от 07.03.10
Спасибо пользователю Keleran, который в комментариях подсказал еще более сокращенный вариант скрипта (обратите внимание, что для него нужно использовать jQuery не ниже версии 1.4.2):
1 2 3 4 5 6 7 8 9 10 | (function($) { $(function() { $('ul.tabs').delegate('li:not(.current)', 'click', function() { $(this).addClass('current').siblings().removeClass('current') .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150); }) }) })(jQuery) |
![FireFox и вертикальное выравнивание текста в input[submit]](http://dimox.name/wp-content/uploads/2009/11/input-submit-screenshot.png)