Framework7 — Picker

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

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

myApp.picker(parameters)

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

Параметры выбора

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

<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> 

контейнер

Строка с селектором CSS или HTMLElement, используемая для генерации HTML-кода для встроенных средств выбора.

вход

Связанный элемент ввода помещается со строкой с помощью селектора CSS или HTMLElement.

scrollToInput

Он используется для прокрутки области просмотра (содержимого страницы) ввода всякий раз, когда открывается окно выбора.

inputReadOnly

Используется для установки атрибута «только для чтения» на указанном входе.

convertToPopover

Он используется для преобразования модальности выбора в Popover на больших экранах, таких как iPad.

onlyOnPopover

Вы можете открыть средство выбора в Popover, включив его.

CssClass

Чтобы выбрать модал, вы можете использовать дополнительное имя класса CSS.

closeByOutsideClick

Вы можете закрыть средство выбора, щелкнув за пределами средства выбора или элемента ввода, включив метод.

панель инструментов

Используется для включения модальной панели инструментов выбора.

toolbarCloseText

Используется для кнопки Готово / Закрыть на панели инструментов.

toolbarTemplate

Это шаблон HTML панели инструментов, по умолчанию это строка HTML со следующим шаблоном —

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

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

rotateEffect

Это позволяет 3D эффект поворота в пике.

momentumRatio

Когда вы отпускаете сборщик после быстрого касания и перемещения, он дает больше импульса.

updateValuesOnMomentum

Используется для обновления сборщиков и ввода значений во время импульса.

updateValuesOnTouchmove

Используется для обновления сборщиков и ввода значений во время сенсорного перемещения.

значение

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

formatValue

Функция используется для форматирования входного значения и должна возвращать новое / форматированное строковое значение. Значения и displayValues являются массивом связанных столбцов.

смещ_по_столбцам

Каждый элемент массива представляет объект с параметрами столбца.

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

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

по изменению

Функция обратного вызова будет выполняться всякий раз, когда изменяется значение средства выбора, а значения и displayValues являются массивами соответствующего столбца.

OnOpen

Функция обратного вызова будет выполняться всякий раз, когда открывается окно выбора.

OnClose

Функция обратного вызова будет выполняться всякий раз, когда сборщик закрыт.

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

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

ценности

Вы можете указать значения строковых столбцов с помощью массива.

displayValues

Он имеет массив со значениями строковых столбцов и будет отображать значение из параметра values , если он не указан.

CssClass

Имя класса CSS, используемое для установки в столбце HTML-контейнера.

TextAlign

Он используется для установки выравнивания текста значений столбцов и может быть «левым», «центральным» или «правым» .

ширина

Ширина рассчитывается автоматически, по умолчанию. Если вам нужно исправить ширину столбцов в средстве выбора с зависимыми столбцами, которые должны быть в пикселях .

делитель

Используется для столбца, который должен быть визуальным разделителем, не имеет значений.

содержание

Используется для указания разделителя-столбца (divider: true) с содержимым столбца.

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

по изменению

Всякий раз, когда значение столбца изменится в это время, будет выполняться функция обратного вызова. Значение и displayValue представляют текущее значение столбца и displayValue .

Picker Properties

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

myPicker.params

Вы можете инициализировать передаваемые параметры с помощью объекта.

myPicker.value

Выбранное значение для каждого столбца представлено массивом элемента.

myPicker.displayValue

Выбранное отображаемое значение для каждого столбца представляется массивом элементов.

myPicker.opened

Когда сборщик открыт, он устанавливает истинное значение.

myPicker.inline

Когда сборщик встроен, он устанавливает истинное значение.

myPicker.cols

Столбцы выбора имеют свои собственные методы и свойства.

myPicker.container

Экземпляр Dom7 используется для контейнера HTML.

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

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

myPicker.setValue (значения, продолжительность)

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

myPicker.open ()

Используйте, чтобы открыть Picker.

myPicker.close ()

Используйте, чтобы закрыть Picker.

myPicker.destroy ()

Используйте, чтобы уничтожить экземпляр Picker и удалить все события.

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

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

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

col.container

Вы можете создать экземпляр с колонкой HTML контейнера.

col.items

Вы можете создать экземпляр с элементами колонки HTML-элементами.

col.value

Используется для выбора текущего значения столбца.

col.displayValue

Используется для выбора текущего значения столбца дисплея.

col.activeIndex

Дайте текущий номер индекса, который выбран / активный элемент.

Методы столбца

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

col.setValue (значение, продолжительность)

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

col.replaceValues ​​(значения, displayValues)

Используется для замены значений столбца и displayValues ​​новыми.

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

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

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

Это мощный компонент, который позволяет выбирать любые значения из списка.

В палитре вы можете использовать для 3D поворота эффект.

Значения зависят друг от друга для указанного элемента.

Вы можете использовать один или несколько сборщиков на одной странице для настройки.

Вы можете выбрать количество значений во встроенном средстве выбора. Как дата имеет дату, месяц, год, так и время имеет часы, минуты, секунды.