Главная JavaScript

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

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

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

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

  1. 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

      а без * {margin: 0; padding: 0;} табы кривые
      подскажите как применить «нулевые отступы к табам в style. css

      ul.tabs, ul. tabs li {margin: 0; padding: 0;}

      и что обозначает зведочка
      /*
      */

      Это комментарий к коду.

      Dimox на вашем сайте супер приятное оформление
      могли бы вы выложить пример css табов вашего сайта?

      Не хочу, чтобы его копировали.

  2. Сделал tab’ы и в один из них еще один tab, при нажатии на внутрений tab, переключаются внешние.

  3. Действительно хороший пример — перелопатил кучу примеров реализации табов на jQuery — этот самый простой, без сумасшедших css, когда вообще не ясно, что и где править, чтобы подогнать под себя, без кучи подключаемых плагинов js. В общем, спасибо!

  4. Доброго времени суток. У меня проблема. Тяяжело разобраться самому, вот хочу спросить. Скачал тему для вордпресс, там в самой теме статичный сайдбар должен отображаться в вкладках, как у вас: Последние, Популярные, Новостные. Но он почемуто не работает, вкладки то отображаются, а само содержимое отображается по типу обычного сайдбара, пример на вашем: Верхний блок Последние (там же отображаются и другие вкладки и Популярные и Новостные) а ниже блок Популярные, еще ниже Новостные. Тоесть вкладки то отображаются, но блоки разбитые на три часи. Все не отображается в одном, как у вас. В чем тут проблема? ответьте здесь, или мне на мыло. Плиз. Я не вебмастер, прошу ответ как чайнику.

  5. Dimox, доброго времени. В Opera 11 tab’ы не переключаются:(
    Вот тут можно убедится…
    Оч прошу помочь решить проблему!
    Спасибо

  6. Здравствуйте!
    Подскажите, пожалуйста…
    У меня табы съезжают в Internet Explorer…
    Уже не знаю, что и делать.
    В Opera и FireFox все ок…
    Вот сайт: world-of-photo.ru/

  7. хороший скрипт, вот беда то, ни как не могу подгрузить его аяксом ((. Т. Е есть страница на которой аяксом грузится содержимое из бд. Хотел прикрутить ваш скрипт, но ни как ((есть варианты???

  8. Огромное спасибо!
    Очень лакончино, как раз то, что надо!

  9. Здравствуйте!

    А гугл за display: none банит сайты???

  10. А у меня в IE почему-то едет все…

  11. То, что нужно)) Автору большое-пребольшое спасибо)

  12. Здравствуйте!
    Dimox, приходилось ли Вам видеть те несколько функций из jQuery-скрипта, — нужные для работы блоков с табами, — отдельно? Или может есть фреймворк меньших размеров (10−20 кб) для их создания?
    Это необходимо, потому что предполагается вписать его в тело другого скрипта.
    Все мои поиски результата не принесли.

  13. Тут в архиве, кстати (дать прямую ссылку не получилось), лежит фреймворк на 30 кб, против обычных 70-ти и выше.

    • Лучше jquery грузить с гугла. Он отдает ее в сжатом виде и довольно быстро. Сам пользуюсь. Вот адрес ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2 — и работает она с вкладками замечательно и вес 24 килобайта и ооочень большой + что возможно она уже есть у посетителей вашего сайта. т.к. большинство сайтов в интернете используют именно её, а не собственноручно кастрированную версию. Посмотреть вкладки можете на главной странице моего блога — там я встроил 2 раза их. И это говорит что этот код работает. Нужно лишь чуть чуть включить голову.

  14. Здравствуйте. Есть очень важный вопрос. Я хочу поделить вкладки на — ОПИСАНИЕ- ЦЕНЫ — ОТЗЫВЫ. И если человек допустим будет искать отзывы и с гугла его закинет на страницу то вкладка отзывов не бутет активна или как??? Если нет то как этого добится???
    И еще, не глупо ли вообще помещать отзывы в одну из вкладок??? Очень прошу помочь.

    • если человек допустим будет искать отзывы и с гугла его закинет на страницу то вкладка отзывов не бутет активна или как???

      Не будет.

      Если нет то как этого добится???

      Никак не сделать.

      И еще, не глупо ли вообще помещать отзывы в одну из вкладок???

      По-моему, вполне нормально.

  15. Спасибо за ответ)

  16. Не совсем понятно, вернее совсем не понятно как в эти табы вложить виджеты ворпресса? Например для двух вкладок Архивы и Последние статьи, как сделать правильно, кто-нибудь может подсказать?

  17. Вот возник такой вопрос!
    К примеры у меня есть активный бокс (в смысле облать экрана определённой разметки и т. д) и есть автоматически генерируемая таблица, в которой есть строки, можно ли реализовать так, чтоб при наводе на определённую строку иначе (tr) менялось содержимое этого бокса точно в такой вариации как и увас при клике по табу. Здаётся мне что это не реализуемо так строки в таблице не имеют свой индекс как например ul→li??? Буду очень признателен, если вы мне хоть чем-нибудь поможите.

  18. Скрипт помог! Спосибо, но…

  19. Спасибо, хороший скрипт, искал как раз для одного проекта. Понравилось то, что все просто.

  20. P. P. S.
    про велосипед и jQuery UI
    зачем подключать и инициализировать огромный код, если есть такое элегантное решение?
    спасибо автору

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