”;
Description
Picker looks like iOS native picker and it is a powerful component that allows you to pick any values from list and also used to create custom overlay pickers. You can use Picker as inline component or as overlay. The overlay picker will be automatically converted to Popover on tablets (iPad).
Using the following App’s method, you can create and initialize the JavaScript method −
myApp.picker(parameters)
Where parameters are required objects, used to initialized the picker instance and it is a required method.
Picker Parameters
The following table specifies the available parameters in the pickers −
| 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 −
<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>
|
string | – |
Specific Picker Parameters
The following table lists the available specific picker parameters −
| 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 | – |
Picker Parameter Callbacks
The following table shows the lists of callback functions available in pickers −
| 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) | – |
Column Parameters
At the moment of configuration of Picker, we need to pass cols parameter. It is a represented as array, where each item is object with column parameters −
| 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 | – |
Column Callbacks Parameter
| 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 Properties
The Picker variable has many properties those are given in the following table −
| 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 Methods
The picker variable has helpful methods, which are given in the following table −
| 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. |
Column Properties
Each column in myPicker.cols array also has its own useful properties, which are given in the following table −
//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. |
Column Methods
The useful column methods are given in the following table −
| 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. |
It is used to access Picker”s instance from its HTML container, whenever you initialize Picker as inline Picker.
var myPicker = $$(''.picker-inline'')[0].f7Picker;
There are different types of Pickers as specified in the following table −
| 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. |
”;