Универсальный jQuery-скрипт для блоков с вкладками (табами)
Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...
Комментарии (978)
Хотел спросить не совсем по теме наверное.. кто знает, что можно сделать с CSS-ом, чтобы, если вкладки не влазят по ширине – они бы занимали максимальную ширину и слова в названиях вкладок переносились бы на следующую строку с ровнением по середине. :)
Я могу им просто пиксельно задать ширину и с учетом того, что у меня не бывает больше 5ти вкладок – они окажутся все такие красивые – одного размера, могу задать высоту и даже текс тпереносится при задании для .tabs li параметра display: table-cell;, но он выравнивается по верхней кромке.. vertical-align: middle; не помогает.. :) Научите как надо.
Выражаю благодарность gard за помощь, спасибо!
Я, наконец, научилась сооружать табы – слава Димоксу! :)
Есть небольшой вопрос по оформлению, если позволите..
Я сегодня несколько часов (ибо ламер, лох и нуб) потратила на то, чтобы подправить Ваш css под свой диз.
Осталась небольшая закавыка.. Вот, взгляните, пожалуйста на странице с постом (здесь, например: allpa.ru/pochemu-ya-stala-mac-userom/ – в самом низу сайдбара есть мои табы): получилось 4 вкладки, но оформление таково, что все вкладки по ширине не дотягивают до ширины “шапки” блока – справа остаётся мааахонький кусочек пустого пространства, что, на мой взгляд, некрасиво смотрится :(
Тут, я думаю, можно решить эту проблему, увеличив расстояние слева от начала вкладки до заголовка её и от заголовка вправо до конца вкладки (боже, как я тупо объясняю! надеюсь, Вы поняли меня…) – как?
Понимаете, я настолько устала от возни с css и я настолько плохо ориентируюсь в нём, что просто СИЛ МОИХ УЖЕ НЕТ, мозги не шевелятся – перестала соображать хоть что-нибудь.. :( Поэтому прибежала к Вам – хелп, плиз!
ПыСы: я Вас вовсю пиарю в Твиттере, Вы ж меня спасли своими табами и плавающей панелькой!
В файле стилей у себя найдите это:
И цифру 13 пробуйте увеличивать, пока табы не растянутся на нужную ширину.
Видел, спасибо =)
Спасибо – да, это помогло :)
___________________
Продолжаю возиться с табами и уже поседела вся от умственного напряжения – мозгов-то чуть, а усилия по освоению табов ого-го какие.. о.О
Вопрос-просьба: мне, дорогой Димокс, нужен скрипт, в котором прописаны три вкладки: активная, вторая, третья (это я пытаюсь натянуть на Ваши табы сторонний css – там три вкладки, оформление чётко подогнано под них).
Тупо смотрю на скрипт, понимаю, что надо изменить “box” на какой-нить “second” и приписать какой-нить “last“, и всё это запихнуть в код скрипта, шоб он понял, что следующей за “current” вкладкой будет “second”, а за “second” – “last”, но уж в чём в чём, а в кодах и скриптах я полная дура.. :(((((
А там же ещё и HTML, который привязан к скрипту, а в нём ещё заморочка с “current” и “box visible” – это тоже надо осилить, уразуметь, что к чему привязывать..
Я знаю, как Ваши знания востребованы, отдаю себе отчёт, как ужасно Вы, должно быть, заняты.. и мне очень, ОЧЕНЬ стыдно отрывать Вас от важных дел.. но вдруг Вы согласитесь оказать любезность и подсказать нужный вариант скрипта? Ну, или пнуть меня в нужном направлении..
Спасибо!!!
Если правильно понял, что вы хотите, тогда сделайте так:
Да, это именно то – спасибо!
А скрипт – его править не нужно? Ему важно наличе box visible и box, а что там к ним прибавляется (second, last) – не имеет значения?
Пожалуйста. Да, Вы все правильно поняли.
Табы соорудились, постепенно натягиваю на них нужный css, а пока одна проблема: после перезагрузки страницы в 1-м табе (открытом по умолчанию) отображается содержание ВСЕХ табов.
Если начать по табам щёлкать, то всё нормализуется – в каждом табе своё содержимое. Перезагружаем страницу – опять двадцать пять (1-й таб показывает содержимое всех табов).
Нет ли у Вас мыслей? Всё ж таки, наверное, надо править код скрипта под три таба, мм?..
Не вижу такого у Вас на сайте.
А можно как то закруглить углы табов с верху??
C помощью картинок или CSS3.
Здравствуйте! Попробовал Ваш скрипт в DENWERE (в локалке) на wordpress’e. Почему-то не работают функции wordpress во вкладках.
Правда, вопрос не совсем по теме, т.к. без вкладок тоже не работают. Дело в том, что я подгружаю их (облако тегов, например) из виджетов, куда вставил код html для вкладок.
(Css подгружается отдельным файлом в header.php вместе с jquery.)
При переключении вкладок виден набранный текст.
Если вместо текста вставить что-нибудь наподобие: то вкладка открывается пустой.
Собственно, вопрос: как правильно вставить код в виджет (или что надо сделать), чтобы можно было во вкладках виджета отобразить, к примеру, облако тегов?
С виджетами вкладки не получится использовать.
Коды не вставил:…наподобие:
<?php wp_tag_cloud('smallest=8&largest=22&number=30&orderby=count'); ?>
Решил проблему частично с помощью шоткодов: вставляю шоткод (облака тегов с параметрами) вместо текста вкладки, – облако выводится как надо. Но не во вкладке, а вверху сайдбара.
Вкладки при этом “падают” вниз под облако тегов.
Дело, как я понимаю, в стилях?
Как поправить – вывести облако во вкладке?
Я думаю, что html и шоткоды выводятся каждый сам по себе, игнорируя друг друга. Вот только как их подружить? Или подружить html и php (и обойтись без шоткодов)?
Есть пара плагинов, которые это делают. Но лишний плагин ставить не хочется. Их должно быть как можно меньше.
Должно быть какое-то Простое решение???
Решения не нашел. Убрал код html из виджета и вставил в sidebar.php. Осталось настроить стили. Все работает. Функции на php, естественно, тоже. Но появилась другая проблема: все что в файлах .php пишется на русском – не выводится. Полагаю, тут возникает проблема с кодировкой. Как она решается. Приведите примерчик плиз!
Значит пересохраните php-файлы в нужную кодировку.
Обнаружилась очередная неприятность: Подсказка, показывающаяся при наведении мыши на ссылку стала видимой.
Подружить её со скриптом – задача непосильная.
Придется подсказку удалять…
В последнем случае сделал небольшую правку и оставил подсказки – поставил это:
<?php get_links('-1', '<li>', '</li>', '<br />', ' — ', 'name', TRUE,
FALSE, -1, TRUE, TRUE); ?>
Я попробовал поставить скрипт в head добавил ссылку на скрипт, на
Установил без изменений HTML и CSS коды, в итоге получаю просто список:
http://img710.imageshack.us/img710/1465/shittt.png
Значит что-то неправильно делаете. Без живого примера ничего не могу подсказать.
А под живым примером, что имеется ввиду?
Страница в Интернете, где я могу посмотреть то, что вы описали выше.
Вот живой пост http://www.victoryinvestors.com/video-obzor-rynkov-perenositsya-na-ponedelnik-den-rozhdeniya
После картинки …
У вас нет CSS-стилей для табов, потому и просто список отображется.
А Вы оформлением не поделитесь, а то я не силён в CSS. Не умею составлять саму структуру :(
Смотрите в примерах.
Я почему то подумал, что там нет css )) Спасибо, немного отредактировал, стало отлично
А не кто не подскажет как сделать ккладки и по вертикали и по горизонтали одновременно?
очень полезная вещь, вот бы еще была возможность присвоить оригинальный URL каждой вкладке и подключить “назад” в браузере… цены бы не было! Но все равно, спасибо!
А существует возможность на закладки разместить не текст а картинку (картинку + текст)? Если такая возможность существует как это сделать?
Конечно. Вместо текста вставьте тег картинки.
Я прошу прощения, а поддержка ie7 где? =(((((, часа 2 скрипт настраивал под себя, потом заметил, что в ie7 скрипт просто не работает (вкладки не переключаются)
Все прекрасно работает и в IE7, и в IE6. Что-то неправильно делаете.
Да я понял уже, ie7 просто плохо с js работает, пришлось потом заново перенастраивать скрипт. Спасибо! Но почему-то у меня плавная смена контента вкладок не раотает, все резко.
Задавшись поиском реальных примеров работы скрипта jQuery, нашла вашу статью. Поняла все – спасибо за доходчивый язык изложения, думаю, остальные статьи на тему верстки и сайтостроения тоже пойму без проблем.
Не появилось ли решения, которое прекращает передергивания вверх экрана при выходе содержимого вкладки за его предел? Уж очень это мешает. С помощью этих вкладок я отображаю информацию о товаре в интернет-магазине и они у меня находятся по-середине экрана…
К сожалению, не появилось.
Хотелось бы уточнить мнение по такому вопросу – что лучше использовать при отключении явы – не работающие табы или когда табы будут выведены все враз. Типа в развитии вопроса к отношению поисковиков к скрытой в табах информации.
Не знаю, как лучше, но я предпочитаю тот вариант, который используется на блоге сейчас. Не вижу в этом ничего плохо с точки зрения поисковиков, это используется повсеместно. Так делается же не для манипуляции поисковиками, а для юзабилити сайта.
Действительно нужный скрипт!
Автору 100 сенкс!
Не работает нифига. Полдня убил, а не работает. Ссылку на скрипт прописываю в header.php темы. Там же ссылку на .css с описанием стиля. Что не так-то?
Где можно посмотреть?
Прикрутил плагин с подобным эффектом. Памяти блог стал жрать вместо 3 метров, аж 18… Со скриптом вашим так и не разобрался, к сожалению. Со скриптом еще раз ковырялся, не выходит каменный цветок. :(