Я последовал примеру многих моих коллег и решил опубликовать заметку о готовящейся к выходу небольшой "фиче"
Все, кто смотрел продукт "Корпоративный портал", наверняка видели в нем такую штуку как Календарь событий. (Кто не смотрел - обязательно посмотрите, не зря же я так старался .
Но сегодня речь пойдет не о календаре событий, в целом, а о интерфейсе добавления события или, если еще точнее - о вводе даты и времени начала и конца событий.
С вводом даты все здорово - здесь компонент календаря (main.calendar) справляется отлично.
А вот вводить время, мягко говоря, не очень удобно. Еще осенью, когда работы над календарем только начинались, в моем подсознании засела мысль, что для ввода времени нужен отдельный контролл - часы.
[spoiler]
Такие штуки можно видеть в некоторых мобильниках (стрелки можно таскать стилусом), и в некоторых программах (windows, например:))
Идея была продумана на каникулах, додуманна после каникул, потом нарисованна и ... реализованна.
Итак, посмотрим, что из этого вышло.
Так сейчас выглядит диалог создания события:
Даты начала и окончания события теперь состоят из двух частей: собственно даты и времени.
Дата вводится при помощи календаря:
Время вводится при помощи часов:
Укзать время на новом контролле можно двумя способами:
- Воспользоваться селекторами в нижней части*
- При помощи мышки, подвинув часовую или минутную стрелки на нужные значения.
* Можно пользоваться также стрелочками вверх и вниз, когда фокус в нужном поле.
Отмечу, что часы, конечно ведут себя не как "полноценные" часы. Во-первых, нет секундной стрелки . Во-вторых, при движении минутной стрелки, часовая - не передвигается плавно, а принимает только дискретные положения:
,
Таскать стрелки также можно мышкой, схватить за край стрелки - и наматывать круги.
Минутная стрелка принимает дискретные значения. Шаг может принимать значения 5 и 15 минут (есть также 30 и 60, но часы в таком случае не очень нужны), по умолчанию шаг - 5 минут.
Параметры компонента:
Зачем, вводить ID или Имя - понятно (чтобы получить доступ к элементу и введенному в него времени).
Остальные параметры можно смело не вводить - все будет подставлено по умолчанию. Стартовое время, если оно не указанно, берется текущее и округляется в зависимости от шага к ближайшему подходящему.
Стилистически элемент управления схож с календариком. Тоже есть тень, крестик, и тоже таскается;)
По удобству использования - это, наверное, самый простой и интуитивный контрол для указания времени.
Компонент называется main.clock, и скоро попадет на "прилавок" системы обновлений.
Напоследок, скажу как это было сделано: javascript + css**
Стили грузятся сразу, а файл с js при нажатии на кнопку (для экономии ).
------------------
**Можно было бы конечно сделать это на флеше, но этот путь был бы выбран, если бы нельзя было бы добиться приемлемого функционала на js.
На этом пока все...
P.S.: По календарю событий готовится обширное обновление, в котором будут исправлены многие замеченные ошибки, доработаны интерфейсы и добавлены новые возможности, например возможность напоминания о приближающихся событиях.
Иногда в модуле нужно ввести только "время" без даты.
Приходилось делать 2 или 3 инпута для часов, минут и секунд.
Даже думал, почему до сих пор нету компонента часов, даже продумывал, что время было бы удобнее всего выбирать не кнопочками вверх-вниз а перемещением мышкой стрелки часов.
Как хорошо, что такие идеи материализуются
С нетерпением буду ждать обновления.