Framework7 - сборщик

Описание

Средство выбора выглядит как встроенное средство выбора iOS, и это мощный компонент, который позволяет вам выбирать любые значения из списка, а также используется для создания настраиваемых средств выбора наложения. Вы можете использовать Picker как встроенный компонент или как наложение. Средство выбора наложения будет автоматически преобразовано в Popover на планшетах (iPad).

Используя следующий метод приложения, вы можете создать и инициализировать метод JavaScript:

myApp.picker(parameters)

Где параметры - это обязательные объекты, используемые для инициализации экземпляра средства выбора, и это обязательный метод.

Параметры сборщика

В следующей таблице указаны доступные параметры в сборщиках -

S.No	Параметры и описание	Тип	По умолчанию
1	container Строка с селектором CSS или HTMLElement, используемая для создания HTML-кода средства выбора для встроенных средств выбора.	строка или HTMLElement	-
2	input Связанный элемент ввода помещается в строку с помощью селектора CSS или HTMLElement.	строка или HTMLElement	-
3	scrollToInput Он используется для прокрутки области просмотра (содержимого страницы) ввода всякий раз, когда открывается средство выбора.	логический	правда
4	inputReadOnly Используется для установки атрибута "только для чтения" на указанном входе.	логический	правда
5	convertToPopover Он используется для преобразования модального окна выбора в Popover на больших экранах, таких как iPad.	логический	правда
6	onlyOnPopover Вы можете открыть сборщик в Popover, включив его.	логический	правда
7	cssClass Для выбора модального окна вы можете использовать дополнительное имя класса CSS.	строка	-
8	closeByOutsideClick Вы можете закрыть средство выбора, щелкнув за пределами средства выбора или элемента ввода, включив метод.	логический	ложный
9	toolbar Он используется для включения модальной панели инструментов средства выбора.	логический	правда
10	toolbarCloseText Используется для кнопки «Готово / Закрыть» на панели инструментов.	строка	'Готово'
11	toolbarTemplate Это HTML-шаблон панели инструментов, по умолчанию это HTML-строка со следующим шаблоном - `<div class = "toolbar"> <div class = "toolbar-inner"> <div class = "left"></div> <div class = "right"> <a href = "#" class = "link close-picker"> {{closeText}} </a> </div> </div> </div>`	строка	-

Конкретные параметры средства выбора

В следующей таблице перечислены доступные конкретные параметры средства выбора -

S.No	Параметры и описание	Тип	По умолчанию
1	rotateEffect Он включает эффект 3D-вращения в палитре.	логический	ложный
2	momentumRatio Когда вы отпускаете пикер после быстрого касания и движения, он дает больше импульса.	количество	7
3	updateValuesOnMomentum Используется для обновления средств выбора и ввода значений во время импульса.	логический	ложный
4	updateValuesOnTouchmove Используется для обновления средств выбора и вводимых значений во время сенсорного перемещения.	логический	правда
5	value Массив имеет свои начальные значения, а также каждый элемент массива представляет значение связанного столбца.	массив	-
6	formatValue Функция используется для форматирования входного значения и должна возвращать новое / отформатированное строковое значение. Эти значения и displayValues являются массив соответствующего столбца.	функция (p, значения, displayValues)	-
7	cols Каждый элемент массива представляет собой объект с параметрами столбца.	массив	-

Обратные вызовы параметров средства выбора

В следующей таблице показаны списки функций обратного вызова, доступных в средствах выбора -

S.No	Обратные вызовы и описание	Тип	По умолчанию
1	onChange Функция обратного вызова будет выполняться всякий раз, когда значение средства выбора изменяется, а значения и displayValues являются массивами связанного столбца.	функция (p, значения, displayValues)	-
2	onOpen Функция обратного вызова будет выполняться всякий раз, когда открывается средство выбора.	функция (p)	-
3	onClose Функция обратного вызова будет выполняться всякий раз, когда средство выбора закрывается.	функция (p)	-

Параметры столбца

В момент настройки Picker нам нужно передать параметр cols . Он представлен как массив, где каждый элемент является объектом с параметрами столбца -

S.No	Параметры и описание	Тип	По умолчанию
1	values Вы можете указать значения строковых столбцов с помощью массива.	массив	-
2	displayValues Он имеет массив со значениями строковых столбцов, и он будет отображать значение из параметра значений , когда он не указан.	массив	-
3	cssClass Имя класса CSS, используемое для установки в контейнере HTML столбца.	строка	-
4	textAlign Он используется для установки выравнивания текста значений столбца и может быть «влево», «по центру» или «вправо» .	строка	-
5	width По умолчанию ширина рассчитывается автоматически. Если вам нужно исправить ширину столбцов в сборщике с зависимыми столбцами, которые должны быть в пикселях .	количество	-
6	divider Он используется для столбца, который должен быть визуальным разделителем, он не имеет значений.	логический	ложный
7	content Используется для указанного столбца- разделителя (divider: true) с содержимым столбца.	строка	-

Параметр обратных вызовов столбца

S.No	Обратные вызовы и описание	Тип	По умолчанию
1	onChange Всякий раз, когда значение столбца изменится, в это время будет выполняться функция обратного вызова. Значение и displayValue представляют текущий столбец значение и displayValue .	функция (p, значение, displayValue)	-

Свойства средства выбора

Переменная Picker имеет множество свойств, которые приведены в следующей таблице -

S.No	Свойства и описание
1	myPicker.params Вы можете инициализировать переданные параметры с помощью объекта.
2	myPicker.value Выбранное значение для каждого столбца представлено массивом элементов.
3	myPicker.displayValue Выбранное отображаемое значение для каждого столбца представлено массивом элементов.
4	myPicker.opened Когда средство выбора открыто, оно принимает истинное значение.
5	myPicker.inline Когда средство выбора встроено, оно принимает значение true .
6	myPicker.cols Столбцы средства выбора имеют свои собственные методы и свойства.
7	myPicker.container Экземпляр Dom7 используется для контейнера HTML.

Методы выбора

У переменной выбора есть полезные методы, которые приведены в следующей таблице -

S.No	Методы и описание
1	myPicker.setValue(values, duration) Используйте для установки нового значения средства выбора. Значения находятся в массиве, где каждый элемент представляет значение для каждого столбца. duration - длительность перехода в мс.
2	myPicker.open() Используйте, чтобы открыть Picker.
3	myPicker.close() Используйте, чтобы закрыть Picker.
4	myPicker.destroy() Используйте, чтобы уничтожить экземпляр Picker и удалить все события.

Свойства столбца

Каждый столбец в массиве myPicker.cols также имеет свои собственные полезные свойства, которые приведены в следующей таблице:

//Get first column
var col = myPicker.cols[0];

S.No	Свойства и описание
1	col.container Вы можете создать экземпляр с контейнером HTML столбца.
2	col.items Вы можете создать экземпляр с элементами HTML элементов столбца.
3	col.value Используется для выбора текущего значения столбца.
4	col.displayValue Используется для выбора текущего значения столбца отображения.
5	col.activeIndex Дайте текущий порядковый номер, который выбран / активен.

Колоночные методы

Полезные методы столбца приведены в следующей таблице -

S.No	Методы и описание
1	col.setValue(value, duration) Используется для установки нового значения для текущего столбца. Значение должно быть новое значение и продолжительность является длительность перехода в мс.
2	col.replaceValues(values, displayValues) Используется для замены значений столбца и displayValues новыми.

Он используется для доступа к экземпляру Picker из его HTML-контейнера всякий раз, когда вы инициализируете Picker как встроенный Picker.

var myPicker = $$('.picker-inline')[0].f7Picker;

Существуют различные типы сборщиков, как указано в следующей таблице -

S.No	Типы и описание вкладок
1	Средство выбора с одним значением Это мощный компонент, позволяющий выбирать любые значения из списка.
2	Два значения и эффект 3D-поворота В палитре вы можете использовать эффект 3D-вращения.
3	Зависимые значения Значения для указанного элемента зависят друг от друга.
4	Настраиваемая панель инструментов Вы можете использовать один или несколько сборщиков на одной странице для настройки.
5	Встроенный сборщик / Дата и время Вы можете выбрать количество значений во встроенном средстве выбора. Например, у даты есть дата, месяц, год, а у времени есть часы, минуты, секунды.