Главная › JavaScript

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

978 комментариев

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

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

Смотрите также

Создаем удобные, практичные вкладки с помощью jQuery

50 комментариев

Внимание! Нижеизложенная статья на данный момент не актуальна. Вместо нее читайте статью “Универсальный jQuery-скрипт для блоков с вкладками (табами)“. * * * Примерно последние месяц-два на англоязычных блогах мне стали ...

Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)

66 комментариев

Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по ...

Добавляем кнопку “Google +1” в панель от Share42.com

68 комментариев

На своем другом блоге я недавно объяснил, почему в данный момент кнопка “Google +1” не может быть добавлена в моем сервисе Share42.com, о чем все просят. Однако прямо сейчас на ...

Красивые всплывающие подсказки с помощью jQuery

144 комментария

Внимательные пользователи моего сайта Share42.com заметили, что на нем с определенной поры появились красивые всплывающие подсказки, и меня попросили рассказать, как такое сделать. Поэтому я хочу поделиться с вами моим ...

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

  1. Иван Синявский
    14 лет 6 месяцев назад

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

  2. Guga
    14 лет 6 месяцев назад

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

  3. Sun
    14 лет 6 месяцев назад

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

  4. Антон Молодой
    14 лет 6 месяцев назад

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

  5. hardmid
    14 лет 6 месяцев назад

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

  6. Kykyryzo
    14 лет 6 месяцев назад

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

  7. artanik
    14 лет 6 месяцев назад

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

  8. Малашкин
    14 лет 6 месяцев назад

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

  9. BuxFactor
    14 лет 6 месяцев назад

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

  10. ПафНутиЙ
    14 лет 6 месяцев назад

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

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

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

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

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

    • Dimox
      14 лет 6 месяцев назад / ответ на коммент ПафНутиЙ

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

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

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

  11. Александр
    14 лет 6 месяцев назад

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

    • Dimox
      14 лет 6 месяцев назад / ответ на коммент Александр

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

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

      • Dimalash
        13 лет 11 месяцев назад / ответ на коммент Dimox

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

      • ITech
        12 лет 9 месяцев назад / ответ на коммент Dimox

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

          • ITech
            12 лет 9 месяцев назад / ответ на коммент Dimox

            Ура! Решил у себя проблему с перепрыгиванием в начало страницы при переключении табов! Вот живой пример: 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>

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

            • Dimox
              12 лет 9 месяцев назад / ответ на коммент ITech

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

              • ITech
                12 лет 9 месяцев назад / ответ на коммент Dimox

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

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

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

            • Sergei
              12 лет 9 месяцев назад / ответ на коммент ITech

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

              • ITech
                12 лет 9 месяцев назад / ответ на коммент Sergei

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

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

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

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

  12. Neolot
    14 лет 6 месяцев назад

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

  13. anStream
    14 лет 6 месяцев назад

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

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

  14. Ramazan
    14 лет 6 месяцев назад

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

  15. gordi
    14 лет 6 месяцев назад

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

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

    • Dimox
      14 лет 6 месяцев назад / ответ на коммент gordi

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

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

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

      Что значит “закрытие”?

      • gordi
        14 лет 6 месяцев назад / ответ на коммент Dimox

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

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

        Что значит “закрытие”?

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

        • Dimox
          14 лет 6 месяцев назад / ответ на коммент gordi

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

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

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

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

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

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

  16. МОТОРИСТ
    14 лет 6 месяцев назад

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

  17. MOTORIST
    14 лет 6 месяцев назад

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

  18. Апокалиптик
    14 лет 6 месяцев назад

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

  19. ПафНутиЙ
    14 лет 6 месяцев назад

    (в ИЕ 6,7)

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

  20. spiller
    14 лет 6 месяцев назад

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

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