Подключение 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       888    888  8888888b.  
888 888 888 888 Y88b
888 888 888 888 888
88888b.d88b. 88888b. 8888888888 888 d88P
888 "888 "88b 888 "88b 888 888 8888888P"
888 888 888 888 888 888 888 888 T88b
888 888 888 888 d88P 888 888 888 T88b
888 888 888 88888P" 888 888 888 T88b


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