Возникла необходимость стилизировать select список. Средствами CSS мало что можно сделать - только изменить размер шрифта, рамку и еще несполько значений. В поисках решения этого вопроса нашел плагин cuSel (страница плагина cuSel) - который позволяет сделать кастомные красивые select списки без нарушения их функционала. 

Глядя на пример работы этого плагина решил его заюзать на сайте. Не все прошло гладк, как описано на странице-мануале плагина. В процессе интеграции cuSel с Drupal пришлось решить некоторые возникшие проблемы в следствии чего и было принято решение написать этот мини-мануал по установке cuSel для Drupal.  Материал ниже касается Drupal 7, но использовать это решение для Drupal 6 тоже не составит большого труда. Итак, начнем по порядку:

Использование произвольной версии jQuery в Drupal

По дефалту Drupal 7 имеет в ядре jQuery 1.4.4. Есть несколько способов обновить версию jQuery для Drupal:
 

1 Использование модуля jQuery Update. Позволяет обновить версии jQuery Drupal ядра:

  • Drupal 5 to jQuery 1.2.6
  • Drupal 6 to jQuery 1.3.2
  • Drupal 7 to jQuery 1.5.2/1.7.1/1.8.2, and jQuery UI 1.8.11

Для Drupal 7 устанавливается версия 1.5.2 релизным модулем jQuery Update. Версии 1.7.1 и 1.8.2 доступны только в dev-верссии этого модуля. dev-версия еще не стабильный релиз, поэтому для продакшн-сайтов его лучше не использовать. Преимущества использования модуля jQuery Update - полностью изменяется версия jQuery для всего сайта глобально. Но для нашего плагина cuSel необходима версия jQuery не ниже 1.6 - поэтому мы не можем использовать модуль jQuery Update для текущей задачи. Поэтому будем использовать jQuery через noConflict()

 

2 Использование произвольной версии jQuery на сайте через noConflict()

Мы можем использовать произвольную версию jQuery для своих скриптов, используя функцию noConflict(), которая позволит использовать экземпляры новой версии jQuery в наших скриптах, не трогая версию jQuery в самом ядре Drupal. (Изменения глобальной версии jQuery для всего ядра рекомендуется производить с помощью модуля jQuery Update - во избежании проблем в других модулях и в самом ядре Drupal)

Подключаем необходимую нам версию jQuery следующим кодом (в нашем случае этот код добавлен в темплейт файл html.tpl.php в head секцию):

  <script type="text/javascript" src="/sites/all/themes/theme-name/cusel/js/jquery-1.6.1.js"></script>
  <script type="text/javascript">
    var $jq = jQuery.noConflict();
  </script> 

Далее мы можем использовать эту версию jQuery в своих скриптах, используя $jq вместо jQuery. Например:

  $jq(document).ready(function(){
    $jq('#selector').some_function();
  });

Подключение плагина cuSel для Drupal 7

1 Качаем файлы cuSel

Для работы cuSel нам необходимо скачать его с оф сайта cuSel. Я качал пример работы этого плагина с всеми файлами доступно в виде архива

В связи с тем, что мы используем этот модуль в Drupal через noConflict() пришлось немного изменить файл cusel.js - изменить jQuery на $jq и часто встречалось простое использование $ которое тоже нужно заменить на $jq. Без этих изменений у вас не будет работать данный плагин cuSel с версией jQuery используемой через noConflict()

 

2 Подключаем jQuery и файлы cuSel

Для использования cuSel вместе с Drupal 7, чтобы получить стилизированные select листы нам необходимо использовать библиотеку jQuery 1.6.1 и выше.

Подключаем эту и другие необходимые библиотеки редактируя файл html.tpl.php Добавляем следующий код перед <?php print $scripts; ?> секции head, чтобы загрузить нашу библиотеку раньше чем грузится стандартная библиотека ядра

  <script type="text/javascript" src="/sites/all/themes/THEMENAME/cusel/js/jquery-1.6.1.js"></script>
  <script type="text/javascript">
    var $jq = jQuery.noConflict();
  </script> 
  <script type="text/javascript" src="/sites/all/themes/THEMENAME/cusel/js/jScrollPane.js"></script>
  <script type="text/javascript" src="/sites/all/themes/THEMENAME/cusel/js/jquery.mousewheel.js"></script>

Теперь, когда мы подгрузили jQuery и еще 2 необходимых скрипта, мы можем приступить к подключению плагина cuSel.

Мы можем это сделать непосредственно в этом же файле (html.tpl.php) но можем пойти более правильным путем и подключить эти скрипты через .info файл темы:

scripts[] = cusel/js/cusel.js
scripts[] = js/cusel-setup.js

Файл cusel.js - это сам файл плагина, а файл cusel-setup.js - файл настроек cuSel

 

3 Активируем и настраиваем cuSel

Настройка и акивация cuSel в нашем случае делается с помощью cusel-setup.js:

  jQuery(document).ready(function(){
    var params = {
      changedEl: "#edit-view-regions-list",
      visRows: 5,
      scrollArrows: true
    }
    cuSel(params);
  });

Где #edit-view-regions-list - это id select который будет заменен cuSel

 

Главные моменты, которые необходимо учесть при подключении cuSel для Drupal:

  • необходимо использовать jQuery версии 1.6.1 и выше.  Внашем случае мы использовали ее через noConflict()
  • просмотрите внимательно файл самого плагина - cusel.js Там в дефалте очень много использований $ - что в дефалте не заработает на Drupal. Если вы подключили jQuery через noConflict() то тогда замените $ и jQuery на $jq или ту переменную, которая является экземпляром вашей версии jQuery
  • все select которые вы хотите стилизировать должны иметь ID для возможности их замены сскриптом cusel.js
Ключевые слова: