Подключение 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
Возьму на заметку. В следующий раз попробую, как возникнет необходимость

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

 888          d8b  888       888  888888888  
888 Y8P 888 o 888 888
888 888 d8b 888 888
888 888 8888 888 d888b 888 8888888b.
888 .88P "888 888d88888b888 "Y88b
888888K 888 88888P Y88888 888
888 "88b 888 8888P Y8888 Y88b d88P
888 888 888 888P Y888 "Y8888P"
888
d88P
888P"
Зарегистрируйтесь для добавления материалов без проверки.