Универсальный jQuery-скрипт для блоков с вкладками (табами)
Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...
Комментарии (978)
Dimox спасибо за обзор
пару вопросов:
пытаюсь подключить скрипт через functions. php
wp_enqueue_script ('tabs', get_template_directory_uri ().'/js/tabs.js', array ('jquery'),'1.0');
скрипт находиться здесь
site/js/tabs.js - не получается так подключить
только через
header.php
если я подключаю через header. php то вижу что скрипт грузиться на всех страницах, а надо только на тех где используется код
в чем может быть проблема?
и еще одни вопрос
в css примера есть строка
* {margin: 0; padding: 0;}
я вставляю код в свой style. css и естетсанно летит весь диз,
а без * {margin: 0; padding: 0;} табы кривые
подскажите как применить «нулевые отступы к табам в style. css
и что обозначает зведочка
/*
*/
Dimox на вашем сайте супер приятное оформление
могли бы вы выложить пример css табов вашего сайта?
Не знаю. Я всегда подключаю через header. php
ul.tabs, ul. tabs li {margin: 0; padding: 0;}
Это комментарий к коду.
Не хочу, чтобы его копировали.
Сделал tab’ы и в один из них еще один tab, при нажатии на внутрений tab, переключаются внешние.
тоже не могу понять как правильно реализовать горизонтальный таб в вертикальном
Действительно хороший пример — перелопатил кучу примеров реализации табов на jQuery — этот самый простой, без сумасшедших css, когда вообще не ясно, что и где править, чтобы подогнать под себя, без кучи подключаемых плагинов js. В общем, спасибо!
Пожалуйста. Рад, что скрипт полезен. Спасибо за отзыв.
Dimox, спасибо! отличный скрипт, скажи пожалуйста, во втором варианте с запоминанием активной вкладки, где можно указать время на которое он будет запоминать?
На сколько я понимаю вот здесь:
date. setTime (date.getTime ()+(days*24*60*60*1000));
А что написать чтобы он на час запоминал?
Указывается в этой строке вместо цифры 365 (это количество дней):
А чтобы в часах сделать, нужно редактировать строку, которую вы указали. Только я не знаю, что в ней менять.
date.setTime (date.getTime ()+(days*60*60*1000));
createCookie ('tabCookie'+ulIndex, $(this).index (), 1);
этого должно быть достаточно :)
Спасибо за ответы!
Доброго времени суток. У меня проблема. Тяяжело разобраться самому, вот хочу спросить. Скачал тему для вордпресс, там в самой теме статичный сайдбар должен отображаться в вкладках, как у вас: Последние, Популярные, Новостные. Но он почемуто не работает, вкладки то отображаются, а само содержимое отображается по типу обычного сайдбара, пример на вашем: Верхний блок Последние (там же отображаются и другие вкладки и Популярные и Новостные) а ниже блок Популярные, еще ниже Новостные. Тоесть вкладки то отображаются, но блоки разбитые на три часи. Все не отображается в одном, как у вас. В чем тут проблема? ответьте здесь, или мне на мыло. Плиз. Я не вебмастер, прошу ответ как чайнику.
Видимо, в каком-то место код неправильно вставляете.
Я не вставлял ничего. Там стандартно в теме должно так отображаться, я хочу узнать какие могут быть причины?
Тогда обращайтесь к создателю темы, а не ко мне. Я не знаю, что там у вас в коде.
в ИЕ работает, а Опере не хочет, хоть в чем причина может быть?
Dimox, доброго времени. В Opera 11 tab’ы не переключаются:(
Вот тут можно убедится…
Оч прошу помочь решить проблему!
Спасибо
Где «тут»?
Странно, ссылка не вставилась…
вот тут: www.a-lab.name/ не работает
Вкладки Краснодар и Омск.
Вместо jQuery версии 1.4.2 подключите версию 1.4.4, с ней должно работать.
Спасибо огромное!
Действительно, с 1.4.4 работает!!!
Здравствуйте!
Подскажите, пожалуйста…
У меня табы съезжают в Internet Explorer…
Уже не знаю, что и делать.
В Opera и FireFox все ок…
Вот сайт: world-of-photo.ru/
Извините, не люблю разбираться в чужой верстке.
хороший скрипт, вот беда то, ни как не могу подгрузить его аяксом ((. Т. Е есть страница на которой аяксом грузится содержимое из бд. Хотел прикрутить ваш скрипт, но ни как ((есть варианты???
Огромное спасибо!
Очень лакончино, как раз то, что надо!
Здравствуйте!
А гугл за display: none банит сайты???
С чего бы это?
А у меня в IE почему-то едет все…
То, что нужно)) Автору большое-пребольшое спасибо)
Здравствуйте!
Dimox, приходилось ли Вам видеть те несколько функций из jQuery-скрипта, — нужные для работы блоков с табами, — отдельно? Или может есть фреймворк меньших размеров (10−20 кб) для их создания?
Это необходимо, потому что предполагается вписать его в тело другого скрипта.
Все мои поиски результата не принесли.
Не приходилось.
Тут в архиве, кстати (дать прямую ссылку не получилось), лежит фреймворк на 30 кб, против обычных 70-ти и выше.
Лучше jquery грузить с гугла. Он отдает ее в сжатом виде и довольно быстро. Сам пользуюсь. Вот адрес ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2 — и работает она с вкладками замечательно и вес 24 килобайта и ооочень большой + что возможно она уже есть у посетителей вашего сайта. т.к. большинство сайтов в интернете используют именно её, а не собственноручно кастрированную версию. Посмотреть вкладки можете на главной странице моего блога — там я встроил 2 раза их. И это говорит что этот код работает. Нужно лишь чуть чуть включить голову.
Вы, судя по всему, не внимательно читали мой первый пост, — нужно лишь чуть чуть включить голову, — и многие умствования отпадут.
Вы хотели из оригинального jquery вырезать необходимые функции чтоб не использовать его полностью. И я вам привел несколько доводов ЗА использование фреймворка полностью
Владимир, я хотел в конечном итоге вписать его в тело другого скрипта. Но, не важно…
Если интересно, здесь получил ответ.
Здравствуйте. Есть очень важный вопрос. Я хочу поделить вкладки на — ОПИСАНИЕ- ЦЕНЫ — ОТЗЫВЫ. И если человек допустим будет искать отзывы и с гугла его закинет на страницу то вкладка отзывов не бутет активна или как??? Если нет то как этого добится???
И еще, не глупо ли вообще помещать отзывы в одну из вкладок??? Очень прошу помочь.
Не будет.
Никак не сделать.
По-моему, вполне нормально.
Спасибо за ответ)
Не совсем понятно, вернее совсем не понятно как в эти табы вложить виджеты ворпресса? Например для двух вкладок Архивы и Последние статьи, как сделать правильно, кто-нибудь может подсказать?
Никак не сделать, потому что структура кода под них не подходит.
А разве у тебя в сайдбаре не этот скрипт применен? К примеру, мне интересно решение в верхнем блоке, где «Последние, Популярные, Новостные». Как такое организовать в вордпрессе? Есть ли мануал, чтобы почитать вдумчиво?
Нет, я виджеты не люблю и не использую, код вставляю прямо в шаблон. А мануалов в Интернете навалом.
Вот возник такой вопрос!
К примеры у меня есть активный бокс (в смысле облать экрана определённой разметки и т. д) и есть автоматически генерируемая таблица, в которой есть строки, можно ли реализовать так, чтоб при наводе на определённую строку иначе (tr) менялось содержимое этого бокса точно в такой вариации как и увас при клике по табу. Здаётся мне что это не реализуемо так строки в таблице не имеют свой индекс как например ul→li??? Буду очень признателен, если вы мне хоть чем-нибудь поможите.
Думаю, что можно. И строки тоже имеют свой индекс. По аналогии с
ul > li
в таблице будетtable > tr
.Скрипт помог! Спосибо, но…
Спасибо, хороший скрипт, искал как раз для одного проекта. Понравилось то, что все просто.
про велосипед и jQuery UI
зачем подключать и инициализировать огромный код, если есть такое элегантное решение?
спасибо автору