Универсальный jQuery-скрипт для блоков с вкладками (табами)

2 марта 2010 г.

Универсальный 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 варианта: с горизонтальными и с вертикальными вкладками.

Скачать

Я не исключаю того, что можно создать аналогичный скрипт меньшего размера (можеть быть он и существует), но пока у меня получилось так, как получилось, и меня это только радует. Вдвойне приятно то, что я пришел к этому сам.

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)

“Хлебные крошки” для WordPress без использования плагина

3 февраля 2010 г.

“Хлебные крошки” - это важный элемент навигации веб-сайта, который повышает его юзабилити. Особенно это касается сайтов со сложной структурой. Я, к сожалению (а, может, и не к сожалению), не использую их на большинстве своих сайтов, возможно, потому, что у них слишком простая структура (для такого сайта, как этот, они, вроде бы, и не нужны). Когда я ... читать полностью »

PHP mxGet - быстрый перенос файлов с одного хостинга на другой

15 января 2010 г.
PHP mxGet - быстрый перенос файлов с одного хостинга на другой

Поскольку за последние несколько лет я постоянно “прыгаю” от одного хостинг-провайдера к другому, то имел и имею дело с такими панелями управления хостингом, как cPanel и ISPmanager. Если в ISPmanager есть все, что мне нужно (это просто обалденная панелька), то в cPanel есть один заметный минус - отсутствует функция загрузки файлов с другого сайта. И что ... читать полностью »

PHP-функция для WordPress “Ответ на комментарий %username%”

24 декабря 2009 г.
PHP-функция для WordPress 'Ответ на комментарий %username%'

Я придумал и реализовал очередную полезную фигнюшку для WordPress ツ Суть Мне очень давно не хватало в WordPress нижеследующих двух простых и, вроде бы, банальных вещей, которые разработчики движка почему-то не додумаются сделать по умолчанию. Обе функции касаются письма, которое получает администратор сайта после того, как на блоге был добавлен новый комментарий. Вот о чем я говорю: Если ... читать полностью »

CSS-трюк: IE, таблица и “резиновые” изображения

16 декабря 2009 г.

Антон Молодой подкинул мне идею для этого поста. Он столкнулся с проблемой, с которой с моей косвенной помощью сам же и справился. Я с этим багом (да, речь пойдет об очередном баге IE) никогда не сталкивался, поэтому решил написать об этом пост, во-первых, как шпаргалку для себя на будущее, во-вторых, вдруг кто-то из читателей и посетителей ... читать полностью »

jQuery: решение проблемы с куками на WordPress при использовании MaxCache

7 декабря 2009 г.

Этот пост адресован пользователям WordPress, у которых стоит кэширование с помощь MaxCache. WordPress имеет в своем функционале две очень хорошие особенности, которые повышают юзабилити сайта для посетителей, оставляющих комментарии: Однажды оставив одобренный администратором сайта комментарий, посетитель избавляется от необходимости при каждом следующем комментарии вновь вводить свои данные, такие, как имя, e-mail, и адрес сайта. Если добавляемый комментарий уходит ... читать полностью »

FireFox и вертикальное выравнивание текста в input[submit]

30 ноября 2009 г.
FireFox и вертикальное выравнивание текста в input[submit]

Либо я плохо искал, либо проблема только у меня и я чего-то не знаю (в чем сомневаюсь), но в Интернете по сабжу ничего не нашел. Поэтому данный пост - это вопрос к читателям. При верстке форм я давно наблюдаю следующую проблемную ситуацию: независимо от версии браузера FireFox, в которой смотрится страница, вертикальное выравнивание текста в кнопке, ... читать полностью »