Подключение jQuery UI Spinner для форм в Drupal 7

Столкнулся сегодня с формой, к которой необходимо было добавить текстовое поле со стрелочкам для изменения величины. Как оказалось то, что я искал называется jQuery UI Spinner. Однако радость моя была недолгой, так как Spinner был добавлен в jQuery UI только в v1.9 версии, коробочная версия Drupal содержит как назло v1.8.7.

Ставить для этого модуль jQuery Update я не решился, так как со старых времен помню его конфликтность даже с теми же Views. Был уже готов начать писать собственное решение на скорую руку, как в Skype мне подбросили ссылочку на самостоятельную библиотеку jQuery UI Spinner. Спасибо и тому, кто скинул ссылку, и тому, кто создал эту библиотеку!

Беглое тестирование библиотеки показало хорошие результаты и это с учетом того, что вам не надо обновлять даже jQuery из коробки Drupal. Небольшой пример как это все подключить с использованием Libraries API.

Подключение библиотеки

Библиотека на GitHub: jQuery UI Spinner.

Первым делом скачайте библиотеку GitHub и поместите ее в папку 'sites/all/libraries' под названием 'jquery_ui_spinner'. Далее в своем модуле расскажите системе об этой библиотеке.

  1. /**
  2.  * Implements hook_libraries_info().
  3.  */
  4. function MY_MODULE_libraries_info() {
  5. // Подключаем jQuery UI Spinner
  6. $libraries['jquery_ui_spinner'] = array(
  7. 'name' => 'jQuery UI Spinner',
  8. 'vendor url' => 'https://github.com/btburnett3/jquery.ui.spinner',
  9. 'download url' => 'https://github.com/btburnett3/jquery.ui.spinner',
  10. 'version arguments' => array(
  11. 'file' => 'ui.spinner.js',
  12. 'pattern' => '@(?i:jQuery UI Spinner) ([0-9\.a-z]+)@',
  13. 'lines' => 5,
  14. ),
  15. 'files' => array(
  16. 'js' => array(
  17. 'ui.spinner.min.js',
  18. ),
  19. 'css' => array(
  20. 'ui.spinner.css'
  21. ),
  22. ),
  23. );
  24.  
  25. return $libraries;
  26. }

Пример создания элемента Spinner через Forms API.

  1. /**
  2.  * Пример формы.
  3.  *
  4.  * @param $form
  5.  * @param $form_state
  6.  * @return mixed
  7.  */
  8. function MY_MODULE_cart_form($form, &$form_state) {
  9. drupal_add_library('system', 'jquery.form');
  10. drupal_add_library('system', 'ui.dialog');
  11.  
  12. if (($library = libraries_detect('jquery_ui_spinner')) && !empty($library['installed'])) {
  13. $library = libraries_load('jquery_ui_spinner');
  14. $form['#attached']['js'][] = drupal_get_path('module', 'MY_MODULE') . '/js/my_module_cart.js';
  15. }
  16.  
  17. // Всякие ненужные элементы формы..
  18.  
  19. $form['cash'] = array(
  20. '#type' => 'textfield',
  21. '#title' => t('Cash'),
  22. '#size' => 10,
  23. );
  24.  
  25. if (!empty($library['loaded'])) {
  26. $form['cash']['#attributes']['class'][] = 'form-spinner';
  27. }
  28.  
  29. // Всякие ненужные сабмит кнопки..
  30.  
  31. return $form;
  32. }

И осталось создать JS-файл, который будет навешивать стрелочки и весь остальной функционал Spinner:

  1. (function ($) {
  2. Drupal.behaviors.myModule = {
  3. attach:function (context, settings) {
  4. $('input.form-spinner', context).spinner({min: 1, max: 100});
  5. }
  6. };
  7. })(jQuery);

Если вы до сих пор не поняли о каком это текстовом поле со стрелочками я тут втираю - скриншот!

jQuery UI Spinner для Drupal

Вот такое решение для использования jQuery UI Spinner у меня получилось из-за нежелания использовать модуль jQuery Update.

Комментарии

Аватар пользователя Plazik
Plazik

Сейчас нет проблем с jQuery Update.

Аватар пользователя angarsky
angarsky
Возьму на заметку. В следующий раз попробую, как возникнет необходимость

Добавить комментарий

 8888888b.    .d8888b.              .d8888b.  
888 Y88b d88P Y88b d88P Y88b
888 888 888 888
888 d88P .d88P 8888b. .d88P
8888888P" .od888P" "88b .od888P"
888 d88P" .d888888 d88P"
888 888" 888 888 888"
888 888888888 "Y888888 888888888


Зарегистрируйтесь для добавления материалов без проверки.