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

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

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

  1. Я предпочитаю “брать” его с Гугла, поскольку, во-первых, велика вероятность, что у посетителя, который зайдет на сайт, jQuery уже закэширован в браузере (значит страница загрузится быстрее), во вторых, скорость серверов Гугла стабильна и быстра.

    Надо добавить. В третьих, гугл отдает этот файл в gzip, который весит всего 24кб. Распаковывается он на клиентской стороне. 72кб он весит, уже в распакованном виде. Т.е. у гугла его размер 24кб.

    • Как ты узнал, что размер 24 Кб и где написано, что Гугл отдает его в gzip (ссылку на источник)?

      • Kama совершенно прав. Мне Гугл отдает

        jquery/1.4.2/jquery.min.js

        24,1Кб. за 78ms.
        Это сведения FireBug.
        Без услуг Гугла тотже файл весит 70,5Кб и идет 120ms.
        Выводы напрашиваются сами собой…

      • Ссылки на источник нету :)

        Просто, мне в голову пришло это проверить, когда себе ставил такую ссылку, — это же Гугл… YSlow подтвердил и вот этот аддон тоже подтвердил: https://addons.mozilla.org/en-US/firefox/addon/6647 (проверка http заголовков).

        Я сам обрадовался такому положению вещей, поэтому решил тут народ порадовать :)

  2. Интересует меня следующая возможность. Можно ли таким способом поместить в блок счётчики посещений, чтоб они не мозолили глаз, но в то же время считали? Было бы не плохо организовать такой виджет).

  3. Отличный скрипт, спасибо)
    Выглядит замечательно)

  4. Прежде всего хочу поблагодарить за скрипт — использовал его на сайте :)
    Столкнулся с тем, что скрипт работает на странице, но если табы запихнуть в thickbox то перестает работать… Кто-нибудь с этим сталкивался?

  5. Скажите как сделать чтобы скрипт работал не по окончании загрузки а сразу. Я пока не силен в jquery. У меня datatable заработал. А с этим скриптом не получается..
    Причина такой просьбы — иногда прилично приходится ждать пока загрузятся всякие счетчики, сторонние js.. а нужная инфа на скрытых закладочках

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

      • Наверное как-то можно. Например плагин jQuery — DataTable подключается так —

        oTable = $('#SortTable').dataTable({

        прямо в середине страницы и работает не дожидаясь загрузки всего документа…

        Эх нехватает у нас с вами квалификации..

        Но всеравно большое спасибо за палагин.

  6. Все хорошо, однако, если, допустим, во второй вкладке прописать форму (любую) с submit, то при клике по кнопке перекидывает на первую вкладку…

  7. Подскажите!
    Мне нужно создать вкладки на странице http://pokerschuler.com/?p=17, не в сайтбаре.
    создал файл с расширением .js и закинул в папку шаблона, где скрипты.
    А вот это не пойму где вписывать:»Не забывайте в первую очередь подключить сам фреймворк jQuery (если он еще не подключен на вашем сайте), например, так (вставляется между тегами и )», но в шаблне page.php и single.php нету
    тегов , или вставлять только в index.php.
    И бязательные CSS-стили для вышеуказанного HTML-кода, прописывать в CSS шаблона?
    Пока получилось как на странице http://pokerschuler.com/?p=17. Можете подсказать, а то я новичек пока в jQuery?

  8. Я вставил в header.php код с прописаным путем до файла скрипта на моем хостинге: , сам jquery-1.3.1.min.js у меня подключен вот так

    • Затрудняюсь ответить.

    • /scripts/jquery-1.3.1.min.js

      А что мешает подключить 1.4.2? Опять же есть ли сама библиотека по указанному пути?

    • Мучился сам с похожей проблемой.
      Фишка в том, что wp подключает jquery из себя (http://site.ru/wp-includes/js/jquery/jquery.js?ver=1.3.2) и как ты не вызывай 1.4 или любую другую версию, — всегда будет подключаться и использоваться та, что зашита в текущем движке wordpress (во всяком случае у меня было так). Я долго бился с этой проблемой в своё время, а потом помню раскопал и заменил код jquery так, что версию мне показывает 1.3.2, а фактически стоит 1.4 (так и не нашел где сменить название версии). Зато всё работает.

      В общем ответил тебе на почту, — пиши, помогу.

      • Можно отключить стандартный jqwery в вордпрессе. В файле functions.php дописать:

        if( !is_admin()){
        wp_deregister_script(‘jquery’);
        wp_register_script(‘jquery’, («http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js»), false, ‘1.4.2’);
        wp_enqueue_script(‘jquery’);
        }

        То-есть он деРегестрирует стандартный jqwery в вордпрессе и далее указана ссылка на гугл. В итоге в хедере не надо прописывать вот это — только в файле functions.php!

        Спасибо автору — работает все отлично!

        • Можно ещё и не только для админки и скрипт брать всегда последней минимальной версии, например так:

          
          function my_init_method() {
              wp_deregister_script('jquery');
              wp_register_script('jquery','http://code.jquery.com/jquery.min.js');
          }
          add_action('init','my_init_method');
          
        • Очепятался :-)
          Должно было быть: …можно и для админки

          • Пишу о глюке, найденном при использовании внешнего упакованного jQuery для админки WordPress’а — не корректно работает переключение режимов редактирования с визуального на HTML и обратно + там же не все кнопки работают.
            Как писал Владимир надо действительно переопределять jQuery не для админки.
            В моём примере это так:

            function my_init_method() {
                wp_deregister_script('jquery');
                wp_register_script('jquery','http://code.jquery.com/jquery.min.js','','Всегда_последняя_версия');
            }
            if( !is_admin()){
                add_action('init','my_init_method');
            }
  9. Дак если я подключу jquery-1.4.2.min.js, код только короче станет, а все остальное также и CSS тоже надо править? Если кто может помочь и посмотреть, дам доступ по ftp, мой адрес KW-WS@yandex.ru, договоримся об оплате, если что.

  10. Подключил jquery-1.4.2.min.js и аставил код короче, ничего не изменилось.

  11. Короче говоря решил проблему добавив в CSS не как написано в статье, добавил
    .section {
    width: 600px;
    background: #EFEFEF;
    margin: 0 0 30px;
    }
    ul.tabs {
    height: 28px;
    line-height: 25px;
    list-style: none;
    border-bottom: 1px solid #DDD;
    background: #FFF;
    }
    .tabs li {
    float: left;
    display: inline;
    margin: 0 1px -1px 0;
    padding: 0 13px 1px;
    color: #777;
    cursor: pointer;
    background: #F9F9F9;
    border: 1px solid #E4E4E4;
    border-bottom: 1px solid #F9F9F9;
    position: relative;
    }
    .tabs li:hover,
    .vertical .tabs li:hover {
    color: #F70;
    padding: 0 13px;
    background: #FFFFDF;
    border: 1px solid #FFCA95;
    }
    .tabs li.current {
    color: #444;
    background: #EFEFEF;
    padding: 0 13px 2px;
    border: 1px solid #D4D4D4;
    border-bottom: 1px solid #EFEFEF;
    }
    .box {
    display: none;
    border: 1px solid #D4D4D4;
    border-width: 0 1px 1px;
    background: #EFEFEF;
    padding: 0 12px;
    }
    .box.visible {
    display: block;
    }

    .section.vertical {
    width: 440px;
    border-left: 160px solid #FFF;
    }
    .vertical .tabs {
    width: 160px;
    float: left;
    display: inline;
    margin: 0 0 0 -160px;
    }
    .vertical .tabs li {
    padding: 0 13px;
    margin: 0 0 1px;
    border: 1px solid #E4E4E4;
    border-right: 1px solid #F9F9F9;
    width: 132px;
    height: 25px;
    }
    .vertical .tabs li:hover {
    width: 131px;
    }
    .vertical .tabs li.current {
    width: 133px;
    color: #444;
    background: #EFEFEF;
    border: 1px solid #D4D4D4;
    border-right: 1px solid #EFEFEF;
    margin-right: -1px;
    }
    .vertical .box {
    border-width: 1px;
    }
    Тогда работает.

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

  13. Не совсем понял? Но после вставки кода, который я добавил у меня при изменеиий СSS вкладок, цветов тоесть и в самом шаблоне меняются при этом цвета))), так не должно быть, надо чтоб отдельно. Буду думать, кто может что подсказать подскажите.

  14. А как сделать чтобы содержимое неактивных вкладок загружалось только после нажатия на них, а не все вместе?

  15. У меня просто в блоке несколько PHP файлов хотелось бы их подгружать через jQuery но чтобы загружались не все сразу, а только при нажатии (чтобы нагрузка меньше и быстрее). Сколько не ищу все «блоки с вкладками» грузятся сразу. Может подскажите название, а то я даже не знаю как это называться толком?

  16. Здравствуйте!
    С успехом применяю ваш скрипт в страничках… но недавно наткнулся на одну неприятную особенность.. незнаю чем это вызвано, но при вставке большой таблицы во вкладку — вкладка «захватывает» идущий за ней (после закрытия div section и div самого бокса) контент. Она растягивается вниз и вбок.. Уже все перепроверил на 10 раз.. не вижу, чтобы где то была ошибка..

  17. Вот у меня две таблицы:

    […вырезано…]

    Не могу вставить эти таблицы в разные вкладки.. Или я что-то глаза замылил или это мистика.. На самом деле табов не два, а 6, более того сам div табов находится в таблице.. которая еще в таблице и еще в дивах и т.д. Все работало до этих двух злополучных таблиц. Если удалить четверть записей class=»left» от колонок последней таблицы — она работает. Я не вижу логики такого поведения.. Буду рад, если разберемся в чем же дело..

    • Вы мне покажите живой пример всей страницы, а не часть кода, по которому ничего не понятно.

      • Давайте я сам ссылку скину на почту, не хочу просто светить адрес. Сначала покажу как оно выглядит с табами (сейчас съело подвал), а потом покажу как оно выглядит при небольшом изменении таблицы (замена картинок с плюсами просто на плюсы.. Если вы не против — я отпишу адрес вам на почту. :)

  18. Я пока прихожу к выводу, что такое поведение вызывается «переполнением» значения некоего количества символов.. я убрал остальные вкладки, оставив только две с таблицами — все работает..

  19. gard помочь мне до установить или переустановить правильно скрипт этот, а то я не стандартно поставил вклади не так как надо малость отображаются? Дам доступ по ftp, мой адрес KW-WS@yandex.ru, договоримся об оплате, если что.

  20. Не подкинете такой пример что бы вкладки были как на верху, так и внизу? Желательно с сохранением кук. Буду очень благодарен

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