jQuery

Загрузка изображений в зависимости от размеров экрана.

Рассмотрим один из вариантов загрузки, к примеру, фоновых изображений в зависимости от размеров экрана пользователя. Это актуально, если в качестве фона используется слайдшоу из изображений.

Основная идея алгоритма заключается в следующем: jQuery-метод после построения DOM-структуры страницы отправляет запрос на сервер с указанием ширины экрана. Сервер обрабатывает запрос, подготавливает изображения соответствующего размера и возвращает их в качестве ответа.

Изображения разместим в каталоге /sites/default/files/background. Также предварительно необходимо создать нужные "Стили изображений".

Создадим специальный модуль ajax_module с 3 файлами: ajax_module.info, ajax_module.module и ajax_module_script.js.

ajax_module.info:

Теги: 

CKEditor + wysiwyg. Настраиваем визуальный редактор.

Модуль Wysiwyg позволяет подключать визуальные редакторы для редактирования текста на сайте. В качестве такого редактора я использую CKEditor 3.6.6.

Рассмотрим возможность подключения сторонней темы (например, BootstrapCK-Skin), поскольку стандартные выглядят довольно ужасно. Для CKEditor 4 есть официальная тема Moono, советую использовать ее, однако она не портирована на предыдущие версии редактора.

Скачиваем нужную тему, распаковываем в каталог /sites/all/libraries/ckeditor/skins, таким образом, полный путь будет выглядеть так: /sites/all/libraries/ckeditor/skins/BootstrapCK-Skin.

Правильное подключение js-скрипта. Drupal 7.

Для использования сокращенного варианта вызова jQuery методов необходимо применять следующий код:

1. Вариант 1

jQuery(function($) {
   $(document).ready(function() {
      .....
   });
});

2. Вариант 2

(function ($) {
   $(document).ready(function() {
      .....
   });
})(jQuery);

Теги: 

Создание виджета для голосования с помощью jQuery.

Данная статья основана на главе 18 книги "CMS Drupal 7 Руководство по разработке системы управления веб-сайтом" (автор - Тодд Томлинсон).

В книге есть достаточно много интересных глав, но на мой взгляд она уже устарела, помимо этого в примерах часто встречаются ошибки либо неточности, которые могут быть связаны как с дальнейшим развитием Drupal, так и с опечатками (с некоторыми ошибками и их исправлениями можно ознакомиться по этой ссылке). Поэтому я решил выложить полностью работоспособный модуль Plusone. Версия Drupal - 7.19, версия jQuery - 1.4.4.

Теги: 

Добавить js-скрипт после успешного завершения ajax-вызова в Drupal 7

Drupal.behaviors.events = {
  attach: function(context, settings) {
    $('#example').bind('ajaxSuccess', function(data, status, xhr) {
      >>Наш скрипт<<
    });
  }
};

Функция .bind() добавляет обработчик непосредственно на элемент #example. Рассматриваем только успешное выполнение ajax-запроса.

Несколько слов о Drupal.behaviors - это свойство объекта Drupal, который объявляется первой строчкой в файле drupal.js:

Теги: