📅  最后修改于: 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. |