Лето набирает силу, и разработчики Webix позаботились о том, чтобы вам было чем себя занять в отпуске или на каникулах. Не так давно в их блоге появился пост о новой, за номером 2.4, версии фреймворка. Новые фичи, обновления, длинный список багфиксов. Очень увлекательно! Давайте посмотрим подробнее, что для нас приготовили.
К слову говоря, если вы слышите это название впервые и вообще не понимаете, о чем речь, здесь доступен мой небольшой Webix-туториал.
Portlet Widget
Portlet представляет из себя drag-and-drop контейнер, который может содержать любой другой элемент. Таким образом, можно быстро менять расположение элементов на странице. Лучше понять, как это выглядит, поможет демка.
Добавить отдельный portlet можно так:
{ view:"portlet", body:{
template:"My portlet"
}}
Для тех, кто не читал мою статью-введение и не знаком с Webix: свойство `view` необходимо для добавления нового элемента, а его значение определяет тип добавляемого элемента. Таким образом, код выше добавит на страницу один portlet с содержимым, определяемым свойством `body`.
Больше инфы и демок можно найти на странице документации.
MultiCombo
Multicombo окажется полезным в случае, если при работе с формами пользователю нужно выбрать несколько элементов из списка. Кликаем на multicombo-поле — появляется выпадающий список с чекбоксам. Выбираем нужные. Готово! Демо-страница.
Использовать можно так:
{ view:"multicombo", label:"To", value:"2,3,4,13", suggest: "data/names.js"}
где `value` содержит изначально выбранные элементы, а `suggest` (функция или строка) определяет источник данных для выпадающего списка. Документация доступна здесь.
RangeSlider
В отличие от старого доброго слайдера, этот позволяет выбрать определенный диапазон значений. Демо.
Используем, например, так:
{ view:"rangeslider", label:"Level B", value:[0,100], name:"slider1"}
где `value` содержит нужный диапазон значений; `name` — имя контрола, нужное для того, чтобы извлечь из него выбранное значение.
Валидация форм
Пользователи вечно норовят ввести неверные данные! Для самых недогадливых из была разработана фича под названием Validation Message. Она окрашивает поле с неверно введенными данными в радикально красный цвет и выводит заданное сообщение об ошибке. Корректность введенных данных, к слову, можно проверить с помощью заранее определенных разработчиками правил:
var form = [
//some code here
{ view:"text", label:'E-mail address', name:"email", invalidMessage: "Incorrect e-mail address" },
//some more code here
];
webix.ui({
view:"form",
elements: form,
//form config
rules:{
"email": webix.rules.isEmail,
},
//some more form config
});
За выводимое сообщение, понятное дело, отвечает свойство `invalidMessage`. О том, как даже самых несмышленых заставить вводить валидные данные, читайте в документации.
Помимо описанных новшеств, разработчики, как и в прошлый раз внесли множество обновлений и исправили большое количество ошибок. Полный список изменений доступен здесь.