Главная JavaScript

Универсальный jQuery-скрипт для блоков с вкладками (табами)

Универсальный jQuery-скрипт для блоков с вкладками (табами)

Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...

Комментарии (978)

  1. Хотел спросить не совсем по теме наверное. кто знает, что можно сделать с CSS-ом, чтобы, если вкладки не влазят по ширине — они бы занимали максимальную ширину и слова в названиях вкладок переносились бы на следующую строку с ровнением по середине. :)

    • Я могу им просто пиксельно задать ширину и с учетом того, что у меня не бывает больше 5ти вкладок — они окажутся все такие красивые — одного размера, могу задать высоту и даже текс тпереносится при задании для .tabs li параметра display: table-cell;, но он выравнивается по верхней кромке. vertical-align: middle; не помогает. :) Научите как надо.

  2. Выражаю благодарность gard за помощь, спасибо!

  3. Я, наконец, научилась сооружать табы — слава Димоксу! :)

    Есть небольшой вопрос по оформлению, если позволите.
    Я сегодня несколько часов (ибо ламер, лох и нуб) потратила на то, чтобы подправить Ваш css под свой диз.

    Осталась небольшая закавыка. Вот, взгляните, пожалуйста на странице с постом (здесь, например: allpa.ru/pochemu-ya-stala-mac-userom/ - в самом низу сайдбара есть мои табы): получилось 4 вкладки, но оформление таково, что все вкладки по ширине не дотягивают до ширины «шапки» блока — справа остаётся мааахонький кусочек пустого пространства, что, на мой взгляд, некрасиво смотрится :(

    Тут, я думаю, можно решить эту проблему, увеличив расстояние слева от начала вкладки до заголовка её и от заголовка вправо до конца вкладки (боже, как я тупо объясняю! надеюсь, Вы поняли меня…) — как?

    Понимаете, я настолько устала от возни с css и я настолько плохо ориентируюсь в нём, что просто СИЛ МОИХ УЖЕ НЕТ, мозги не шевелятся — перестала соображать хоть что-нибудь. :(Поэтому прибежала к Вам — хелп, плиз!

    ПыСы: я Вас вовсю пиарю в Твиттере, Вы ж меня спасли своими табами и плавающей панелькой!

    • В файле стилей у себя найдите это:

      .tabs li {
      	float: left;
      	display: inline;
      	margin: 0 1px -1px 0;
      	padding: 0 13px 1px;
      	color: #777;
      	cursor: pointer;
      	background: #F9F9F9;
      	border: 1px solid #B4B4B4;
      	position: relative;
      }
      

      И цифру 13 пробуйте увеличивать, пока табы не растянутся на нужную ширину.

      ПыСы: я Вас вовсю пиарю в Твиттере, Вы ж меня спасли своими табами и плавающей панелькой!

      Видел, спасибо =)

      • цифру 13 пробуйте увеличивать

        Спасибо — да, это помогло :)
        ___________________
        Продолжаю возиться с табами и уже поседела вся от умственного напряжения — мозгов-то чуть, а усилия по освоению табов ого-го какие. о. О Вопрос-просьба: мне, дорогой Димокс, нужен скрипт, в котором прописаны три вкладки: активная, вторая, третья (это я пытаюсь натянуть на Ваши табы сторонний css — там три вкладки, оформление чётко подогнано под них).

        Тупо смотрю на скрипт, понимаю, что надо изменить «box» на какой-нить «second» и приписать какой-нить «last», и всё это запихнуть в код скрипта, шоб он понял, что следующей за «current» вкладкой будет «second», а за «second» — «last», но уж в чём в чём, а в кодах и скриптах я полная дура. :(((((

        А там же ещё и HTML, который привязан к скрипту, а в нём ещё заморочка с «current» и «box visible» — это тоже надо осилить, уразуметь, что к чему привязывать.

        Я знаю, как Ваши знания востребованы, отдаю себе отчёт, как ужасно Вы, должно быть, заняты. и мне очень, ОЧЕНЬ стыдно отрывать Вас от важных дел. но вдруг Вы согласитесь оказать любезность и подсказать нужный вариант скрипта? Ну, или пнуть меня в нужном направлении.

        Спасибо!!!

  4. А можно как-то закруглить углы табов с верху?

  5. Здравствуйте! Попробовал Ваш скрипт в DENWERE (в локалке) на wordpress’e. Почему-то не работают функции wordpress во вкладках.
    Правда, вопрос не совсем по теме, т.к. без вкладок тоже не работают. Дело в том, что я подгружаю их (облако тегов, например) из виджетов, куда вставил код html для вкладок.
    (Css подгружается отдельным файлом в header. php вместе с jquery.)
    При переключении вкладок виден набранный текст.
    Если вместо текста вставить что-нибудь наподобие: то вкладка открывается пустой.
    Собственно, вопрос: как правильно вставить код в виджет (или что надо сделать), чтобы можно было во вкладках виджета отобразить, к примеру, облако тегов?

  6. Коды не вставил:…наподобие:

    <?php wp_tag_cloud ('smallest=8&largest=22&number=30&orderby=count'); ?>

  7. Решил проблему частично с помощью шоткодов: вставляю шоткод (облака тегов с параметрами) вместо текста вкладки, — облако выводится как надо. Но не во вкладке, а вверху сайдбара.
    Вкладки при этом «падают» вниз под облако тегов.
    Дело, как я понимаю, в стилях?
    Как поправить — вывести облако во вкладке?

    • Я думаю, что html и шоткоды выводятся каждый сам по себе, игнорируя друг друга. Вот только как их подружить? Или подружить html и php (и обойтись без шоткодов)?
      Есть пара плагинов, которые это делают. Но лишний плагин ставить не хочется. Их должно быть как можно меньше.
      Должно быть какое-то Простое решение???

      • Решения не нашел. Убрал код html из виджета и вставил в sidebar.php. Осталось настроить стили. Все работает. Функции на php, естественно, тоже. Но появилась другая проблема: все что в файлах .php пишется на русском — не выводится. Полагаю, тут возникает проблема с кодировкой. Как она решается. Приведите примерчик плиз!

  8. Обнаружилась очередная неприятность: Подсказка, показывающаяся при наведении мыши на ссылку стала видимой.
    Подружить её со скриптом — задача непосильная.
    Придется подсказку удалять…

  9. Я попробовал поставить скрипт в head добавил ссылку на скрипт, на

    <script type="text/javascript" src="<?php echo get_option('home'); ?>/wp-content/themes/arthemia/scripts/vkladki.js"></script>

    Установил без изменений HTML и CSS коды, в итоге получаю просто список:
    img710.imageshack.us/img710/1465/shittt.png

  10. А Вы оформлением не поделитесь, а то я не силён в CSS. Не умею составлять саму структуру :(

  11. А не кто не подскажет как сделать ккладки и по вертикали и по горизонтали одновременно?

  12. очень полезная вещь, вот бы еще была возможность присвоить оригинальный URL каждой вкладке и подключить «назад» в браузере… цены бы не было! Но все равно, спасибо!

  13. А существует возможность на закладки разместить не текст, а картинку (картинку + текст)? Если такая возможность существует как это сделать?

  14. Я прошу прощения, а поддержка ie7 где? =(((((, часа 2 скрипт настраивал под себя, потом заметил, что в ie7 скрипт просто не работает (вкладки не переключаются)

  15. Задавшись поиском реальных примеров работы скрипта jQuery, нашла вашу статью. Поняла все — спасибо за доходчивый язык изложения, думаю, остальные статьи на тему верстки и сайтостроения тоже пойму без проблем.

  16. Не появилось ли решения, которое прекращает передергивания вверх экрана при выходе содержимого вкладки за его предел? Уж очень это мешает. С помощью этих вкладок я отображаю информацию о товаре в интернет-магазине и они у меня находятся по-середине экрана…

  17. Хотелось бы уточнить мнение по такому вопросу — что лучше использовать при отключении явы — не работающие табы или когда табы будут выведены все враз. Типа в развитии вопроса к отношению поисковиков к скрытой в табах информации.

    • Не знаю, как лучше, но я предпочитаю тот вариант, который используется на блоге сейчас. Не вижу в этом ничего плохо с точки зрения поисковиков, это используется повсеместно. Так делается же не для манипуляции поисковиками, а для юзабилити сайта.

  18. Действительно нужный скрипт!
    Автору 100 сенкс!

  19. Не работает нифига. Полдня убил, а не работает. Ссылку на скрипт прописываю в header. php темы. Там же ссылку на .css с описанием стиля. Что не так-то?

  20. Прикрутил плагин с подобным эффектом. Памяти блог стал жрать вместо 3 метров, аж 18… Со скриптом вашим так и не разобрался, к сожалению. Со скриптом еще раз ковырялся, не выходит каменный цветок. :(

Ваш комментарий