Универсальный jQuery-скрипт для блоков с вкладками (табами)
Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге.
С тех пор прошло 2 года, я набрался определенного опыта в работе с jQuery, и вышеуказанный скрипт превратился в абсолютно новый скрипт, написанный мною полностью с нуля. Перед этим был еще один вариант данного скрипта, которым я пользовался, наверное, год. О нем я нигде не писал, да и сейчас уже нет смысла это делать, т.к. он потерял свою актуальность.
Почему я называю свой новый скрипт для jQuery-вкладок универсальным:
- он позволяет создавать неограниченное количество вкладок в пределах одного блока, при этом нет необходимости нумеровать вкладки с помощью CSS-классов, как это было сделано в старом варианте;
- можно создать сколько угодно таких блоков с вкладками опять же без необходимости нумеровать эти блоки через CSS-классы;
- содержимое jQuery-скрипта, реализующего вкладки, остается неизменным (всего 0,4 килобайта), т.е. не разрастается в зависимость от количества блоков или вкладок, как это было в старом варианте, при этом размер нового варианта скрипта не больше размера скрипта для одного блока с вкладками из старого варианта.
Что ж, хватит сухих слов, переходим к сути.
Код jQuery-крипта для переключаемых блоков с вкладками
Не забывайте в первую очередь подключить сам фреймворк jQuery (если он еще не подключен на вашем сайте), например, так (вставляется между тегами <head> и </head>):
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
Я предпочитаю “брать” его с Гугла, поскольку, во-первых, велика вероятность, что у посетителя, который зайдет на сайт, jQuery уже закэширован в браузере (значит страница загрузится быстрее), во-вторых, скорость серверов Гугла стабильна и быстра, в-третьих, Гугл отдает его в сжатом виде (gzip), и, например, для версии 1.4.2 размер составляет всего 24 килобайта по сравнению с несжатым файлом (70 Кб).
Вот такой у меня получился, на мой взгляд, миниатюрный и красивенький скрипт:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | (function($) { $(function() { $('ul.tabs').each(function() { $(this).find('li').each(function(i) { $(this).click(function(){ $(this).addClass('current').siblings().removeClass('current') .parents('div.section').find('div.box').hide().end().find('div.box:eq('+i+')').fadeIn(150); }); }); }); }) })(jQuery) |
Для тех, кто еще не знает, как подключать этот скрипт - создать файл с расширением .js, вставить в него код скрипта и подключить по аналогии c jQuery (см. выше), естественно, заменив ссылку на адрес скрипта.
В этом скрипте, кстати, еще реализован эффект плавного появления переключаемых блоков.
HTML-код, который нужно использовать для скрипта
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="section"> <ul class="tabs"> <li class="current">1-я вкладка</li> <li>2-я вкладка</li> </ul> <div class="box visible"> Содержимое первого блока </div> <div class="box"> Содержимое второго блока </div> </div><!-- .section --> |
Обратите внимание, что структура HTML-кода строго привязана к скрипту, поэтому, если вы пожелаете изменить названия используемых классов, не забывайте их поменять и в скрипте.
Обязательные CSS-стили для вышеуказанного HTML-кода
1 2 3 4 5 6 | .box { display: none; /* по умолчанию прячем все блоки */ } .box.visible { display: block; /* по умолчанию показываем нужный блок */ } |
Если, например, необходимо, чтобы по умолчанию отображался второй блок, тогда нужно переместить класс .visible во второй блок div.box, а также переместить класс .current во второй элемент в списке вкладок.
Примеры
- Живой пример jQuery-вкладок вы можете наблюдать прямо на этом блоге в сайдбаре.
- Отдельный пример, который можно скачать ниже. На этот раз представляю 2 варианта: с горизонтальными и с вертикальными вкладками.
- Еще один пример, в котором запоминается активная вкладка после перезагрузки страницы.
Скачать
Универсальный jQuery-скрипт для блоков с вкладками
Загрузок: 1207 | Размер: 4 Кб
Я не исключаю того, что можно создать аналогичный скрипт меньшего размера (можеть быть он и существует), но пока у меня получилось так, как получилось, и меня это только радует. Вдвойне приятно то, что я пришел к этому сам.
P.S. Мне в твиттере как-то сказали, что я “изобретаю колесо”, что такой скрипт уже есть в jQuery UI. Ну и пусть, пусть я “изобрел колесо”, главное, что я получаю большое удовольствие от данного процесса и одновременно повышаю свой опыт в jQuery. Разве это плохо? =)
Обновление от 07.03.10
Спасибо пользователю Keleran, который в комментариях подсказал еще более сокращенный вариант скрипта (обратите внимание, что для него нужно использовать jQuery не ниже версии 1.4.2):
1 2 3 4 5 6 7 8 9 10 | (function($) { $(function() { $('ul.tabs').delegate('li:not(.current)', 'click', function() { $(this).addClass('current').siblings().removeClass('current') .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150); }) }) })(jQuery) |
* * *
Требуется разработка печатного каталога товаров или услуг? Создание каталога в студии «Верстаем.ru» это оптимальное решение!
Огромное спасибо Дмитрий, пригодилось. Сделал RT.
Спасибо, но при нажатии на уже открытой вкладке можно вообще ничего не делать.
вариант с jQuery UI не уложится в 4кб :)
Надо говорить не про 4 Кб, а про 0,4 Кб, именно столько занимает мой скрипт.
спасибо за скрипт, перепробовал несколько вариантов на Maxsite и все криво работали…
этот же заработал сразу, так что дальше изобретайте такие хорошие “колеса” ;)
Спасибо за очень приятный комментарий! =)
Точно :)
ну тем более. Ради табов тащить ядро jQuery-UI не вижу смысла.
К сожалению, в Вашем примере если отключить JavaScript, то текста не будет. Для робото-поисковых систем это не есть гуд.
Пробовали для этого случая включить контейнеры ?
Если текст скрыт с помощью CSS, это вовсе не значит, что его не видит поисковый робот.
если javascript отключить то много чего не будет, не только текста
Здорово! мне понравилось. как появится необходимость во вкладках, использую именно этот скрипт
Спасибо за пост, это как-раз то что я искал, с jQuery работаю не давно. Всё чётко и ничего лишнего.
P.S.
И ещё спасибо отдельное за предыдущие посты, всё-таки я чего-то научился ;)
Не знаю, надо ли тебе это слышать в очередной раз, но - ты молодец, Дима!
Конечно, надо =) Спасибо!
Ачуметь! Плагин бомба. Дима, большой РЕСПЕКТ и УВАЖУХА!
Отличный скрипт, чётко, локанично, и главное - работает! Большое человеческое спасибо.
Не так давно столкнулся с необходимостью сделать красивый вывод контента на сайте с помошью анимированных табов, так вот для реализации задуманного пришлось использовать довольно громоздкий скрипт, а теперь я вижу что всё намного проще и эффективнее.
[b]P.S.[/b]
А вообще в последнее время всё реже встречаются вот такие вот люди как Дмитрий, которые делятся своими наработками с массами, пусть даже ктото скажет: я это придумал уже давно, и пользуюсь. Но ведь этот ктото не пожелел поделиться с людьми….. а Дмитрий хотябы нашол время, чтобы расписать, разложить по полочкам для начинающих и не очень вебмастеров нужную информацию.
[b]P.P.S.[/b]
солидарен с мнением автора.
Здорово!
Однако, при включении вертикально-расположенных табов, страница неприятно перескакивает вверх. Говорю про онлайн пример.
Браузер — Опера 10.
Очень элегантное решение.
Вопрос: нужно ли для каждого блока табов вставлять отдельную такую функцию или этот скрипт обрабатывает все блоки с табами на странице?
На здоровье. Спасибо за комментарий!
Я для того и веду блог, чтобы делиться интересной и нужной информацией =)
Такой неприятный эффект происходит тогда, когда переключаемые блоки уходят вниз за границу окна браузера. Когда они полностью влазят в экран, то такого не наблюдается.
К сожалению, я не знаю, каким образом устранить эту неприятность.
Видимо, вы не внимательно читали статью. Я четко написал, что функция в таком случае не разрастается (не дублируется), на то она и универсальная.
Я бы рекомендовал добавить ещё пару-тройку строк кода, чтобы реализовать данное решение в виде метода (плагина) jQuery, для использования в (возможно) позже появившихся (например с ajax-запроса) таб-блоках, на которые существующий код, естественно, не подействует, так как выполняется единожды.
e.g. $(’#foo’).myTabs();
P.S. Решение хорошее и лёгенькое. Сам однажды такое создал, но с дополнительными хендлерами, запретом нажатия табов, запретом “покидания” таба при определённых условиях и т.п. Но это только потому, что была в этом потребность.
Спасибо.Полезно. Возьму на заметку!
Для полной универсальности, может быть стоит совместить вертикальные и горизонтальные закладки в единое целое.
Тогда к примеру выбрав в вертикальном табе одну из закладок,
на ней используем горизонтальные, что несколько расширяет область применения.
Возможно, есть смысл сделать закрытие вкладки по клику на открытой, тоже весьма полезная фишка.
Добавьте жирный заголовок в текст во вкладке и посмотрите как он будет выглядеть в ИЕ 6,7 при клике на этой вкладке.
(Шрифт получается “обглоданным”).
Сравните шрифт в горизонт. вкладке (при клике на нее) и внизу (вертикальных вкладках).(в ИЕ 6,7)
Если решите проблему, то табы будут отличные. Я пока не нашел решения(((.
Совсем ничего не понял.
Что значит “закрытие”?
Это проблема браузера. При переключении вкладок он почему-то отключает сглаживание текста.
Решается следующим образом. Вместо этих строк:
2
p.find('div.box:eq('+i+')').animate({opacity: 1}, 500).show();
используйте эти:
2
p.find('div.box:eq('+i+')').show();
Только при этом не будет эффекта плавного появления.
Имеем общий блок.
Ссылки табов в нем расположены и горизонтально, и вертикально.
Выбираем одну из закладок по вертикали.
И на этой закладке пользуемся горизонтальными закладками.
Или наоборот сначала делаем выбор в горизонтали далее работаем с вертикалью.
Приблизительно так
Делал для себя потом забросил :)
Клик на ссылке открытого таба превращает все в горизонтальное или вертикальное меню.
Может быть даже при открытии страницы все табы свернуты.
Это в любом случае лучше чем было. С эффектом думаю можно что-нибудь придумать (прикрутить другой).
Запихни div.section в div.box другого div.section и получишь то, что надо.
Непонятно, что это и для чего нужно.
Просто удали класс .visible из хтмл-кода и все будут свернуты.
Все верно, собственный вариант всегда лучше стандартного решения из паблика. Именно подобные новшества и выделяют один сайт из числа многих сайтов.
Хочется много чего реализовать, но пока не хватает компетенции.
Есть более простое решение - не использовать гов**браузеры, и прикрутить к сайту скрипт, запрещающий просмотр сайта через IE 6. сколько можно пользоваться браузером, который устарел много лет назад, почему никто не пишет, типа “сайт криво отображается в Opera 7 или FF1 ??
Поддерживаю, за исключением запрета просмотра в ИЕ6, для него можно просто ограничить функционал.
Спс за скрипт. Давно такой искал. Жду новых разработок ))
спасибо Дим, буду пробовать
за скрипт спасибо, как раз для одного сайта пригодится.
оффтоп: не знаешь как разбить теги на категории? чтобы моңно было выводить и т.д. как у слона под статьями, напр. http://slon.ru/articles/309304/
Я, так понимаю, тебе это для ВП нужно. Не знаю. Самому интересно, как такое сделать.
Спасибо за скрипт, Дима. Ох как бы он мне пригодился полгода назад.
А о старом варианте не знал? Он же 2 года, как на блоге выложен.
Не знал. Я тогда какое-то другое решение нашел.
нашел
http://www.sonika.ru/blog/wordpress/wordpress-taxonomies-28.htm
у меня все получилось
http://etatar.ru/8/37385
Спасибо, возьмем на заметку.
Больше похоже на решение конкретной проблемы, чем на универсальный скрипт. Для универсальности не хватает настроек.
Код можно значительно сократить, примерно так:
2
3
4
5
$('ul.tabs').delegate('li:not(.current)', 'click', function() {
$(this).addClass('current').siblings('.current').removeClass('current').parents('div.section:first').find('div.box').hide().eq($(this).index() ).fadeIn(150);
});
});
Скрипт хорош, а можете подсказать как сделать так, чтобы он запоминал открытую вкладку, и при переходе (или обновлении) на другую страницу, показывал открытой ту вкладку, которая была активна.
Примерно догадываюсь, что это как то надо сохранить в куках, но опыта маловато пока в этом.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function() {
$('ul.tabs').each(function() {
$(this).find('li').each(function(i) {
$(this).click(function(){
$(this).addClass('current').siblings().removeClass('current');
var p = $(this).parents('div.section');
p.find('div.box').hide();
p.find('div.box:eq('+i+')').show();
});
});
});
})
})(jQuery)
Нет эффекта при появлении, но и нет глюка с перескакиванием в начало страницы. А нужный эффект, если не ошибаюсь, можно прописывать в свойствах show().
Ну и, конечно же, спасибо!
Да, действительно. Проблема, значит, в animate().
Хороший блог, полезные статьи. Спасибо, Дмитрий. Подписался на RSS!
Добрый день.
Я бы на вашем месте не объявлял .current в табах и .visible в боксах — мне кажется, это лишняя манипуляция. Класс .visible можно принудительно обозначить для соответствующего элемента при обработке скрипта.
Побольше бы таких колес и мир стал бы в разы лучше :-) Так что давай, изобретай еще велосипед, электричество и всё остальное - мы будем только рады твоим таким изобретениям :-)
О чем это я.. А да, спасибо тебе, Дим, - ты как всегда великолепен!
Полностью переписал сайдбар благодаря твоим вкладкам :-)
Все здорово, а не подскажет ли кто как сделать вложенные табы :) Что-то я итак и сяк и никак…
решил вопрос дублированием кода скрипта… и элементов на форме. более красивого нет решения?
+1, тоже интересно очень.
Они используются для того, чтобы при отключенном JavaScript все отображалось как следует.
Спасибо =)))
Что за вложенные табы?
Как у меня появится настрой, сделаю пример.
Хорошее минималистическое решение, уже пристроил к делу в блоге, где табы уже используются. Смущает одно, а есть ли смысл только для табов подключать библиотеку под 50-70 кило? Может быть найдется решение изменить код к примеру у “tabbera” - у него на все про все 8 кило.
Только ради табов не стоит. В таком случае лучше действительно найти решение на чистом JavaScript.
Все таки очень нужно при обновлении страницы оставлять на активной вкладке, хотя бы чуток толкните в сторону решения (опыта совсем нет :((()
вложенные значит внутри одного бокса еще несколько табов
Нужно подключать скрипт для кук, который используется здесь.
Вот здесь я ответил на этот вопрос.
Сделал пример.
Спасибо :) за 3 дня плотного использования JQuery, узнал ОЧЕНЬ много нового и началось это с твоих табов :)))
Пожалуйста =)
Dimox, спасибо за скрипт! jQuery очень удобен в этом плане)
Великолепная работа.
Есть вопрос -
Как сделать, чтобы поисковили индексировали
содержимое?
А кто сказал, что они его не индексируют?
Не могу пройти мимо, не написав +1.
Хороший компактный скрипт, только конфликтует с datepicker почему-то… что первым поставишь, то и будет работать. Очень жаль ((
В сокращенном скрипте анимация присутствует?
Да.
Теперь нужно попробывать сделать на своем блоге такое. Выглидит на самом деле лучше.
Спасибо за плагин. Подскажи как исправить следующую ситуацию: если добавить табы внутрь другого таба, то всё перестаёт работать. Бага. Как избавиться? Хелп.
Сам спросил, сам отвечаю.
Для большей универсальности нужно заменить строку:
var p = $(this).parents(’div.section’);
на:
var p = $(this).parent(’div.section’);
И тогда начинают работать табы внутри табов. Хо-хо-хо.
Эммм… поспешил, всё равно не работает((
Хотел прикрутить аналогичный скрипт, но на всех страницах кроме главной отображался тупо текст вместо вкладок, а с этим все заработало как надо, спасибо. Так что изобретать такие колеса надо, раз предыдущие колеса квадратные =)
Вобщем, вот исправленный вариант, где можно вставлять табы внутри табов:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function() {
$('ul.tabs').each(function() {
$(this).find('li').each(function(i) {
$(this).click(function(){
$(this).addClass('current').siblings().removeClass('current');
//var p = $(this).parents('div.section');
var p = $(this).parents('div.section:first');
//p.find('div.box').hide();
p.find('>div.box').hide();
//p.find('div.box:eq('+i+')').show();
p.find('>div.box:eq('+i+')').show();
});
});
});
})
})(jQuery)
Закомментированы строки, которые были ранее.
Спасибо, улыбнуло =)
Я уписал табы в две строки кода.
2
$( '#' + $( this ).attr( 'rel' ) ).toggle();});
Кому интересно, - пример реализации здесь
У тебя приходится нумеровать блоки и соответствующие им табы, я же в своем скрипте этого избежал.
Да, так… Но при генерации html средствами скажем php, в нуменации нет проблем.
Я пытался избавить скрипт от поиска нужного элемента. Именно на это тратится основной код и время.
Отличная штука. Давно хотел что то подобно на блоге сделать, стоит задуматься. Правда надо дизайнера попанать…
Очень понравилось как вы сделали Reated Posts + Recent Post в конце статьи…
Вот блин…затупил что то я :( А как же быть если у меня в сайдбаре виджеты отображаются, а не кодом через sidebar.php выводится содержимое? :(
Такие табы с виджетами WordPress не совместимы. Придется выбирать одно из двух.
Вот подстава :( Видимо придется этим заморочиться лишь когда буду новый дизайн заказывать. А пока так буду.
У вас все красиво организовано, мне так нравится.
Очень интересный скрипт, а как вы сделали так, что при выделении текста курсором бек становится оранжевым?
http://dimox.name/overriding-the-default-text-selection-color-with-css/
Спасибо за статью,но вот столкнулся с такой проблемой что внутри вкладки при переключение на новую не срабатывают скрипты что находятся внутри вкладки,можно ли как нибудь это исправить?
К сожалению, даже не представляю, в чем может быть причина.
Большое спасибо. Мне пригодится этот пост. Скрипт очень нужный и полезный.
Спасибо.Полезно. Возьму на заметку!
И на сайты свои, наверное, добавлю - вещь интересная.
Ооо.. спасибо, попробовал на своем блоге ;)
А ещё подскажите как с помощью куков сделать запоминание последней открытой вкладки
Присоединяюсь к Ивану - Огромное спасибо!
Вот тут.
Дмитрий,огромное спасибо за статью=)
Подскажите плз, а как в ваши табы вставить функции вывод последних записей, комментов и рубрики новостей, например?
Не понял, в чем трудность. Скопировать код функций и вставить в код блоков с табами.
Спасибо за скрипт, очень понравился. Использую вариант с cookie, для запоминания открытого таба. Вот только вопрос возник, можно ли сделать так, чтобы для отдельно взятой страницы прописывались свои cookie? А то сейчас получается, открыл я например второй таб на первой странице, перешёл на допустим на третью, а там уже открыт второй таб, а хотелось бы, чтобы для каждой страницы было индивидуально.
Вот этого я не знаю.
Если выбор открытого таба для определённой страницы неизменен, то легче всего присваивать class=”current” нужному табу при генерации страницы.
Если предстоит запоминать выбор, то придется раскладывать дополнительные куки.
Меня, как раз, второе интересует. В jQuery я фактически 0, поэтому, не могли бы вы поподробней рассказать, как лучше реализовать всё это дело?
P.S. Предложили ещё такой вариант - поставить куке path аналогичный адресу страницы. Чтобы браузер не посылал это же куку при запросе других страниц.
Yamanga, о jQuery все можешь спросить здесь http://www.linkexchanger.su/forum/
Пости вопрос, поможем.
За статью спасибо! Очень пригодилось. Только жаль, что переключение не плавное - просто моргает. Как сделать, чтобы табы плавно переключались, как в этом примере: http://bitby.net/wp-demo/web/tabs1.html ?
В скрипте поменяй цифру 150 на побольше, например, 500.
Спасибо, помогло :)
Подскажите, кто силён в jQuery, как прикрутить анимацию (плавное появление) к табам с куками чтобы не перекидывало в начало страницы?
Попробовал взять за основу код этого блога, но чтото запутался в скрипте, мало я ещё соображаю в jQuery.
Классная штука! Спасибо.
В своё время я тоже использовал самописный простенький скрипт (здесь он в действии) + к ниму такой же простенький аналог ajax’а.
Скрипт просто сказка. Только не работаю вложенные вертикальные вкладки с вложенными горизонтальными вкладками :-(( помогите исправить
Надо добавить. В третьих, гугл отдает этот файл в 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 подключается так -
прямо в середине страницы и работает не дожидаясь загрузки всего документа…
Эх нехватает у нас с вами квалификации..
Но всеравно большое спасибо за палагин.
Все хорошо, однако, если, допустим, во второй вкладке прописать форму (любую) с 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 у меня подключен вот так <script type=”text/javascript” src=”/scripts/jquery-1.3.1.min.js”> и мой tabs.js тоже в одной папке с ним.
А файл CSS в админке выглядит вот так,он в корне шаблона лежит, я думаю в него обязательные CSS-стили не вписываются?
/*
Theme Name: Comfy Magazine
Theme URI: http://deluxethemes.com/
Description: A feature-rich magazine and news theme for WordPress.
Version: 1.09 Pro
Author: Ahmed Fouad
Author URI: http://deluxethemes.com/
*/
@import url(”style.php”);
А есть папка у шаблона styles, дак вот в ней много файлов CSS:
category,comments,featured,footer,global,header,layout,menu,reset,rtl,sidebar,stylesheet.css
Я вставил выше указанный блок в header.css и global.css, но ничего не произошло, что не так?
Затрудняюсь ответить.
А что мешает подключить 1.4.2? Опять же есть ли сама библиотека по указанному пути?
Дак если я подключу jquery-1.4.2.min.js, код только короче станет, а все остальное также и CSS тоже надо править? Если кто может помочь и посмотреть, дам доступ по ftp, мой адрес KW-WS@yandex.ru, договоримся об оплате, если что.
Подключил jquery-1.4.2.min.js и аставил код короче, ничего не изменилось.
Мучился сам с похожей проблемой.
Фишка в том, что 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!
Спасибо автору - работает все отлично!
Можно ещё и не только для админки и скрипт брать всегда последней минимальной версии, например так:
2
3
4
5
wp_deregister_script('jquery');
wp_register_script('jquery','http://code.jquery.com/jquery.min.js');
}
add_action('init','my_init_method');
Очепятался :-)
Должно было быть: …можно и для админки…
Короче говоря решил проблему добавив в 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 вкладок, цветов тоесть и в самом шаблоне меняются при этом цвета))), так не должно быть, надо чтоб отдельно. Буду думать, кто может что подсказать подскажите.
Пишу о глюке, найденном при использовании внешнего упакованного jQuery для админки WordPress’а - не корректно работает переключение режимов редактирования с визуального на HTML и обратно + там же не все кнопки работают.
Как писал Владимир надо действительно переопределять jQuery не для админки.
В моём примере это так:
2
3
4
5
6
7
wp_deregister_script('jquery');
wp_register_script('jquery','http://code.jquery.com/jquery.min.js','','Всегда_последняя_версия');
}
if( !is_admin()){
add_action('init','my_init_method');
}
А как сделать чтобы содержимое неактивных вкладок загружалось только после нажатия на них, а не все вместе?
Ну это уже надо другой скрипт писать. Поищите в Интернете, такие решения имеются.
У меня просто в блоке несколько PHP файлов хотелось бы их подгружать через jQuery но чтобы загружались не все сразу, а только при нажатии (чтобы нагрузка меньше и быстрее). Сколько не ищу все “блоки с вкладками” грузятся сразу. Может подскажите название, а то я даже не знаю как это называться толком?
Попробуйте погуглить по запросу “jQuery tabs ajax”, вроде бы это оно.
Здравствуйте!
С успехом применяю ваш скрипт в страничках… но недавно наткнулся на одну неприятную особенность.. незнаю чем это вызвано, но при вставке большой таблицы во вкладку - вкладка “захватывает” идущий за ней (после закрытия div section и div самого бокса) контент. Она растягивается вниз и вбок.. Уже все перепроверил на 10 раз.. не вижу, чтобы где то была ошибка..
Покажите пример.
Вот у меня две таблицы:
[…вырезано…]
Не могу вставить эти таблицы в разные вкладки.. Или я что-то глаза замылил или это мистика.. На самом деле табов не два, а 6, более того сам div табов находится в таблице.. которая еще в таблице и еще в дивах и т.д. Все работало до этих двух злополучных таблиц. Если удалить четверть записей class=”left” от колонок последней таблицы - она работает. Я не вижу логики такого поведения.. Буду рад, если разберемся в чем же дело..
Вы мне покажите живой пример всей страницы, а не часть кода, по которому ничего не понятно.
Давайте я сам ссылку скину на почту, не хочу просто светить адрес. Сначала покажу как оно выглядит с табами (сейчас съело подвал), а потом покажу как оно выглядит при небольшом изменении таблицы (замена картинок с плюсами просто на плюсы.. Если вы не против - я отпишу адрес вам на почту. :)
Я пока прихожу к выводу, что такое поведение вызывается “переполнением” значения некоего количества символов.. я убрал остальные вкладки, оставив только две с таблицами - все работает..
gard помочь мне до установить или переустановить правильно скрипт этот, а то я не стандартно поставил вклади не так как надо малость отображаются? Дам доступ по ftp, мой адрес KW-WS@yandex.ru, договоримся об оплате, если что.
Не подкинете такой пример что бы вкладки были как на верху, так и внизу? Желательно с сохранением кук. Буду очень благодарен
Хотел спросить не совсем по теме наверное.. кто знает, что можно сделать с CSS-ом, чтобы, если вкладки не влазят по ширине - они бы занимали максимальную ширину и слова в названиях вкладок переносились бы на следующую строку с ровнением по середине. :)
Я могу им просто пиксельно задать ширину и с учетом того, что у меня не бывает больше 5ти вкладок - они окажутся все такие красивые - одного размера, могу задать высоту и даже текс тпереносится при задании для .tabs li параметра display: table-cell;, но он выравнивается по верхней кромке.. vertical-align: middle; не помогает.. :) Научите как надо.
Выражаю благодарность gard за помощь, спасибо!
Я, наконец, научилась сооружать табы - слава Димоксу! :)
Есть небольшой вопрос по оформлению, если позволите..
Я сегодня несколько часов (ибо ламер, лох и нуб) потратила на то, чтобы подправить Ваш css под свой диз.
Осталась небольшая закавыка.. Вот, взгляните, пожалуйста на странице с постом (здесь, например: allpa.ru/pochemu-ya-stala-mac-userom/ - в самом низу сайдбара есть мои табы): получилось 4 вкладки, но оформление таково, что все вкладки по ширине не дотягивают до ширины “шапки” блока - справа остаётся мааахонький кусочек пустого пространства, что, на мой взгляд, некрасиво смотрится :(
Тут, я думаю, можно решить эту проблему, увеличив расстояние слева от начала вкладки до заголовка её и от заголовка вправо до конца вкладки (боже, как я тупо объясняю! надеюсь, Вы поняли меня…) - как?
Понимаете, я настолько устала от возни с css и я настолько плохо ориентируюсь в нём, что просто СИЛ МОИХ УЖЕ НЕТ, мозги не шевелятся - перестала соображать хоть что-нибудь.. :( Поэтому прибежала к Вам - хелп, плиз!
ПыСы: я Вас вовсю пиарю в Твиттере, Вы ж меня спасли своими табами и плавающей панелькой!
В файле стилей у себя найдите это:
2
3
4
5
6
7
8
9
10
11
float: left;
display: inline;
margin: 0 1px -1px 0;
padding: 0 13px 1px;
color: #777;
cursor: pointer;
background: #F9F9F9;
border: 1px solid #B4B4B4;
position: relative;
}
И цифру 13 пробуйте увеличивать, пока табы не растянутся на нужную ширину.
Видел, спасибо =)
Спасибо - да, это помогло :)
___________________
Продолжаю возиться с табами и уже поседела вся от умственного напряжения - мозгов-то чуть, а усилия по освоению табов ого-го какие.. о.О
Вопрос-просьба: мне, дорогой Димокс, нужен скрипт, в котором прописаны три вкладки: активная, вторая, третья (это я пытаюсь натянуть на Ваши табы сторонний css - там три вкладки, оформление чётко подогнано под них).
Тупо смотрю на скрипт, понимаю, что надо изменить “box” на какой-нить “second” и приписать какой-нить “last“, и всё это запихнуть в код скрипта, шоб он понял, что следующей за “current” вкладкой будет “second”, а за “second” - “last”, но уж в чём в чём, а в кодах и скриптах я полная дура.. :(((((
А там же ещё и HTML, который привязан к скрипту, а в нём ещё заморочка с “current” и “box visible” - это тоже надо осилить, уразуметь, что к чему привязывать..
Я знаю, как Ваши знания востребованы, отдаю себе отчёт, как ужасно Вы, должно быть, заняты.. и мне очень, ОЧЕНЬ стыдно отрывать Вас от важных дел.. но вдруг Вы согласитесь оказать любезность и подсказать нужный вариант скрипта? Ну, или пнуть меня в нужном направлении..
Спасибо!!!
Если правильно понял, что вы хотите, тогда сделайте так:
2
3
4
5
6
7
8
9
Содержимое первого блока
</div>
<div class="box second">
Содержимое второго блока
</div>
<div class="box last">
Содержимое третьего блока
</div>
Да, это именно то - спасибо!
А скрипт - его править не нужно? Ему важно наличе box visible и box, а что там к ним прибавляется (second, last) - не имеет значения?
Пожалуйста. Да, Вы все правильно поняли.
Табы соорудились, постепенно натягиваю на них нужный css, а пока одна проблема: после перезагрузки страницы в 1-м табе (открытом по умолчанию) отображается содержание ВСЕХ табов.
Если начать по табам щёлкать, то всё нормализуется - в каждом табе своё содержимое. Перезагружаем страницу - опять двадцать пять (1-й таб показывает содержимое всех табов).
Нет ли у Вас мыслей? Всё ж таки, наверное, надо править код скрипта под три таба, мм?..
Не вижу такого у Вас на сайте.
А можно как то закруглить углы табов с верху??
C помощью картинок или CSS3.