jQuery в Друпале

JavaScript в наше время повсюду – куда ни сунься, везде он. Но в то же время – не всем и не всегда так уж приятно с ним работать. И именно поэтому таким популярным стал jQuery – JavaScript-фреймворк, придуманный Джоном Ресигом(John Resig) и опубликованный им в 2006-ом году. На данный момент последняя версия jQuery – 1.3.1.

Так в чём же преимущества jQuery? В первую очередь это конечно удобство использования, в отличие от JS. В JS есть целые кучи библиотек, позволяющие реализовать в принципе почти любой Ваш каприз. Но пока со всем этим разберёшься, прольёшь немало пота и скушаешь немало витаминов.

То ли дело jQuery. В первую очередь – это простота получения какого-либо элемента страницы с помощью jQuery-селектора. И затем – манипулируем любым узлом DOM, как хотим. Создаём, перемещаем, изменяем узлы в иерархии объектов страницы.

Итак – как работает jQuery-селектор? Его работа основа на принципах CSS. Точно так же, как мы определяем какой-либо элемент с помощью CSS, так же и находим его jQuery-селектором. Приведём несколько примеров.

$(“div#header”) – получаем элемент div с id=header.
$(“p”) – получаем все элементы p.
$(”ul li:first”) - получить первый элемент li из списка ul.
$(“#wrapper .class1”) – получаем все элементы с классом “class1”, которые находятся в диве с id=wrapper.

В Друпале же jQuery уже есть - нам нужно просто подключить его с помощью функции drupal_add_js.

Итак, перейду к простому примеру. Создайте на Вашем сайте простую страницу Page. Введите какой-нибудь заголовок, и в Input format укажите тип PHP Code. Введите следующий текст для данной ноды:

<?php
drupal_add_js(
'$(document).ready(function(){
$("p").slideDown("slow");
});',
'inline'
);
?>

<p id="one">Пункт один</p>
<p id="two">Пункт два</p>
<p>Пункт три</p>

Перезагрузите страницу. Вы увидите, как Ваши три пункта медленно как бы плывут вниз :).

Как видите я первым двум элементам присвоил id. Например - можно заменить строчку $("p").slideDown("slow"); на $("#one").slideDown("slow"); - и тогда медленно будет сползать вниз только самый первый элемент. И так далее.

Вторым параметром функции drupal_add_js является 'inline' - в данном случае он просто говорит Друпалу о том, что код нужно записать внутри контейнера <script></script>. Ну а первым параметром является непосредственно сам наш JS-код. Напоследок рассмотрю его немного поподробнее.

$(document).ready(function(){
// Здесь будет находиться Ваш код.
});

Событие READY говорит о том, что функция будет выполнена тогда, когда DOM (напоминаю - это объектная модель документа, Document Object Model) будет готов. Ну и внутри фигурных скобок располагаете Ваш код. В данном случае мы находим селектором все элементы p, и затем визуально плавно спускаем их вниз. В данном случае мы вызвали метод jQuery через функцию $ - так вызываются методы, являющиеся методами объекта jQuery. Вторым способом является вызов через $. - методы, не являющиеся методами объекта jQuery, но на этом возможно остановимся в другой раз.

Ёж