Универсальный jQuery-скрипт для блоков с вкладками (табами)
Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...
Комментарии (978)
Dimox, можешь рассказать, как делаются табы с категориями, новыми записями, тэгами и т.д. для сайдбара? В качестве примера возьмем табы с этого блога, в которых все выше перечисленное уже есть. Может напишешь отдельный пост? Очень интересно реализация такой вещи без применения плагинов, которых толковых под эти цели еще не встречал. Спасибо!
Рассказывать особо нечего. В основном все стандартно.
– последние и новостные сделано с помощью query_posts;
– популярные плагином Popular Posts;
– рубрики плагином Category Tagging;
– теги стандартным кодом;
– архивы плагином Simple Archive.
Спасибо тебе! Сейчас буду лопатить! :)
Dimox, подскажи пожалуйста какой код ты использовал для вывода последних записей?
Пытался использовать вариант, предложенный тобой с этой страницы: query_posts
Но таким образом нельзя добиться выводом ссылок на выводимые материалы. И как это сделать, ума пока не хватает. Погуглил немного и нарыл другой вариант, но он не совсем мне подходит:
При таком раскладе, в сайдбаре на главной странице выводится указанное количество последних записей. Но когда переходишь на любую страницу, выводится только одна – та на которой находишься.
Подскажешь?
Дима, спасибо тебе огромное! Ты хороший человек! Все работает :D
Подскажите и мне, пожалуйста, хочу использовать данный скрипт в связке со слайдером контента. По 1 вкладке листалка нормально работает, но после последнего слайда уходит в никуда, а навторой вобоще ничего не отображается где искать решение. Использую вот этот слайдер контента:
http://manos.malihu.gr/tuts/slidebox.html
Ничем не могу помочь.
Приветствую! Dimox, спасибо огромное за проделанную работу! Применил для экономии места при отображении виждетов сообществ на боковой панели. Все отлично работает!
Один только странный нюанс… В Firefox при открытии второй вкладки не отображается виджет сообщества вконтакте.. с фейсбуком проблем нет .. а вот с вконтакте тоьлко пока в лисе такой баг заметил.. причем если отдельно его вставить на странице – он есть …
как я его леплю:
<div class="box" id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "280", height: "270"}, GROUP_ID);
</script>
Подскажите, пожалуйста, в чем причина. При чём, пару раз отображался корректно, но приобновлении страницы просто пустая вкладка, сжатая по высоте (. Спасибо.
Сам однажды столкнулся с этой проблемой и, к счастью, нашел решение.
Добавьте следующие стили, и все должно исправиться:
Dimox, перемучал уже css как мог, внедрил рекомендацию по отображению в режиме отключенного скрипта в браузере и ничего не помогает… Если виджеты расположены один под другим – всё ок, если же виджет вконтакте на 2-ой вкладке – лиса то отображает то не отображает его.. в большей степени не отображает… что это за странный баг… хелп ми %) в остальных браузерах всё ок
ООООООООООООО!!!! Алилуя!! Спасибо те огромное!!! Всё работает!!! :)
Пожалуйста.
А на UCOZе работает этот скрипт?
Если шаблон можно редактировать, то да.
Ммм… И что нужно поменять в шаблоне подскажите пожалуйста если не трудно. Заранее благодарен
В статье все написано, показаны примеры.
Я жутко злюсь когда мне такое говорят! Мне например очень не нравится использовать чужие наработки, для меня лучше самому написать, пусть и “колесо”, или даже “велосипед”…
Изобретать колёса и велосипеды иногда хорошо, иногда плохо.. но тут я бы выразил свое несогласие с пользователем твиттера по другой причине. Дело то в том, что не всегда хочется подключать целый UI ради одних только табов, ведь это неслабый такой объём лишних килобайт :)
Спасибо! Почти все получилось, но только вкладки не переключаются? Где я допустил ошибку?
Ну я же не ясновидящий.
Урааа… Ты супер Dimox/ И у меня получилось. Все работает и на UCOZ. Спасибо тебе огромное за это “колесо”.
Отлично. Пожалуйста.
Предыдущие твои комментарии почему-то ушли на модерации, их тогда уже нет смысла публиковать.
Причина у тебя была в том, что была подключена не та версия jQuery. Не успел об этом написать.
Да я заметил что сообщения не выводились. Спасибо тебе еще раз. У меня ещё один ( я надеюсь последний :-) ) вопрос к тебе. Как сделать углы вкладок закругленными? Заранее благодарю.
Пожалуйста.
Закругленные углы можно сделать либо с помощью картинок, либо с помощью CSS-свойства border-radius, но оно работает не во всех браузерах.
А можно ли сделать вкладки во вкладках? :) Ну, наверное, вы меня поняли, о чём я :)
Скрипт на это не рассчитан.
Глянь на это решение: multiple_tabs :)
Большое спасибо!
Доброго времени суток. Dimox а можно в css вот верхние вкладки заголовки подвинуть чуть к центру чтобы левая граница первой вкладки заголовка (li class=”current”) не совпадала с границей первой вкладки с содержанием (div class=”box visible”). Не знаю правильно ли я объяснил :)
Ну вот у тебя допустим (на примере вкладок “заработок для вебмастера” и “архивы”) они ровно идут по левой границе а после вкладки – заголовка “архивы” справа остается ещё место. Так вот надо чтоб и слева оставалось место
Все все все. Сам догадался. С помощью тега margin :)/ Но все равно спасибо
Как убрать фон возле табов, а в них оставить?
В CSS есть значение background, но при его удалении фон становиться такого же цветак как и табы.
Просто дело в том что у меня фон на сайте сделан из узора в фотошопе, который на табы распространяться не должен, а как бы оставаться под всеми блоками, типо за ними.
Живой пример:
Счелк
Судя по скриншоту, background поставлен либо у
div.section
, либо уul.tabs
. Соответственно, оттуда его нужно убрать.У div.section убрал фон – помогло. Спасибо!
Но еще есть проблема другого рода.
Между табами и зоной с контентом есть пустое место. Я так понимаю что где то в CSS есть отступ, который создает этот промежуток, но перепробывав значения у разных padding проблема не решилась. Dimox, помоги.
Пример: http://savepic.ru/3035730.htm
Покажи лучше страницу с исходным кодом. По скриншоту можно только гадать. Этот отступ, скорее всего, создает
margin
у какого-то из блоков.CSS:
HTML INDEX:
<div class="section">
<ul class="tabs">
<li class="current">С КОМПЬЮТЕРА</li>
<li>С ИНТЕРНЕТА</li>
</ul>
<div class="box visible">
<form action="http://no4evka.ru/loadfile.php" name="Loadimage" enctype="multipart/form-data" method="POST">
<div class="textloadstyle">Изображение для загрузки:</div><div class="loadstyle"><input id="load" name="img" type="file" size="60"></div><br><div class="textloadstyle1">Описание : (не обязательно)</div><div class="loadstyle1"><input id="descrip" name="descrip" type="text" size="71"></div>
<div class="upload"><input type="submit" value="Отправить"></div>
</form>
</div>
<div class="box">
<p>Закон внешнего мира, как принято считать, реально рассматривается знак, отрицая очевидное. Гегельянство творит катарсис, хотя в официозе принято обратное. Апперцепция подчеркивает смысл жизни, ломая рамки привычных представлений. Представляется логичным, что адживика откровенна.</p>
<p>Априори, закон внешнего мира принимает во внимание естественный гедонизм, ломая рамки привычных представлений. Концепция реально творит гедонизм, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
<p>Созерцание осмысляет трансцендентальный бабувизм, хотя в официозе принято обратное. Бабувизм абстрактен. Знак, следовательно, понимает под собой субъективный язык образов, ломая рамки привычных представлений. Деонтология непредвзято подчеркивает даосизм, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.</p>
</div>
</div><!-- .section -->
В первом табе я уже залил свой контент. 2й еще не изменял.
Нужно добавить
margin: 0;
блокуul.tabs
.Спасибо, это помогло, но только текущему табу.
То есть, если открыть второй таб, то там проблема осталась. Помоги пожалуйста
Добавь в самое начала файла стилей:
А потом уже задавай тегам нужные отступы.
И вообще, рекомендую почитать руководство по CSS, там все написано.
Dimox Благодарю все решил.
Как раз этим и занимаюсь, удучь верстке и заодно и CSS.
Не подскажете причину, по которой может не цепляться ко второму набору вкладок. Первый переключается отлично, а второй никак. И спасибо большое, очень простой в использовании и удобный модуль)
Наверное, что-то неправильно делаете. Должно работать с любым количеством наборов вкладок.
Доброго времени суток!
Отличное решение, мне подходит. Но есть одно Но, а именно:
В примере фон задается цветом, а у меня возникла необходимость применить изображение, при чем не одно на все вкладки, а на каждую вкладку своя картинка (можете меня ругать, но другого решения я пока не вижу).
Для наглядности загляните на портал города Перми www.properm.ru, на главной странице там выведены новости как раз при помощи вкладок.
При клике на вкладку она принимает вид прямоугольника со стрелочкой.
Вот так же пытаюсь сделать я. Но в силу моего начального уровня не могу понять как. То есть я конечно могу в таблице стилей вместо background: #xxx поставить background:url(xxx), но тогда получится не совсем красиво в силу того, что длина ссылок разная, а размер картинки фиксированный.
Если есть решение моей проблемки, буду признателен.
Заранее спасибо, с уважением.
Почитайте вот эти статьи, должно помочь:
https://dimox.name/dinamic_link_buttons_with_css/
http://www.id-as.com/arts/ala/slidingdoors/
Спасибо за ссылки. Но метод “раздвижных дверей” не совсем подходит, либо его нужно доработать. Объясню.
Дело в том, что для того, чтобы реализовать этот метод нужно не два, а три изображения (левая растягивающаяся часть, правая часть и центрированная средняя часть (это тот самый треугольник)).
<a href="#" class="button"><span>Динамическая кнопочка</span></a>
Как я понял из приведенных Вами статей, образуется два слоя, и к каждому из них присваивается картинка. Верхний слой соответственно перекрывает нижний и получается кнопка какой угодно длины.
Но как добавить третий слой для добавления треугольника? Вот в чем вопрос.
здесь соответственно
Все тут подходит. Ничто не мешает добавить 3-ю обертку вот таким, например, образом:
и использовать ее для треугольника:
Спасибо за разъяснения. С трудом, но почти сделал что хотел. Правда я обернул div’ами
<li class="current"><div><div>первая вкладка</div></div></li>
Осталась одна маленькая деталь. При переходе на другую вкладку меняется вид, прописанный для класса .current. То есть в яваскрипт нужно каким-то образом дописать изменения и для div’ов.
Я, конечно делал попытки, но ничего из этого не вышло.
Подскажите что нужно дописать в скрипт?
Тестовая страничка на ucoz’е. Вот ссылка для наглядности
С уважением.
Да, в данном случае как раз дивами правильнее будет.
В скрипте ничего менять не требуется, это работа со стилями. Если я правильно вас понял, тогда нужно сделать следующее:
и стили:
Да, Вы абсолютно правильно поняли и помогли мне!
Благодарю Вас!
Замечательно. Пожалуйста.
Привет Dimox :)
Есть один вопрос.
Почему то в Firefox не хотят работать внутри вкладок, разного рода скрипты. Хотя в Хроме и опере работают на ура.
В чём проблема?
Вот примеры можешь глянуть тут:
http://videotuts.ru/2305-maya-to-softimage-conversion.html
Жми вкладку Соц. голосование
Или же в правом сайдбаре найди Мы вконтакте
Видимо, это косяк Файерфокса. А по поводу Вконтакте вот тут описывал решение.