Универсальный 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 -там есть такая функция. И переключение блоков по наведению мыши. Но “тяжелый” он зараза..
Вот на тестовом сайте поставил.. http://gallery.styledeco.ru/501-2/ Может тут умельцы найдутся пропишут такой функционал.
Комментариев уже слишком много чтобы их читать. Не пора ли из них вынести в эту запись нужное? Например про “вложенные табы”
почта с дефисом Otshelnik-Fm@….. не принимается для комментирования. пришлось точку ставить Otshelnik.Fm@….. Исправьте
На комментариями теперь есть ссылочка “Лучшие комментарии”, там отображаются полезные комментарии, которые являются дополнением к посту.
Дело было в запрете использования больших букв. Исправил, теперь все окей.
ДД! помогите плиз! нужно сделать социальные плагины во вкладках… у меня не получается… для фейсбук, вконтакте и твиттер. что бы они были во вкладках…=(
Вот пример – http://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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://wpos.com.ua/tabs.js"></script>
Нет у вас такого в коде, иначе бы табы работали.
вам скинуть header.php моего сайта дабы вы сами убедились?)
так же в самом шаблоне сайта есть функция добавления скриптов в head, пробую и тоже не работают они!
Спасибо за клевые скрипты, обязательно буду использовать на своих сайтах!
Перепробовал все варианты скриптов…. Не хотят работать! Скрипты подключены. Если увас будет возможность посмотрите пожалуйста http://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ак как грузит плееры всех серий сразу. можно ли как то сделать чтобы каждый таб грузился только по нажатию на него?
Надо искать другой аналогичный скрипт, но с этой функций. Мой такое не предусматривает.