Подружить последний jquery ui и drupal

Прежде всего я имею ввиду возможность использования последнего jquery ui в drupal 6.

Последний jquery-ui требует jquery 1.4 (хоть там и указано 1.3.2 на деле в коде jquery-ui есть куски использующие 1.4 в классе widget).

В drupal же используется jquery 1.3.2 или даже 1.2.6

В общем засада.

Но не стоит унывать.

Скачиваете jquery-ui модуль для drupal устанавливаете его и включаете.

Скачиваете последний jquery к примеру 1.4.4, упакованную версию, или сами ее упакуйте.

Размещаете jquery-1.4.4.min.js в site/all/modules/jquery_ui/jquery.ui/ui

Итак, чтобы уже сейчас воспользоваться возможностями последнего jquery на страницах сайта, необходимо создать модуль в котором в hook_init() добавить

jquery_ui_add(array('jquery-1.4.2.min', 'jquery-1.4.2-noconflict'));

В том же каталоге вам надо разместить еще один следующий файл (jquery-1.4.2-noconflict):

var jQuery14 = jQuery;
jQuery.noConflict(true);

Сходить в настройки drupal в раздел производительность, и очистить кэш, на тот случай, если вы агрегируете все js файлы в один.

Теперь создайте любую страницу на сайте с фильтром plain html и в поле ввода текста страницы введите:
<script type="text/javascript"> jQuery14(document).ready(function($) { $('body').append(''+$('jquery').jquery); }); </script>

После сохранения страницы или при предпросмотре в конце страницы вы увидите текст 1.4.4
Или смотрите что произошло в firebug, так как должна быть какая-нибудь ошибка.

Полдела сделано.

Осталось прикрутить последний jquery-ui.

Так как прикручивать мы его будем к jquery-1.4.4 то конфликтовать с стандартным jquery или jquery-ui drupal-а он не будет.

Для этого надо скачать последний jquery-ui, например с темой redmond.

Скопировать из скаченного архива только! js файлы из папок development-bundle\ui и development-bundle\ui\minified
прямо в site/all/modules/jquery_ui/jquery.ui/ui
то есть туда же куда положили jquery-1.4.4
перезаписывать какие либо файлы не придется так как в модуль jquery-ui требуется установить jquery-ui версии не выше 1.6, а файлы у той версии не имели префикса jquery как в версии 1.8.

Далее надо скопировать тему redmond для jquery-ui.
Скопируйте их архива jquery-ui css файл
development-bundle\themes\redmond\jquery-ui-1.8.9.custom.css в
sites\all\modules\jquery_ui\jquery.ui\themes\redmond
туда же надо скопировать папку
development-bundle\themes\redmond\images из архива.
Итак мы разместили тему redmond для последнего jquery-ui-1.8.9

Теперь в своем модуле требуется слегка модифицировать hook_init:

drupal_add_css(JQUERY_UI_PATH .'/themes/redmond/jquery-ui-1.8.9.custom.css', 'module', 'all', FALSE);

jquery_ui_add(array('jquery-1.4.2.min', 'jquery.ui.core.min', 'jquery.ui.widget.min', 'jquery.ui.button.min', 'jquery-1.4.2-noconflict'));



Итак, мы включили в drupal jquery-ui последней версии, а именно виджеты кнопок.
Теперь можно создать страницу на которой все обычные кнопки страницы заменить на jquery-ui-ные :).

В коде выше есть тонкость, ее суть заключается в том, что любой код который требует последнего jquery требуется разместить так, чтобы код был загружен в броузер после загрузки jquery-1.4.4 и до загрузки jquery-1.4.2-noconflict.

Так как обычно код скриптов использующих jquery подобен следующему:

(function( $, undefined ) { 
....
})( jQuery ); 

то хорошо видно, что в нем используется jQuery переменная, которая будет содержать jquery версии 1.4.4, а не версии 1.2.6, и только, если мы загрузим jquery-1.4.4 раньше виджета, который зависит от jquery-1.4.4.

При этом, надо не поломать другой функционал drupal, который использует старый jquery-1.2.6. Для этого, после кода виджета, надо загрузить скрипт jquery-1.4.2-noconflict.

Только так будут и овцы целы и волки сыты.

Теперь снова очистите кэш на странице производительность.
И вставьте в вашей странице следующий код
<script type="text/javascript"> jQuery14(document).ready(function($) { $('input:button') .add('input:reset') .add('input:submit') .each(function() { $(this).button(); }); $('input:text') .add('input:password') .add('textarea') .each(function() { var element = $(this); element.addClass('ui-state-default'); element.bind( { focusin: function() { $(this).toggleClass('ui-state-focus'); }, focusout: function() { $(this).toggleClass('ui-state-focus'); } }); }); }); </script>

Результат будет примерно таким:

Кажется я ничего не забыл, таким же образом можно прикрутить и использовать диалоги, карусели, кнопки, только не забудьте их загрузить между jquery-1.4.4 и jquery-1.4.4-noconflict.