Анимация фона элементов на форме в стиле JQuery

К сожалению, у платформы 1С не так много красивостей, которыми обычно сдабривают формы обычных web-страниц. Нам недоступны эффекты JQuery и других javascript-библиотек.
А иногда хочется сделать необычно, красиво и удобно.

Вот, например, как привлечь внимание пользователя к полю, которое изменилось в результате правки пользователем другого элемента?
Можно штатно выкинуть сообщение и привязать к полю, но лично у меня это вызывает негативную эмоцию вида «Что там еще за ошибка?».
А можно ненавязчиво подсветить фоном, который «вспыхнет и погаснет». Мол, глянь-ка сюда.
Собственно, далее реализация через ОбработчикОповещения.

&НаКлиенте
Перем ИмяПоля;


// фон поля меняется от желтого к безцветному
// запуск анимации СменаЦветаФона("Итого",Истина);
// ИмяЭлемента - строка с названием анимируемого элемента
// Старт - булево. Истина - начинаем анимацию, Ложь - продолжаем анимацию
&НаКлиенте
Процедура СменаЦветаФона(ИмяЭлемента,Старт=Ложь,ВызвавшаяФункция="АнимацияПоля")
ИмяПоля = ИмяЭлемента;
Элемент = Элементы.Найти(ИмяПоля);
Скорость = 3; // 1-5
Если Старт = Ложь Тогда
Синий = Элемент.ЦветФона.Синий;
Синий = Синий+255/(7-Скорость);
Иначе
Синий = 0;
КонецЕсли;

Если Синий >= 255 Тогда
Элемент.ЦветФона = Новый Цвет();
Возврат;
КонецЕсли;
Цвет = Новый Цвет(255, 255, Синий);
Элемент.ЦветФона = Цвет;
ПодключитьОбработчикОжидания(ВызвавшаяФункция, 0.1, Истина);

КонецПроцедуры

// вызывается из обработчика ожидания
&НаКлиенте
Процедура  АнимацияПоля()
СменаЦветаФона(ИмяПоля,Ложь);
КонецПроцедуры

В архиве прилагается:
— Обработка, которая иллюстрирует код, описанный выше.
— Более «продвинутая» обработка с установкой произвольного цвета фона, с возможностью подсвечивать сразу несколько элементов.

9 Comments

dj_serega 18.02.2015 at 10:38

Прикольная штука. Попробуем реализовать у себя такую ерунду.

Reply ↓
friend0 18.02.2015 at 17:19
Забавная штука. Плюс за идею.

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

Ну и для поля таблицы чтобы работало.

Но это все легко допилить руками кому надо будет. Главное идея.

П.С. Не переделывая логику, поигрался со значениями, чтоб не так глаза резало. Вдруг кому пригодится:
```
 Если Старт = Ложь Тогда
Синий = Элемент.ЦветФонаПоля.Синий;
Синий = Синий+20;
Иначе
Синий = 200;
КонецЕсли;

Если Синий >= 240 Тогда
```
Показать
Reply ↓
vasyak319 18.02.2015 at 18:18

Должно феерично глючить при подсветке больше, чем одного поля.

Reply ↓
kraynev-navi 18.02.2015 at 19:57

(2) Тут да… Можно подключить фантазию и наворотить чего хочешь. Я делал разные цвета, настраивал скорость и т.д.

(3) Если речь про несколько полей при одном событии, то глюков нет. А вот если кликнул на первое поле, через долю секунды на второе, то да — глюканет: первое останется цветным.

Reply ↓
jobkostya1c8 19.02.2015 at 07:22

Когда что-то красиво оформляют только плюс за юзабилити. Обычно, такое редко.

Reply ↓
bashinsky 19.02.2015 at 16:54
Если речь про несколько полей при одном событии, то глюков нет. А вот если кликнул на первое поле, через долю секунды на второе, то да — глюканет: первое останется цветным.

На обычной форме, 10 полей работает без глюков. Но для этого, для подсветки каждого поля нужно писать свою вызывающую функцию.
```
Процедура  АнимацияПоля1()
СменаЦветаФона(«Поле1»,Ложь);
КонецПроцедуры
Процедура  АнимацияПоля2()
СменаЦветаФона(«Поле2»,Ложь);
КонецПроцедуры
Процедура  АнимацияПоля3()
СменаЦветаФона(«Поле3»,Ложь);
КонецПроцедуры
```
Показать
Reply ↓
kraynev-navi 19.02.2015 at 17:13

(6) Да, именно так будет работать. Но больно громоздкий способ, который мне кажется из-за этого неправильным подходом. Более оригинального не нашел.

Кстати, раз уж пошло техническое совершенствование.

Я все никак не мог придумать как избавиться от переменной ИмяПоля. Глаз режет, неудобно, хочется минимализма. Может кто-то придумает интереснее решение?

Reply ↓
ixilimuse 25.02.2015 at 12:56

Да, тоже так делал в одной обработке, в случае когда пользователи забывали заполнить одно важное поле. Пользователям понравилось) Да и звонков с вопросами стало меньше, так как сообщение информировало о том что они забыли, мигание цветом показывало — где =)

Кстати, в своей реализации не заморачивался с плавным переходом цветов, за красоту — респект))

Reply ↓
Lok`Tar 07.09.2017 at 08:20

Крутяк:) Обязательно попробую у себя

Reply ↓

Анимация фона элементов на форме в стиле JQuery

Related Posts

9 Comments

Leave a Comment Отменить ответ