Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...
Внимание! Нижеизложенная статья на данный момент не актуальна. Вместо нее читайте статью «Универсальный jQuery-скрипт для блоков с вкладками (табами)«. * * * Примерно последние месяц-два на англоязычных блогах мне стали ...
Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по ...
На своем другом блоге я недавно объяснил, почему в данный момент кнопка «Google +1» не может быть добавлена в моем сервисе Share42.com, о чем все просят. Однако прямо сейчас на ...
Внимательные пользователи моего сайта Share42.com заметили, что на нем с определенной поры появились красивые всплывающие подсказки, и меня попросили рассказать, как такое сделать. Поэтому я хочу поделиться с вами моим ...
Комментарии (978)
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
ul.tabs, ul.tabs li {margin: 0; padding: 0;}
Это комментарий к коду.
Не хочу, чтобы его копировали.
Сделал tab’ы и в один из них еще один tab, при нажатии на внутрений tab, переключаются внешние.
тоже не могу понять как правильно реализовать горизонтальный таб в вертикальном
Действительно хороший пример — перелопатил кучу примеров реализации табов на jQuery — этот самый простой, без сумасшедших css, когда вообще не ясно, что и где править, чтобы подогнать под себя, без кучи подключаемых плагинов js. В общем, спасибо!
Пожалуйста. Рад, что скрипт полезен. Спасибо за отзыв.
Dimox, спасибо! отличный скрипт, скажи пожалуйста, во втором варианте с запоминанием активной вкладки, где можно указать время на которое он будет запоминать?
На сколько я понимаю вот здесь:
date.setTime(date.getTime()+(days*24*60*60*1000));
А что написать чтобы он на час запоминал??
Указывается в этой строке вместо цифры 365 (это количество дней):
А чтобы в часах сделать, нужно редактировать строку, которую вы указали. Только я не знаю, что в ней менять.
date.setTime(date.getTime()+(days*60*60*1000));createCookie('tabCookie'+ulIndex, $(this).index(), 1);этого должно быть достаточно :)
Спасибо за ответы!
Доброго времени суток. У меня проблема. Тяяжело разобраться самому, вот хочу спросить. Скачал тему для вордпресс, там в самой теме статичный сайдбар должен отображаться в вкладках, как у вас: Последние, Популярные, Новостные. Но он почемуто не работает, вкладки то отображаются а само содержимое отображается по типу обычного сайдбара, пример на вашем: Верхний блок Последние( там же отображаются и другие вкладки и Популярные и Новостные) а ниже блок Популярные, еще ниже Новостные. Тоесть вкладки то отображаются но блоки разбитые на три часи. Все не отображается в одном, как у вас. В чем тут проблема? ответьте здесь, или мне на мыло. Плиз. Я не вебмастер, прошу ответ как чайнику.
Видимо, в каком-то место код неправильно вставляете.
Я не вставлял ничего. Там стандартно в теме должно так отображаться, я хочу узнать какие могут быть причины?
Тогда обращайтесь к создателю темы, а не ко мне. Я не знаю, что там у вас в коде.
в ИЕ работает а Опере не хочет, хоть в чем причина может быть?
Dimox, доброго времени. В Opera 11 tab’ы не переключаются:(
Вот тут можно убедится…
Оч прошу помочь решить проблему!
Спасибо
Где «тут»?
Странно, ссылка не вставилась…
вот тут: http://www.a-lab.name/ не работает
Вкладки Краснодар и Омск.
Вместо jQuery версии 1.4.2 подключите версию 1.4.4, с ней должно работать.
Спасибо огромное!
Действительно, с 1.4.4 работает!!!
Здравствуйте!
Подскажите, пожалуйста…
У меня табы съезжают в Internet Explorer…
Уже не знаю, что и делать..
В Opera и FireFox все ок…
Вот сайт: http://world-of-photo.ru/
Извините, не люблю разбираться в чужой верстке.
хороший скрипт, вот беда то, ни как не могу подгрузить его аяксом((. Т.Е есть страница на которой аяксом грузится содержимое из бд. Хотел прикрутить ваш скрипт но ни как(( есть варианты???
Огромное спасибо!
Очень лакончино, как раз то, что надо!
Здравствуйте!
А гугл за display:none банит сайты???
С чего бы это?
А у меня в IE почему то едет все…
То, что нужно)) Автору большое-пребольшое спасибо)
Здравствуйте!
Dimox, приходилось ли Вам видеть те несколько функций из jQuery-скрипта, — нужные для работы блоков с табами, — отдельно? Или может есть фреймворк меньших размеров (10-20 кб) для их создания?
Это необходимо, потому что предполагается вписать его в тело другого скрипта.
Все мои поиски результата не принесли.
Не приходилось.
Тут в архиве, кстати (дать прямую ссылку не получилось), лежит фреймворк на 30 кб, против обычных 70-ти и выше.
Лучше jquery грузить с гугла. Он отдает ее в сжатом виде и довольно быстро. Сам пользуюсь. Вот адрес http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2 — и работает она с вкладками замечательно и вес 24 килобайта и ооочень большой + что возможно она уже есть у посетителей вашего сайта. т.к. большинство сайтов в интернете используют именно её, а не собственноручно кастрированную версию. Посмотреть вкладки можете на главной странице моего блога — там я встроил 2 раза их. И это говорит что этот код работает. Нужно лишь чуть чуть включить голову.
Вы, судя по всему, не внимательно читали мой первый пост, — нужно лишь чуть чуть включить голову, — и многие умствования отпадут.
Вы хотели из оригинального jquery вырезать необходимые функции чтоб не использовать его полностью. И я вам привел несколько доводов ЗА использование фреймворка полностью
Владимир, я хотел в конечном итоге вписать его в тело другого скрипта. Но, не важно…
Если интересно, здесь получил ответ.
Здравствуйте. Есть очень важный вопрос. Я хочу поделить вкладки на — ОПИСАНИЕ- ЦЕНЫ — ОТЗЫВЫ. И если человек допустим будет искать отзывы и с гугла его закинет на страницу то вкладка отзывов не бутет активна или как???? Если нет то как этого добится????
И еще, не глупо ли вообще помещать отзывы в одну из вкладок??? Очень прошу помочь.
Не будет.
Никак не сделать.
По-моему, вполне нормально.
Спасибо за ответ)
Не совсем понятно, вернее совсем не понятно как в эти табы вложить виджеты ворпресса? Например для двух вкладок Архивы и Последние статьи, как сделать правильно, кто-нибудь может подсказать?
Никак не сделать, потому что структура кода под них не подходит.
А разве у тебя в сайдбаре не этот скрипт применен? К примеру, мне интересно решение в верхнем блоке, где «Последние, Популярные, Новостные». Как такое организовать в вордпрессе? Есть ли мануал, чтобы почитать вдумчиво?
Нет, я виджеты не люблю и не использую, код вставляю прямо в шаблон. А мануалов в Интернете навалом.
Вот возник такой вопрос!
К примеры у меня есть активный бокс (в смысле облать экрана определённой разметки и т.д) и есть автоматически генерируемая таблица, в которой есть строки, можно ли реализовать так, чтоб при наводе на определённую строку иначе (tr) менялось содержимое этого бокса точно в такой вариации как и увас при клике по табу. Здаётся мне что это не реализуемо так строки в таблице не имеют свой индекс как например ul->li???? Буду очень признателен, если вы мне хоть чем нибудь поможите.
Думаю, что можно. И строки тоже имеют свой индекс. По аналогии с
ul > liв таблице будетtable > tr.Скрипт помог! Спосибо, но…
Спасибо, хороший скрипт, искал как раз для одного проекта.Понравилось то ,что все просто.
P.P.S.
про велосипед и jQuery UI
зачем подключать и инициализировать огромный код, если есть такое элегантное решение?
спасибо автору