📜  Framework7-选择器

📅  最后修改于: 2020-10-25 02:56:28             🧑  作者: Mango


描述

Picker类似于iOS本机Picker,它是一个功能强大的组件,可让您从列表中选择任何值,还可以用于创建自定义叠加层Picker。您可以将Picker用作嵌入式组件或叠加层。叠加层选择器将在平板电脑(iPad)上自动转换为Popover。

使用以下App的方法,您可以创建和初始化JavaScript方法-

myApp.picker(parameters)

参数是必需的对象,用于初始化选取器实例,它是必需的方法。

选择器参数

下表指定了选择器中的可用参数-

S.No Parameters & Description Type Default
1

container

String with CSS selector or HTMLElement used to generate Picker HTML for an inline pickers.

string or HTMLElement
2

input

The related input element placed with the string with CSS selector or HTMLElement.

string or HTMLElement
3

scrollToInput

It is used to scroll viewport (page-content) of input, whenever picker is opened.

boolean true
4

inputReadOnly

Used to set the “readonly” attribute on specified input.

boolean true
5

convertToPopover

It is used to convert the picker modal to Popover on large screens like iPad.

boolean true
6

onlyOnPopover

You can open the picker in Popover by enabling it.

boolean true
7

cssClass

To picker modal, you can use additional CSS class name.

string
8

closeByOutsideClick

You can close the picker by clicking outside of picker or input element by enabling the method.

boolean false
9

toolbar

It is used to enable the picker modal toolbar.

boolean true
10

toolbarCloseText

Used for Done/Close toolbar button.

string ‘Done’
11

toolbarTemplate

It is toolbar HTML Template, by default it is HTML string with the following template −

 
string

特定选择器参数

下表列出了可用的特定选择器参数-

S.No Parameters & Description Type Default
1

rotateEffect

It enables 3D rotate effect in picker.

boolean false
2

momentumRatio

When you release picker after fast touch and move, it produces more momentum.

number 7
3

updateValuesOnMomentum

Used to update pickers and input values during momentum.

boolean false
4

updateValuesOnTouchmove

Used to update pickers and input values during touch move.

boolean true
5

value

The array has its initial values and also each array item represents the value of related column.

array
6

formatValue

The function is used to format the input value, and it should return new/formatted string value. The values and displayValues are array of related column.

function (p, values, displayValues)
7

cols

Every array item represents an object with column parameters.

array

选择器参数回调

下表显示了选择器中可用的回调函数的列表-

S.No Callbacks & Description Type Default
1

onChange

The callback function will be executed whenever the picker value changed and the values and displayValues are arrays of related column.

function (p, values, displayValues)
2

onOpen

The callback function will be executed whenever picker is opened.

function (p)
3

onClose

The callback function will be executed whenever picker is closed.

function (p)

列参数

在配置Picker的时候,我们需要传递cols参数。它以数组表示,其中每个项目都是具有列参数的对象-

S.No Parameters & Description Type Default
1

values

You can specify the string columns values with an array.

array
2

displayValues

It has array with string columns values and it will display value from values parameter, When it not specified.

array
3

cssClass

The CSS class name used to set on column HTML container.

string
4

textAlign

It is used to set text alignment of column values and it could be “left”, “center” or “right”.

string
5

width

Width is calculated automatically, by default. If you need to fix column widths in picker with dependent columns that should be in px.

number
6

divider

It is used for column that should be visual divider, it doesn’t have any values.

boolean false
7

content

It is used to specified divider-column (divider:true) with content of the column.

string

列回调参数

S.No Callbacks & Description Type Default
1

onChange

Whenever the column value will change at that time callback function will execute. The value and displayValue represent current column value and displayValue.

function (p, value, displayValue)

选择器属性

Picker变量具有下表中给出的许多属性-

S.No Properties & Description
1

myPicker.params

You can initialize passed parameters with object.

2

myPicker.value

The selected value for each column is represented by an array of item.

3

myPicker.displayValue

The selected display value for each column is represented by an array of item.

4

myPicker.opened

When picker is opened, it sets to true value.

5

myPicker.inline

When picker is inline, it sets to true value.

6

myPicker.cols

The Picker columns has its own methods and properties.

7

myPicker.container

The Dom7 instance is used for HTML container.

选择器方法

picker变量具有有用的方法,下表中给出了这些方法-

S.No Methods & Description
1

myPicker.setValue(values, duration)

Use to set new picker value. The values are in array where each item represents value for each column. duration – It is transition duration in ms.

2

myPicker.open()

Use to open Picker.

3

myPicker.close()

Use to close Picker.

4

myPicker.destroy()

Use to destroy Picker instance and remove all events.

列属性

下表中给出了myPicker.cols数组中的每一列都有其自己的有用属性-

//Get first column
var col = myPicker.cols[0];
S.No Properties & Description
1

col.container

You can create an instance with column HTML container.

2

col.items

You can create an instance with column items HTML elements.

3

col.value

Used to select the current column value.

4

col.displayValue

Used to select the current column value of display.

5

col.activeIndex

Give the current index number, which is selected/active item.

列方法

下表列出了有用的列方法-

S.No Methods & Description
1

col.setValue(value, duration)

Used to set a new value for the current column. The value must be a new value, and duration is transition duration given in ms.

2

col.replaceValues(values, displayValues)

Used to replace the column values and displayValues with new ones.

每当您将Picker初始化为嵌入式Picker时,就可以从其HTML容器访问Picker的实例。

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

下表中指定了不同类型的选取器-

S.No Tabs Types & Description
1 Picker With Single Value

It is a powerful component that allows you to pick any values from list.

2 Two Values and 3D-Rotate Effect

In the picker you can use for 3D rotate effect.

3 Dependent Values

Values are dependent on each other for specified element.

4 Custom Toolbar

You can use one or more picker on single page for customize.

5 Inline Picker / Date-time

You can select number of values in the inline picker.Like date has date, month, year and time has hours, minutes, seconds.