Универсальный jQuery-скрипт для блоков с вкладками (табами)
![Универсальный jQuery-скрипт для блоков с вкладками (табами)](https://dimox.name/wp-content/themes/dimox.name/cache/d0/3c5d75308c610d0_150x100.jpg)
Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...
Комментарии (978)
Огромное спасибо Дмитрий, пригодилось. Сделал RT.
Присоединяюсь к Ивану — Огромное спасибо!
спасибо за скрипт, перепробовал несколько вариантов на Maxsite и все криво работали…
этот же заработал сразу, так что дальше изобретайте такие хорошие «колеса» ;)
Спасибо за очень приятный комментарий! =)
Спасибо, но при нажатии на уже открытой вкладке можно вообще ничего не делать.
вариант с jQuery UI не уложится в 4кб :)
Надо говорить не про 4 Кб, а про 0,4 Кб, именно столько занимает мой скрипт.
Точно :)
ну тем более. Ради табов тащить ядро jQuery-UI не вижу смысла.
К сожалению, в Вашем примере если отключить JavaScript, то текста не будет. Для робото-поисковых систем это не есть гуд.
Пробовали для этого случая включить контейнеры?
Если текст скрыт с помощью CSS, это вовсе не значит, что его не видит поисковый робот.
если javascript отключить то много чего не будет, не только текста
Здорово! мне понравилось. как появится необходимость во вкладках, использую именно этот скрипт
Спасибо за пост, это как-раз то что я искал, с jQuery работаю не давно. Всё чётко и ничего лишнего.
P. S.
И ещё спасибо отдельное за предыдущие посты, всё-таки я чего-то научился ;)
Не знаю, надо ли тебе это слышать в очередной раз, но — ты молодец, Дима!
Конечно, надо =) Спасибо!
Ачуметь! Плагин бомба. Дима, большой РЕСПЕКТ и УВАЖУХА!
Не могу пройти мимо, не написав +1.
Отличный скрипт, чётко, локанично, и главное — работает! Большое человеческое спасибо.
Не так давно столкнулся с необходимостью сделать красивый вывод контента на сайте с помошью анимированных табов, так вот для реализации задуманного пришлось использовать довольно громоздкий скрипт, а теперь я вижу что всё намного проще и эффективнее.
[b]P.S.[/b]
А вообще в последнее время всё реже встречаются вот такие вот люди как Дмитрий, которые делятся своими наработками с массами, пусть даже ктото скажет: я это придумал уже давно, и пользуюсь. Но ведь этот ктото не пожелел поделиться с людьми… а Дмитрий хотябы нашол время, чтобы расписать, разложить по полочкам для начинающих и не очень вебмастеров нужную информацию.
[b]P.P.S.[/b]
солидарен с мнением автора.
На здоровье. Спасибо за комментарий!
Я для того и веду блог, чтобы делиться интересной и нужной информацией =)
Здорово!
Однако, при включении вертикально-расположенных табов, страница неприятно перескакивает вверх. Говорю про онлайн пример.
Браузер — Опера 10.
Такой неприятный эффект происходит тогда, когда переключаемые блоки уходят вниз за границу окна браузера. Когда они полностью влазят в экран, то такого не наблюдается.
К сожалению, я не знаю, каким образом устранить эту неприятность.
Если я правильно понимаю, о чем идет речь, то я данную задачу решил через якоря. Просто поставил табам ссылки на якоря где-то в районе начала нашей конструкции и экран перестал прыгать вверх.
Подскажите, кто-то уже нашел решение этой проблемы?
Пока нет.
Ура! Решил у себя проблему с перепрыгиванием в начало страницы при переключении табов! Вот живой пример: http://injoit.com/what-we-do/
Реализовал твой код, Dimox, на своем сайте с небольшими изменениями. Вся загвоздка в том, что все div. box необходимо обтянуть еще одним div и для него определить фиксированную высоту!
Так как у меня контент в табах на сайте постоянно меняется, подключил механизм Math.max.apply для расчета максимально возможной высоты вложенного дива .box. Эту высоту и задавал внешнему диву.
Для эффекта появления использовал вместо show () animate () с указанием четких параметров:
И собственно HTML:
Не знаю, правильно я сделал или нет, но главное ведь, что оно работает) Буду рад услышать твои комментарии по данному поводу.
Я недостаточно опытен в JavaScript, чтобы сказать, хорошо это или нет. Главное, что решает проблему. Но, думаю, есть и более изящный способ сделать то же самое.
Да, согласен! Мне помог такой метод, но не сама суть использовать именно его.
Главное тут задать определенную (фиксированную или резиновую) высоту для внешнего дива box-wrap. Можно и просто в стилях, без javascript, указать некую высоту с запасом и все будет гуд)
Спасибо огромное, Dimox, за твой скрипт для табов! Очень выручил и избавил от использования jQuery UI
Пожалуйста ;)
У меня здесь injoit.com/what-we-do/
в IE 8.0 не работает.
Спасибо, Сергей, за информацию! Уже все исправил.
Все же следует применять для эффектов функцию fadeIn (), а не animate (), как и предлагал Dimox, тогда все будет работать корректно в IE!
Реализовал у себя эту строку так:
В IE6 правда все равно эффекта красивого появления не будет, но это же IE6 (используем стиль — Graceful Degradation :=))
Очень элегантное решение.
Вопрос: нужно ли для каждого блока табов вставлять отдельную такую функцию или этот скрипт обрабатывает все блоки с табами на странице?
Видимо, вы не внимательно читали статью. Я четко написал, что функция в таком случае не разрастается (не дублируется), на то она и универсальная.
Я бы рекомендовал добавить ещё пару-тройку строк кода, чтобы реализовать данное решение в виде метода (плагина) jQuery, для использования в (возможно) позже появившихся (например с ajax-запроса) таб-блоках, на которые существующий код, естественно, не подействует, так как выполняется единожды.
e.g. $('#foo').myTabs ();
Спасибо.Полезно. Возьму на заметку!
Для полной универсальности, может быть стоит совместить вертикальные и горизонтальные закладки в единое целое.
Тогда к примеру выбрав в вертикальном табе одну из закладок,
на ней используем горизонтальные, что несколько расширяет область применения.
Возможно, есть смысл сделать закрытие вкладки по клику на открытой, тоже весьма полезная фишка.
Совсем ничего не понял.
Что значит «закрытие»?
Имеем общий блок.
Ссылки табов в нем расположены и горизонтально, и вертикально.
Выбираем одну из закладок по вертикали.
И на этой закладке пользуемся горизонтальными закладками.
Или наоборот сначала делаем выбор в горизонтали далее работаем с вертикалью.
Приблизительно так
Делал для себя потом забросил :)
Клик на ссылке открытого таба превращает все в горизонтальное или вертикальное меню.
Может быть даже при открытии страницы все табы свернуты.
Запихни
div.section
вdiv.box
другогоdiv.section
и получишь то, что надо.Непонятно, что это и для чего нужно.
Просто удали класс
.visible
из хтмл-кода и все будут свернуты.Добавьте жирный заголовок в текст во вкладке и посмотрите как он будет выглядеть в ИЕ 6,7 при клике на этой вкладке.
(Шрифт получается «обглоданным»).
Сравните шрифт в горизонт. вкладке (при клике на нее) и внизу (вертикальных вкладках).(в ИЕ 6,7)
Если решите проблему, то табы будут отличные. Я пока не нашел решения (((.
Это проблема браузера. При переключении вкладок он почему-то отключает сглаживание текста.
Решается следующим образом. Вместо этих строк:
используйте эти:
Только при этом не будет эффекта плавного появления.
Это в любом случае лучше чем было. С эффектом думаю можно что-нибудь придумать (прикрутить другой).
Все верно, собственный вариант всегда лучше стандартного решения из паблика. Именно подобные новшества и выделяют один сайт из числа многих сайтов.
Хочется много чего реализовать, но пока не хватает компетенции.
Есть более простое решение — не использовать гов**браузеры, и прикрутить к сайту скрипт, запрещающий просмотр сайта через IE 6. сколько можно пользоваться браузером, который устарел много лет назад, почему никто не пишет, типа «сайт криво отображается в Opera 7 или FF1 ??
Поддерживаю, за исключением запрета просмотра в ИЕ6, для него можно просто ограничить функционал.
Спс за скрипт. Давно такой искал. Жду новых разработок))