#states: Мощное улучшение для разработки интерфейса пользователя в Drupal 7
запостил: bohart
Версия Друпала:
7.x
Во время одного с докладов на Drupal Camp Donetsk, кто то вспомнил о #states. Так, как лично я с этим раньше не встречался, а только слышал, решил изучить вопрос более детально.
И так, что же это за свойство?
#states добавляет JavaScript, с помощью которого, можно изменить состояние одного элемента на основании состояния второго, после действия пользователя.
Для чего это нужно?
Изначальная идея #states заключается в том, что бы была возможность создание динамических форм. Простой пример: у нас есть форма с радиобаттонами “Ищу работу” и “Работодатель”, при выборе разных значений, пользователю отображаются разные элементы формы для заполнения.
Что же конкретно можно сделать используя #states?
Здесь много текста - излишество, поэтому сразу демо-линк:
‘#states’ => array( STATE1 => CONDITIONS_ARRAY1, STATE2 => CONDITIONS_ARRAY2, ... ) здесь: STATE1, STATE2 - это состояние, которое нужно применить к элементу, CONDITIONS_ARRAY1, CONDITIONS_ARRAY2 - наборы условий, при которых свойства должны применяться.
Наборы условий задаются в виде массива, где ключ - это Jquery селектор какого-либо другого элемента на странице (не обязательно текущей формы), а значение - это набор (так же в виде php массива) свойств этого элемента, при совпадении которых, нам нужно применить к изначальному элементу состояние STATE1, то - есть:
Следующей вопрос который у меня возник - это какие свойства поддерживаются? Перечень состояний (STATE1, STATE2 в примере выше), которые могут использоваться для элемента:
enabled
disabled
required
optional
visible
invisible
checked
unchecked
expanded
collapsed
Перечень условий (REMOTE_CONDITION1, REMOTE_CONDITION2 в примере выше), которые можно использовать для элементов, что задаются с помощью Jquery селекторов:
empty
filled
checked
unchecked
expanded
collapsed
value
Следующий перечень состояний можно использовать для обоих типов элементов (и STATE1, и REMOTE_CONDITION1), но согласно документации, они ещё не полностью реализованы и может быть, что их использование не принесет каких-либо изменений с элементами:
relevant
irrelevant
valid
invalid
touched
untouched
readwrite
readonly
И конечно же, уже более реальный пример использования (код для этой демо-формы):
Небольшые замечание
На данный момент нет возможности использовать в наборах условий (REMOTE_CONDITION1, REMOTE_CONDITION2...), метод ИЛИ (OR). Если у Вас появится такая необходимость, то для этого можно использовать AJAX Forms.
Так как реализация #states полностью завязана на JavaScript, то нужно понимать что она не несет никакой серверной логики, только интерфейс для конечных пользователей. А с отключенным в браузере JavaScript работать вообще не будет, то - есть если Вы используете #states, то нужно позаботится и о том, что бы весь функционал корректно работал и без JavaScript .