Случилась как-то необходимость подключить несколько виджетов JQuery на сайт, казалось бы всё просто, но не тут-то было. Тупое подключение отключает стандартные скрипты и, как выяснилось из интернетов, дает проблемы с Ligthbox2. Спустя пару дней получилось заставить заработать всё без проблем совместимости, чем и хочу с вами поделиться.
Итак, устанавливаем виджет Tabs на примере темы UI-Lightness на Drupal 6.20.
Понадобится
jQuery Update 6.x-2.x-dev
Проводит обновление библиотеки JQuery друпала до версии 1.3.2, что видно в /jquery_update/replase/jquery.js: " * jQuery javascript Library v1.3.2";
Всё дело в том, что версия 6.x-2.0-alpha1 проводит обновление до версии 1.4.4, нас же интересует именно библиотека 1.3.2 т.к. виджеты работают стабильно именно с ней, что видно на http://jqueryui.com/download: "(Stable, for jQuery 1.3.2+)"
Виджет Tabs
Модуль Query UI 6.x-1.4 мне не понадобился. Данная версия включает в себя версию библиотеки Jquery UI 1.6. На момент реализации была актуальна библиотека 1.8.9
Порядок действий
Устанавливаем скаченный модуль jQuery Update 6.x-2.x-dev
Создаем в каталоге с нашей темой папки js и css
Кладем в папку js следующие файлы:
Общие скрипты для выбранных виджетов
\js\jquery-ui-1.8.9.custom.min.js
ЛИБО
Скачать библиотеку полностью
code.google.com/p/jquery-ui/downloads/list версия 1.8.9
\ui\jquery-ui.js
development-bundle\ui\jquery.ui.tabs.js
скрипт виджета Tabs
Кладем в папку css следующие файлы:
\css\ui-lightness\jquery-ui-1.8.9.custom.css + папка images
Общие стили вашей темы
\development-bundle\themes\ui-lightness\jquery.ui.tabs.css
Стили для используемых виджетов (для виджета Tabs):
Открываем mytheme.info и дописываем
stylesheets[all][] = css/jquery-ui-1.8.9.custom.css
stylesheets[all][] = css/jquery.ui.tabs.css
scripts[] = js/ui/jquery-ui-1.8.9.custom.min.js
scripts[] = js/ui/jquery.ui.tabs.js
Либо, если нет желания подключать это для всей темы, то:
drupal_add_css(path_to_theme(). '/css/jquery.ui.tabs.css');
drupal_add_css(path_to_theme(). '/css/jquery-ui-1.8.9.custom.css');
drupal_add_js(path_to_theme(). '/js/ui/jquery-ui-1.8.9.custom.min.js');
drupal_add_js(path_to_theme(). '/js/ui/jquery.ui.tabs.js');
Создаем ноду типа страница.
Вставляем туда следующие (пример с jqueryui.com/demos/tabs/ — View Source)
//подключение виджета Tabs
$(function() {
$( "#tabs" ).tabs();
});
<!--Пример виджета Tabs-->
Morbi tincidunt, ut pharetra massa metus id nunc.
Mauris eleifend est et turpis. Duis id erat.
Не забываем после всего этого (а точнее изменения .info файла) очистить кеш. Сделать это можно несколькими способами:
Быстрый:
— Модуль Devel — Очистить Кеш.
Другой:
— /admin/build/themes — Сохранить конфигурацию.
Вот в общем то и всё.
P.S.
Автор не гарантирует 100% работы при использовании метода copy-paste
Автор советует использовать кастомную тему.