21 июл 2011 в 10:56

Подключение виджетов JQuery к Drupal 6 без сопутствующий проблем

Ожидает приглашения

Доброго времени суток.
Случилась как-то необходимость подключить несколько виджетов 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)

<script>
//подключение виджета Tabs
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>

<!--Пример виджета Tabs-->
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, risus.</p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, ut pharetra massa metus id nunc.</p>
    </div>
    <div id="tabs-3">
        <p>Mauris eleifend est et turpis. Duis id erat.
    </div>
</div>

Не забываем после всего этого (а точнее изменения .info файла) очистить кеш. Сделать это можно несколькими способами:
Быстрый:
— Модуль Devel — Очистить Кеш.
Другой:
— /admin/build/themes — Сохранить конфигурацию.

Вот в общем то и всё.
P.S.
Автор не гарантирует 100% работы при использовании метода copy-paste
Автор советует использовать кастомную тему.

Теги:

Хабы:

Чулан