Категория:
Опубликовано:

Как добавить jQuery Colorpicker в кастомную форму

Colorpicker

.. без установки дополнительных модулей.

Рассмотрим вариант добавления поля для выбора цвета, которое будет, по сути, обычным текстовым полем.

При этом не будем устанавливать ни одного лишнего модуля!

В качестве готового решения будем использовать замечательную jQuery-библиотеку Spectrum.

Ее необходимо скачать с оф. страницы, или из Github-репозитория.

Содержимое извлекаем в папку libraries (обычно - sites/all/libraries). И переименовать в "bgrins-spectrum".

Далее, в своей форме подключим ее:

// Настройки для Спектрума
$spectrum_js = 'jQuery(".spectrum-color-picker").spectrum({
  showInput: true,
  allowEmpty: true,
  showAlpha: true,
  showInitial: true,
  showInput: true,
  preferredFormat: "hex3",
  clickoutFiresChange: true,
  showButtons: false
});';

// Подключение библиотеки и настроек
$form['#attached'] = array(
  'css' => array(
    libraries_get_path('bgrins-spectrum') . '/spectrum.css',
  ),
  'js'  => array(
    libraries_get_path('bgrins-spectrum') . '/spectrum.js',
    array(
      'data'  => $spectrum_js,
      'type'  => 'inline',
      'scope' => 'footer',
    ),
  ),
);

Теперь можно создавать обычные textfield'ы, совсем немного их модернизируя:

$form['my_color_field'] = array(
  '#type'          => 'textfield',
  '#default_value' => $default_value, // Можно передавать обычную строку, с валидным форматом цвета (HEX, HSL[A], RGB[A], COLOR NAME)
  '#attributes'    => array('class' => array('spectrum-color-picker')), // Класс нужен для автоматической подхватки поля
  '#title'         => t('Color'),
);

В $form_state будет доступен как значение обычного текстового поля:

$form_state['values']['my_color_field'];

И все круто работает, т.к. плагин обладает огромным количеством настроек.

Сделано по этой инструкции.

Если у Вас возникли вопросы, замечания, предложения или просто благодарность - пишите в комментариях.
Делитесь полезными материалами в социальных сетях.

Комментарии

Приветствую. За один день, нашёл столько всего нового и полезного. Выражаю огромную благодарность за Твой труд, Друже.

Подскажи, будь добр, данный plugin подходит для обычных полей в ноде? Если да, то каким образом прописать?

Для обычных полей есть модули, например - Color Field.

Но при особой необходимости - да, уверен можно приделать. Обычным альтером формы. Методы - те же, что и в заметке.