Vex — это мощная и гибкая JavaScript-библиотека для создания, отображения и управления всплывающими окнами (модальными окнами). В этой части рассматривается использование input-элементов в контексте Vex, включая текстовые поля, флажки, радио-кнопки, а также их интеграция с модальными окнами.
Текстовые поля — это наиболее часто используемые элементы ввода данных в веб-формах. В Vex они могут быть заданы с помощью стандартных HTML-элементов input типа “text”. В отличие от обычных форм, Vex позволяет легко интегрировать такие поля в модальные окна, упрощая создание интерактивных интерфейсов.
Пример создания модального окна с текстовым полем:
vex.dialog.open({
message: 'Введите ваше имя:',
input: '<input name="name" type="text" placeholder="Ваше имя" />',
buttons: [
$.extend({}, vex.dialog.buttons.YES, {
text: 'Отправить'
}),
$.extend({}, vex.dialog.buttons.NO, {
text: 'Отмена'
})
],
afterClose: function(data) {
if (data && data.name) {
console.log('Имя пользователя:', data.name);
}
}
});В этом примере используется стандартный input с атрибутом
type="text". При закрытии окна возвращается введённое
пользователем значение через объект data, который содержит
имя, введённое в поле.
Текстовые области предназначены для ввода более длинных текстов, чем
в обычных текстовых полях. В Vex можно использовать их так же, как и
стандартные input-элементы. Важно помнить, что для textarea следует
использовать элемент <textarea>, а не
<input>.
Пример модального окна с текстовой областью:
vex.dialog.open({
message: 'Опишите ваш запрос:',
input: '<textarea name="query" placeholder="Введите описание" rows="4" cols="50"></textarea>',
buttons: [
$.extend({}, vex.dialog.buttons.YES, {
text: 'Отправить'
}),
$.extend({}, vex.dialog.buttons.NO, {
text: 'Отмена'
})
],
afterClose: function(data) {
if (data && data.query) {
console.log('Запрос:', data.query);
}
}
});Здесь используется <textarea>, чтобы пользователь
мог ввести несколько строк текста. Как и в случае с текстовыми полями,
данные передаются в функцию afterClose.
Чекбоксы позволяют пользователю выбирать один или несколько вариантов из множества. Это полезно, когда требуется получить от пользователя несколько ответов, например, для выбора дополнительных опций.
Пример использования чекбоксов в модальном окне:
vex.dialog.open({
message: 'Выберите ваши предпочтения:',
input: '<input name="option1" type="checkbox" value="1" /> Опция 1<br>' +
'<input name="option2" type="checkbox" value="2" /> Опция 2<br>' +
'<input name="option3" type="checkbox" value="3" /> Опция 3',
buttons: [
$.extend({}, vex.dialog.buttons.YES, {
text: 'Отправить'
}),
$.extend({}, vex.dialog.buttons.NO, {
text: 'Отмена'
})
],
afterClose: function(data) {
if (data) {
console.log('Выбранные опции:', data);
}
}
});В данном примере три чекбокса позволяют выбрать различные опции.
После закрытия модального окна объект data будет содержать
все выбранные значения.
Радио-кнопки предназначены для выбора только одного варианта из нескольких предложенных. В отличие от чекбоксов, только один элемент может быть выбран в группе радио-кнопок.
Пример использования радио-кнопок в модальном окне:
vex.dialog.open({
message: 'Выберите один вариант:',
input: '<input name="choice" type="radio" value="option1" /> Вариант 1<br>' +
'<input name="choice" type="radio" value="option2" /> Вариант 2<br>' +
'<input name="choice" type="radio" value="option3" /> Вариант 3',
buttons: [
$.extend({}, vex.dialog.buttons.YES, {
text: 'Отправить'
}),
$.extend({}, vex.dialog.buttons.NO, {
text: 'Отмена'
})
],
afterClose: function(data) {
if (data && data.choice) {
console.log('Выбран вариант:', data.choice);
}
}
});Здесь важно заметить, что все радио-кнопки имеют одинаковое имя
name="choice", что позволяет пользователю выбрать только
одну опцию. Когда модальное окно закрывается, в объекте
data будет содержаться значение выбранной радио-кнопки.
Селекторы дают возможность пользователю выбрать один или несколько вариантов из списка. Это удобно, когда требуется ограничить выбор пользователя заранее заданным набором значений.
Пример модального окна с селектором:
vex.dialog.open({
message: 'Выберите страну:',
input: '<select name="country">' +
'<option value="ru">Россия</option>' +
'<option value="us">США</option>' +
'<option value="fr">Франция</option>' +
'</select>',
buttons: [
$.extend({}, vex.dialog.buttons.YES, {
text: 'Отправить'
}),
$.extend({}, vex.dialog.buttons.NO, {
text: 'Отмена'
})
],
afterClose: function(data) {
if (data && data.country) {
console.log('Выбранная страна:', data.country);
}
}
});В этом примере используется стандартный <select>
элемент с несколькими <option> для выбора страны. При
закрытии окна возвращается выбранное значение.
Для ввода даты и времени можно использовать соответствующие
HTML-элементы input с типами date,
time, datetime-local. Эти поля позволяют
пользователям удобно выбрать дату или время, используя встроенные
элементы управления.
Пример модального окна с датой:
vex.dialog.open({
message: 'Выберите дату:',
input: '<input name="date" type="date" />',
buttons: [
$.extend({}, vex.dialog.buttons.YES, {
text: 'Отправить'
}),
$.extend({}, vex.dialog.buttons.NO, {
text: 'Отмена'
})
],
afterClose: function(data) {
if (data && data.date) {
console.log('Выбранная дата:', data.date);
}
}
});В этом случае используется input с типом
date, что позволяет пользователю выбрать дату через
стандартный интерфейс браузера.
Для повышения удобства использования модальных окон с input-элементами можно применить несколько рекомендаций:
placeholder или всплывающие подсказки для помощи
пользователям при вводе данных.Использование input-элементов в модальных окнах Vex открывает широкий спектр возможностей для создания интерактивных форм. Библиотека позволяет эффективно интегрировать текстовые поля, чекбоксы, радио-кнопки, селекторы и другие элементы, делая интерфейс пользователя более удобным и функциональным.