Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...
Внимание! Нижеизложенная статья на данный момент не актуальна. Вместо нее читайте статью «Универсальный jQuery-скрипт для блоков с вкладками (табами)». * * * Примерно последние месяц-два на англоязычных блогах мне стали попадаться на глаза блоки в сайдбаре, ...
Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по душе. Вариант на JavaScript Можно посмотреть готовый ...
На своем другом блоге я недавно объяснил, почему в данный момент кнопка «Google +1» не может быть добавлена в моем сервисе Share42.com, о чем все просят. Однако прямо сейчас на данном блоге вы можете наблюдать, что кнопка «Google ...
Внимательные пользователи моего сайта Share42.com заметили, что на нем с определенной поры появились красивые всплывающие подсказки, и меня попросили рассказать, как такое сделать. Поэтому я хочу поделиться с вами моим очередным небольшим jQuery-скриптом, который поможет ...
Комментарии (978)
Надо добавить. В третьих, гугл отдает этот файл в gzip, который весит всего 24кб. Распаковывается он на клиентской стороне. 72кб он весит, уже в распакованном виде.Т. е. у гугла его размер 24кб.
Как ты узнал, что размер 24 Кб и где написано, что Гугл отдает его в gzip (ссылку на источник)?
Kama совершенно прав. Мне Гугл отдает
24,1Кб. за 78ms.
Это сведения FireBug.
Без услуг Гугла тотже файл весит 70,5Кб и идет 120ms.
Выводы напрашиваются сами собой…
Теперь ясненько, откуда инфа. Тогда это вообще замечательно. Сейчас дополню информацию.
Ссылки на источник нету :)
Просто, мне в голову пришло это проверить, когда себе ставил такую ссылку, — это же Гугл… YSlow подтвердил и вот этот аддон тоже подтвердил: addons.mozilla.org/en-US/firefox/addon/6647 (проверка http заголовков).
Я сам обрадовался такому положению вещей, поэтому решил тут народ порадовать :)
Интересует меня следующая возможность. Можно ли таким способом поместить в блок счётчики посещений, чтоб они не мозолили глаз, но в то же время считали? Было бы не плохо организовать такой виджет).
Отличный скрипт, спасибо)
Выглядит замечательно)
Прежде всего хочу поблагодарить за скрипт — использовал его на сайте :)
Столкнулся с тем, что скрипт работает на странице, но если табы запихнуть в thickbox то перестает работать… Кто-нибудь с этим сталкивался?
Скажите как сделать чтобы скрипт работал не по окончании загрузки, а сразу. Я пока не силен в jquery. У меня datatable заработал. А с этим скриптом не получается.
Причина такой просьбы — иногда прилично приходится ждать пока загрузятся всякие счетчики, сторонние js. а нужная инфа на скрытых закладочках
Не представляю, как это можно сделать. jQuery подключают таким образом, чтобы он обрабатывался только после полной загрузки страницы.
Наверное как-то можно. Например плагин jQuery — DataTable подключается так —
oTable = $('#SortTable').dataTable ({прямо в середине страницы и работает не дожидаясь загрузки всего документа…
Эх нехватает у нас с вами квалификации.
Но всеравно большое спасибо за палагин.
Все хорошо, однако, если, допустим, во второй вкладке прописать форму (любую) с submit, то при клике по кнопке перекидывает на первую вкладку…
Подскажите!
Мне нужно создать вкладки на странице pokerschuler.com/?p=17, не в сайтбаре.
создал файл с расширением .js и закинул в папку шаблона, где скрипты.
А вот это не пойму где вписывать:"Не забывайте в первую очередь подключить сам фреймворк jQuery (если он еще не подключен на вашем сайте), например, так (вставляется между тегами и)", но в шаблне page. php и single. php нету
тегов, или вставлять только в index.php.
И бязательные CSS-стили для вышеуказанного HTML-кода, прописывать в CSS шаблона?
Пока получилось как на странице 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, договоримся об оплате, если что.
Не подкинете такой пример что бы вкладки были как на верху, так и внизу? Желательно с сохранением кук. Буду очень благодарен