Универсальный jQuery-скрипт для блоков с вкладками (табами)
Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...
Комментарии (978)
Надо добавить. В третьих, гугл отдает этот файл в gzip, который весит всего 24кб. Распаковывается он на клиентской стороне. 72кб он весит, уже в распакованном виде. Т.е. у гугла его размер 24кб.
Как ты узнал, что размер 24 Кб и где написано, что Гугл отдает его в gzip (ссылку на источник)?
Kama совершенно прав. Мне Гугл отдает
24,1Кб. за 78ms.
Это сведения FireBug.
Без услуг Гугла тотже файл весит 70,5Кб и идет 120ms.
Выводы напрашиваются сами собой…
Теперь ясненько, откуда инфа. Тогда это вообще замечательно. Сейчас дополню информацию.
Ссылки на источник нету :)
Просто, мне в голову пришло это проверить, когда себе ставил такую ссылку, – это же Гугл… YSlow подтвердил и вот этот аддон тоже подтвердил: https://addons.mozilla.org/en-US/firefox/addon/6647 (проверка http заголовков).
Я сам обрадовался такому положению вещей, поэтому решил тут народ порадовать :)
Интересует меня следующая возможность. Можно ли таким способом поместить в блок счётчики посещений, чтоб они не мозолили глаз, но в то же время считали? Было бы не плохо организовать такой виджет).
Отличный скрипт, спасибо)
Выглядит замечательно)
Прежде всего хочу поблагодарить за скрипт – использовал его на сайте :)
Столкнулся с тем, что скрипт работает на странице, но если табы запихнуть в thickbox то перестает работать… Кто-нибудь с этим сталкивался?
Скажите как сделать чтобы скрипт работал не по окончании загрузки а сразу. Я пока не силен в jquery. У меня datatable заработал. А с этим скриптом не получается..
Причина такой просьбы – иногда прилично приходится ждать пока загрузятся всякие счетчики, сторонние js.. а нужная инфа на скрытых закладочках
Не представляю, как это можно сделать. jQuery подключают таким образом, чтобы он обрабатывался только после полной загрузки страницы.
Наверное как-то можно. Например плагин jQuery – DataTable подключается так –
oTable = $('#SortTable').dataTable({
прямо в середине страницы и работает не дожидаясь загрузки всего документа…
Эх нехватает у нас с вами квалификации..
Но всеравно большое спасибо за палагин.
Все хорошо, однако, если, допустим, во второй вкладке прописать форму (любую) с submit, то при клике по кнопке перекидывает на первую вкладку…
Подскажите!
Мне нужно создать вкладки на странице http://pokerschuler.com/?p=17, не в сайтбаре.
создал файл с расширением .js и закинул в папку шаблона, где скрипты.
А вот это не пойму где вписывать:”Не забывайте в первую очередь подключить сам фреймворк jQuery (если он еще не подключен на вашем сайте), например, так (вставляется между тегами и )”, но в шаблне page.php и single.php нету
тегов , или вставлять только в index.php.
И бязательные CSS-стили для вышеуказанного HTML-кода, прописывать в CSS шаблона?
Пока получилось как на странице http://pokerschuler.com/?p=17. Можете подсказать, а то я новичек пока в jQuery?
Вставлять нужно в файл header.php.
Да.
Я вставил в header.php код с прописаным путем до файла скрипта на моем хостинге: , сам 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!
Спасибо автору – работает все отлично!
Можно ещё и не только для админки и скрипт брать всегда последней минимальной версии, например так:
Очепятался :-)
Должно было быть: …можно и для админки…
Пишу о глюке, найденном при использовании внешнего упакованного jQuery для админки WordPress’а – не корректно работает переключение режимов редактирования с визуального на HTML и обратно + там же не все кнопки работают.
Как писал Владимир надо действительно переопределять jQuery не для админки.
В моём примере это так:
Дак если я подключу jquery-1.4.2.min.js, код только короче станет, а все остальное также и CSS тоже надо править? Если кто может помочь и посмотреть, дам доступ по ftp, мой адрес KW-WS@yandex.ru, договоримся об оплате, если что.
Подключил jquery-1.4.2.min.js и аставил код короче, ничего не изменилось.
Мм, на почту ответь в общем, – помогу.
Короче говоря решил проблему добавив в 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;
}
Тогда работает.
спасибо большое за пример, но очень бы хотелось чтобы было запоминание выбранной вкладки после перезагрузки страницы, если кто может сдеалать выложите пожалуйста, сам я в jquery слабо разбираюсь
Уже сделано.
Не совсем понял? Но после вставки кода, который я добавил у меня при изменеиий СSS вкладок, цветов тоесть и в самом шаблоне меняются при этом цвета))), так не должно быть, надо чтоб отдельно. Буду думать, кто может что подсказать подскажите.
А как сделать чтобы содержимое неактивных вкладок загружалось только после нажатия на них, а не все вместе?
Ну это уже надо другой скрипт писать. Поищите в Интернете, такие решения имеются.
У меня просто в блоке несколько PHP файлов хотелось бы их подгружать через jQuery но чтобы загружались не все сразу, а только при нажатии (чтобы нагрузка меньше и быстрее). Сколько не ищу все “блоки с вкладками” грузятся сразу. Может подскажите название, а то я даже не знаю как это называться толком?
Попробуйте погуглить по запросу “jQuery tabs ajax”, вроде бы это оно.
Здравствуйте!
С успехом применяю ваш скрипт в страничках… но недавно наткнулся на одну неприятную особенность.. незнаю чем это вызвано, но при вставке большой таблицы во вкладку – вкладка “захватывает” идущий за ней (после закрытия div section и div самого бокса) контент. Она растягивается вниз и вбок.. Уже все перепроверил на 10 раз.. не вижу, чтобы где то была ошибка..
Покажите пример.
Вот у меня две таблицы:
[…вырезано…]
Не могу вставить эти таблицы в разные вкладки.. Или я что-то глаза замылил или это мистика.. На самом деле табов не два, а 6, более того сам div табов находится в таблице.. которая еще в таблице и еще в дивах и т.д. Все работало до этих двух злополучных таблиц. Если удалить четверть записей class=”left” от колонок последней таблицы – она работает. Я не вижу логики такого поведения.. Буду рад, если разберемся в чем же дело..
Вы мне покажите живой пример всей страницы, а не часть кода, по которому ничего не понятно.
Давайте я сам ссылку скину на почту, не хочу просто светить адрес. Сначала покажу как оно выглядит с табами (сейчас съело подвал), а потом покажу как оно выглядит при небольшом изменении таблицы (замена картинок с плюсами просто на плюсы.. Если вы не против – я отпишу адрес вам на почту. :)
Я пока прихожу к выводу, что такое поведение вызывается “переполнением” значения некоего количества символов.. я убрал остальные вкладки, оставив только две с таблицами – все работает..
gard помочь мне до установить или переустановить правильно скрипт этот, а то я не стандартно поставил вклади не так как надо малость отображаются? Дам доступ по ftp, мой адрес KW-WS@yandex.ru, договоримся об оплате, если что.
Не подкинете такой пример что бы вкладки были как на верху, так и внизу? Желательно с сохранением кук. Буду очень благодарен