Главная JavaScript

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

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

Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...

Комментарии (978)

  1. Огромное спасибо Дмитрий, пригодилось. Сделал RT.

  2. спасибо за скрипт, перепробовал несколько вариантов на Maxsite и все криво работали…
    этот же заработал сразу, так что дальше изобретайте такие хорошие «колеса» ;)

  3. Спасибо, но при нажатии на уже открытой вкладке можно вообще ничего не делать.

  4. вариант с jQuery UI не уложится в 4кб :)

  5. К сожалению, в Вашем примере если отключить JavaScript, то текста не будет. Для робото-поисковых систем это не есть гуд.
    Пробовали для этого случая включить контейнеры?

  6. Здорово! мне понравилось. как появится необходимость во вкладках, использую именно этот скрипт

  7. Спасибо за пост, это как-раз то что я искал, с jQuery работаю не давно. Всё чётко и ничего лишнего.
    P. S.
    И ещё спасибо отдельное за предыдущие посты, всё-таки я чего-то научился ;)

  8. Не знаю, надо ли тебе это слышать в очередной раз, но — ты молодец, Дима!

  9. Ачуметь! Плагин бомба. Дима, большой РЕСПЕКТ и УВАЖУХА!

  10. Отличный скрипт, чётко, локанично, и главное — работает! Большое человеческое спасибо.
    Не так давно столкнулся с необходимостью сделать красивый вывод контента на сайте с помошью анимированных табов, так вот для реализации задуманного пришлось использовать довольно громоздкий скрипт, а теперь я вижу что всё намного проще и эффективнее.

    [b]P.S.[/b]
    А вообще в последнее время всё реже встречаются вот такие вот люди как Дмитрий, которые делятся своими наработками с массами, пусть даже ктото скажет: я это придумал уже давно, и пользуюсь. Но ведь этот ктото не пожелел поделиться с людьми… а Дмитрий хотябы нашол время, чтобы расписать, разложить по полочкам для начинающих и не очень вебмастеров нужную информацию.

    [b]P.P.S.[/b]

    Ну и пусть, пусть я «изобрел колесо», главное, что я получаю большое удовольствие от данного процесса

    солидарен с мнением автора.

    • На здоровье. Спасибо за комментарий!

      а Дмитрий хотябы нашол время, чтобы расписать, разложить по полочкам для начинающих и не очень вебмастеров нужную информацию.

      Я для того и веду блог, чтобы делиться интересной и нужной информацией =)

  11. Александр
    14 лет назад

    Здорово!
    Однако, при включении вертикально-расположенных табов, страница неприятно перескакивает вверх. Говорю про онлайн пример.
    Браузер — Опера 10.

    • Такой неприятный эффект происходит тогда, когда переключаемые блоки уходят вниз за границу окна браузера. Когда они полностью влазят в экран, то такого не наблюдается.

      К сожалению, я не знаю, каким образом устранить эту неприятность.

      • Если я правильно понимаю, о чем идет речь, то я данную задачу решил через якоря. Просто поставил табам ссылки на якоря где-то в районе начала нашей конструкции и экран перестал прыгать вверх.

      • Подскажите, кто-то уже нашел решение этой проблемы?

          • Ура! Решил у себя проблему с перепрыгиванием в начало страницы при переключении табов! Вот живой пример: http://injoit.com/what-we-do/

            Реализовал твой код, Dimox, на своем сайте с небольшими изменениями. Вся загвоздка в том, что все div. box необходимо обтянуть еще одним div и для него определить фиксированную высоту!

            Так как у меня контент в табах на сайте постоянно меняется, подключил механизм Math.max.apply для расчета максимально возможной высоты вложенного дива .box. Эту высоту и задавал внешнему диву.

            Для эффекта появления использовал вместо show () animate () с указанием четких параметров:

            (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()).animate({height: 'auto', width: 'auto', opacity: 'show'}, 'slow');
            	})
            
            /*--Определение максимальной высоты для блока-контейнера .box-wrap--*/
            	Array.max = function(array) {
                    return Math.max.apply(Math,array);
                };
            	var heights = $('.box-wrap div.box').map(function() {
                    return $(this).innerHeight();
                }).get();
            	$(".box-wrap").height(Array.max(heights));
            /*--------*/
            
            })
            })(jQuery)
            

            И собственно HTML:

            <div class="section vertical">
            <ul class="tabs">
            	<li class="current"><span>Mobile</span></li>
            	<li><span>Social and Web</span></li>
            	<li><span>Cloud</span></li>
            </ul>
            <div class="box-wrap">
            <div class="box visible">
            ---
            </div>
            <div class="box">
            ---
            </div>
            <div class="box">
            ---
            </div>
            </div>
            </div>
            

            Не знаю, правильно я сделал или нет, но главное ведь, что оно работает) Буду рад услышать твои комментарии по данному поводу.

            • Я недостаточно опытен в JavaScript, чтобы сказать, хорошо это или нет. Главное, что решает проблему. Но, думаю, есть и более изящный способ сделать то же самое.

              • Да, согласен! Мне помог такой метод, но не сама суть использовать именно его.

                Главное тут задать определенную (фиксированную или резиновую) высоту для внешнего дива box-wrap. Можно и просто в стилях, без javascript, указать некую высоту с запасом и все будет гуд)

                Спасибо огромное, Dimox, за твой скрипт для табов! Очень выручил и избавил от использования jQuery UI

            • У меня здесь injoit.com/what-we-do/
              в IE 8.0 не работает.

              • Спасибо, Сергей, за информацию! Уже все исправил.
                Все же следует применять для эффектов функцию fadeIn (), а не animate (), как и предлагал Dimox, тогда все будет работать корректно в IE!

                Реализовал у себя эту строку так:

                .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(500);
                

                В IE6 правда все равно эффекта красивого появления не будет, но это же IE6 (используем стиль — Graceful Degradation :=))

  12. Очень элегантное решение.
    Вопрос: нужно ли для каждого блока табов вставлять отдельную такую функцию или этот скрипт обрабатывает все блоки с табами на странице?

    • Видимо, вы не внимательно читали статью. Я четко написал, что функция в таком случае не разрастается (не дублируется), на то она и универсальная.

  13. Я бы рекомендовал добавить ещё пару-тройку строк кода, чтобы реализовать данное решение в виде метода (плагина) jQuery, для использования в (возможно) позже появившихся (например с ajax-запроса) таб-блоках, на которые существующий код, естественно, не подействует, так как выполняется единожды.
    e.g. $('#foo').myTabs ();

    P. S. Решение хорошее и лёгенькое. Сам однажды такое создал, но с дополнительными хендлерами, запретом нажатия табов, запретом «покидания» таба при определённых условиях и т. п. Но это только потому, что была в этом потребность.

  14. Спасибо.Полезно. Возьму на заметку!

  15. Для полной универсальности, может быть стоит совместить вертикальные и горизонтальные закладки в единое целое.
    Тогда к примеру выбрав в вертикальном табе одну из закладок,
    на ней используем горизонтальные, что несколько расширяет область применения.

    Возможно, есть смысл сделать закрытие вкладки по клику на открытой, тоже весьма полезная фишка.

    • Для полной универсальности, может быть стоит совместить вертикальные и горизонтальные закладки в единое целое.
      Тогда к примеру выбрав в вертикальном табе одну из закладок,
      на ней используем горизонтальные, что несколько расширяет область применения.

      Совсем ничего не понял.

      Возможно, есть смысл сделать закрытие вкладки по клику на открытой, тоже весьма полезная фишка.

      Что значит «закрытие»?

      • Совсем ничего не понял.

        Имеем общий блок.
        Ссылки табов в нем расположены и горизонтально, и вертикально.
        Выбираем одну из закладок по вертикали.
        И на этой закладке пользуемся горизонтальными закладками.
        Или наоборот сначала делаем выбор в горизонтали далее работаем с вертикалью.
        Приблизительно так
        Делал для себя потом забросил :)

        Что значит «закрытие»?

        Клик на ссылке открытого таба превращает все в горизонтальное или вертикальное меню.
        Может быть даже при открытии страницы все табы свернуты.

        • Приблизительно так

          Запихни div.section в div.box другого div.section и получишь то, что надо.

          Клик на ссылке открытого таба превращает все в горизонтальное или вертикальное меню.

          Непонятно, что это и для чего нужно.

          Может быть даже при открытии страницы все табы свернуты.

          Просто удали класс .visible из хтмл-кода и все будут свернуты.

  16. МОТОРИСТ
    14 лет назад

    Добавьте жирный заголовок в текст во вкладке и посмотрите как он будет выглядеть в ИЕ 6,7 при клике на этой вкладке.
    (Шрифт получается «обглоданным»).

  17. Сравните шрифт в горизонт. вкладке (при клике на нее) и внизу (вертикальных вкладках).(в ИЕ 6,7)
    Если решите проблему, то табы будут отличные. Я пока не нашел решения (((.

    • Это проблема браузера. При переключении вкладок он почему-то отключает сглаживание текста.

    • Решается следующим образом. Вместо этих строк:

      p.find('div.box').css({opacity: 0}).hide();
      p.find('div.box:eq('+i+')').animate({opacity: 1}, 500).show();
      

      используйте эти:

      p.find('div.box').hide();
      p.find('div.box:eq('+i+')').show();
      

      Только при этом не будет эффекта плавного появления.

  18. Все верно, собственный вариант всегда лучше стандартного решения из паблика. Именно подобные новшества и выделяют один сайт из числа многих сайтов.
    Хочется много чего реализовать, но пока не хватает компетенции.

  19. (в ИЕ 6,7)

    Есть более простое решение — не использовать гов**браузеры, и прикрутить к сайту скрипт, запрещающий просмотр сайта через IE 6. сколько можно пользоваться браузером, который устарел много лет назад, почему никто не пишет, типа «сайт криво отображается в Opera 7 или FF1 ??

  20. Спс за скрипт. Давно такой искал. Жду новых разработок))

Ваш комментарий