Универсальный jQuery-скрипт для блоков с вкладками (табами)
Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...
Комментарии (978)
Привет Дима. Вопрос? Можно ли отдельно к jQuerry вкладкам применить Css стили отличные от тех, которые используются на сайте. И как это сделать? Проблема в том, что когда применяю стили в том же css? то они влияют и на весь сайт в целом. Заранее спасибо
Похоже, что у вас CSS-классы у табов совпадают с теми, что уже есть на сайте. Значит надо их переименовать, чтобы они были уникальными. Вот классы, которые нужно переименовать (и в CSS-коде, и в HTML-коде):
Спасибо Дим. Я сам тоже догадался все-таки и переделал уже
Жаль в IE не работает, а так отличный вариант.
Должно работать во всех браузерах.
Проверяю в IETester, не в одной версии IE не работает. Можно как-нибудь поправить?
Извиняюсь, не работает только в пятой версии (видимо до этого IETester лагал). Но, хотелось бы чтобы и на пятой работало.
что за, извиняюсь, некрофилия???
даже microsoft даво и официально открестились прекратили поддержку ie6, а вы тут про ie5 говорите))) Неужели где-то ещё его используют?
С луны что-ли свалились? =)
Будьте добры, объясните чайнику как создать файл в формате .js :) Если есть возможность, скиньте его пожалуйста на почту, буду очень признателен. В строку ввёл. html код, как я понял, надо ставлять уже в сам виджет, а вот со скриптом запара)
Нужно открыть программу «Блокнот», либо другой текстовый редактор. Создать новый файл и вставить в него код скрипта. Затем сохранить этот файл с расширением
.js
.В статье есть ссылка на скачку.
Пример с куками не работает пот 1.3.2, для полной статьи не хватает :)
Подскажите пожалуйста как убрать отступы с краев вкладок, чтоб получилось как у вас на блоге -вкладка начинается с самого края.
Отступы регулируются через margin.
Да, действительно классный и удобный скрипт.
Мне особенно понравился он тем, что все добротно просто и понятно — в исходнике 2 файла, для новичков вообще отлично.
Спасибо, хоть и UI пользуюсь, но и этот скрипт себе хватанул :)
А есть такой скрип что он сам переключал блоки? К примеру текстовое содержание на видео, картинку с музыкальным сопровождением, игрушку.
Не знаю.
И чтоб сайт сам продвигал в ПС и автопостинг и блэкджек с дефками))))))
Если вам нужен ротатор контента — гуглите тему каруселей и слайдеров.
WP UI -там есть такая функция. И переключение блоков по наведению мыши. Но «тяжелый» он зараза.
Вот на тестовом сайте поставил. gallery.styledeco.ru/501−2/ Может тут умельцы найдутся пропишут такой функционал.
Комментариев уже слишком много чтобы их читать. Не пора ли из них вынести в эту запись нужное? Например про «вложенные табы»
почта с дефисом Otshelnik-Fm@… не принимается для комментирования. пришлось точку ставить Otshelnik. Fm@… Исправьте
На комментариями теперь есть ссылочка «Лучшие комментарии», там отображаются полезные комментарии, которые являются дополнением к посту.
Дело было в запрете использования больших букв. Исправил, теперь все окей.
ДД! помогите плиз! нужно сделать социальные плагины во вкладках… у меня не получается… для фейсбук, вконтакте и твиттер. что бы они были во вкладках…=(
Вот пример — jsfiddle.net/m5XzP/
спасибо!!!
А еще вопрос, для битрикс 1.7.1 подойдет норм будет во всех браузерах?
Везде будет работать.
спс≠)
еще вопрос=))и т. д.
li class="current">1-я вкладка
2-я вкладка
3-я вкладка
как сделать что бы вместо надписей были картинки просто ссылку сделать на картинку, вместо этих надписей? ну сами логотипы ФБ, ВК
Это делается с помощью CSS.
у меня вкладки не переключаются =((можете помочь dev.bigtown.kz dev / zOcmdTRd
Потому что скрипт не подключен.
вроде подключила
<script src="/js/script-soc.js"></script>
По этому адресу выдается ошибка 404.
Спасибо за помощь! Сделала! =))))
Спасибо за материал, очень помог.
Дима, а вы бы не могли сейчас поделиться именно такими красивыми табами, как у вас на сайте?!
Нет, не хочу, чтобы их копировали.
Понял! Извините)
Но я бы не тупо такие же выложил как у вас, они мне по цветовому оформлению чуть не подходят! Соответственно поигрался бы с цветами, получились бы другие табы! Буду очень признателен, если всё-таки кините ваши мне на мыло ;-) Заранее большое спасибо!
Кстати не могли бы вы посмотреть на моём блоге wpos.com.ua, в сайдабре самом низу, почему ваши табы так отображаются у меня???
Скрипт не подключен и стили не прописаны.
стили прописал в style. css вот эти как я понял
.box {
display: none; /* по умолчанию прячем все блоки */
}
.box.visible {
display: block; /* по умолчанию показываем нужный блок */
}
в HEAD тоже прописано таким образом:
tabs.js естественно создан и лежит по адрессу!
Что я упустил???
Не вижу в коде сайта упоминания скрипта tabs.js.
ВОТ, в HEAD тоже прописано таким образом:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://wpos.com.ua/tabs.js"></script>
Нет у вас такого в коде, иначе бы табы работали.
вам скинуть header. php моего сайта дабы вы сами убедились?)
так же в самом шаблоне сайта есть функция добавления скриптов в head, пробую и тоже не работают они!
Спасибо за клевые скрипты, обязательно буду использовать на своих сайтах!
Перепробовал все варианты скриптов… Не хотят работать! Скрипты подключены. Если увас будет возможность посмотрите пожалуйста styledeco.ru/tabyi/ заранее спасибо!
Причина вот в этом файле, который, подключен к сайту:
http://styledeco.ru/wp-content/themes/vimage/js/dropmenu.jquery.js
В нем находится jQuery 1.2.3, с которым скрипт не работает.
Спасибо Большое! Буду пытается понять для чего собственно этот скрипт (jQuery 1.2.3)подключен. Ну или как альтернатива плагин WP UI
Вместо:
$('ul.tabs').delegate ('li:not (.current)', 'click', function () {
Поставьте:
$('ul.tabs li: not (.current)').live ('click', function () {
Проблема первого элемента в том, что некорректно связываются события через метод delegate, когда разметка с вкладками подгружена через ajax. Второй вариант работает отлично + мы делаем 1 раз выборку, а не 2
еще можно добавить eq (0)
вот сюда. parents ('div.section').eq (0).find ('div.box')
это чтобы делать блок с вкладками внутри такого же переключаемого блока.
все ок. еще бы можно было делать автоматическую смену табов
Отличные табы) спс автору. Но один вопрос. я использую их в dle. и вставляю в табы видео. при открытии страницы с сериалом лагает nак как грузит плееры всех серий сразу. можно ли как-то сделать чтобы каждый таб грузился только по нажатию на него?
Надо искать другой аналогичный скрипт, но с этой функций. Мой такое не предусматривает.