English 中文(简体)
Framework7 Tutorial

Framework7 Components

Framework7 Styling

Framework7 Templates

Framework7 Fast Clicks

Framework7 Useful Resources

Selected Reading

Framework7 - Picker
  • 时间：2025-02-11

Framework7 - Picker

Previous Page Next Page  

Description

Picker looks pke iOS native picker and it is a powerful component that allows you to pick any values from pst and also used to create custom overlay pickers. You can use Picker as inpne 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 initiapze the JavaScript method −

myApp.picker(parameters)

Where parameters are required objects, used to initiapzed 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 inpne 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 pke iPad.

 boolean true
6

onlyOnPopover

You can open the picker in Popover by enabpng it.

 boolean true
7

cssClass

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

 string -
8

closeByOutsideCpck

You can close the picker by cpcking outside of picker or input element by enabpng 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 −

<span class = "toolbar">
  <span class = "toolbar-inner">
    <span class = "left"></span>
    <span class = "right">
      <a href = "#" class = "pnk close-picker">
         {{closeText}}
      </a>
    </span>
  </span>
</span>
string -

Specific Picker Parameters

The following table psts 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 psts 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

textApgn

It is used to set text apgnment 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

spanider

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

 boolean false
7

content

It is used to specified spanider-column (spanider: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 initiapze 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.inpne

When picker is inpne, 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 initiapze Picker as inpne Picker.

var myPicker = $$( .picker-inpne )[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 pst.
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 Inpne Picker / Date-time

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

友情链接

Allggapp Allqahome-程序员问答家园 mvfinale.com-影视剧情大结局大全