Framework7 - Picker
描述
Picker 看起来像 iOS 原生选择器,它是一个功能强大的组件,允许您从列表中选择任何值,也可用于创建自定义覆盖选择器。您可以将 Picker 用作内联组件或覆盖。叠加选择器将在平板电脑(iPad)上自动转换为 Popover。
使用以下应用程序的方法,您可以创建和初始化 JavaScript 方法 −
myApp.picker(parameters)
其中 parameters 是必需对象,用于初始化选择器实例,它是必需方法。
选择器参数
下表指定了选择器中可用的参数 −
S.No | 参数 &描述 | 类型 | 默认 |
---|---|---|---|
1 | container 带有 CSS 选择器或 HTMLElement 的字符串,用于为内联选择器生成 Picker HTML。 |
字符串或 HTMLElement | - |
2 | input 与带有 CSS 选择器或 HTMLElement 的字符串一起放置的相关输入元素。 |
字符串或 HTMLElement | - |
3 | scrollToInput 用于在打开选择器时滚动输入的视口(页面内容)。 |
boolean | true |
4 | inputReadOnly 用于设置指定输入的"readonly"属性。 |
boolean | true |
5 | convertToPopover 用于在 iPad 等大屏幕上将选择器模式转换为 Popover。 |
boolean | true |
6 | onlyOnPopover 您可以通过启用它来在 Popover 中打开选择器。 |
boolean | true |
7 | cssClass 对于选择器模式,您可以使用额外的 CSS 类名称。 |
string | - |
8 | closeByOutsideClick 您可以通过启用该方法,单击选择器或输入元素外部来关闭选择器。 |
boolean | false |
9 | toolbar 用于启用选择器模式工具栏。 |
boolean | true |
10 | toolbarCloseText 用于完成/关闭工具栏按钮。 |
string | 'Done' |
11 | toolbarTemplate 它是工具栏 HTML 模板,默认情况下它是具有以下模板的 HTML 字符串 − <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 | - |
特定选择器参数
下表列出了可用的特定选择器参数 −
S.No | 参数 &描述 | 类型 | 默认 |
---|---|---|---|
1 | rotateEffect 在拾取器中启用 3D 旋转效果。 |
boolean | false |
2 | momentumRatio 快速触摸和移动后释放拾取器时,它会产生更多动量。 |
number | 7 |
3 | updateValuesOnMomentum 用于在动量期间更新选择器和输入值。 |
boolean | false |
4 | updateValuesOnTouchmove 用于在触摸移动期间更新选择器和输入值。 |
boolean | true | 5 | value 数组有其初始值,并且每个数组项代表相关列。 |
array | - |
6 | formatValue 该函数用于格式化输入值,它应返回新的/格式化的字符串值。 values 和 displayValues 是相关列的数组。 |
function (p, values, displayValues) | - |
7 | cols 每个数组项都代表一个带有列参数的对象。 |
array | - |
选择器参数回调
下表显示了选择器中可用的回调函数列表 −
S.No | 回调 &描述 | 类型 | 默认 |
---|---|---|---|
1 | onChange 每当选择器值发生更改时,将执行回调函数,并且 values 和 displayValues 是相关列的数组。 |
function (p, values, displayValues) | - |
2 | onOpen 每当选择器打开时,将执行回调函数。 |
function (p) | - |
3 | onClose 每当选择器关闭时,回调函数都会被执行。 |
function (p) | - |
列参数
在配置Picker时,我们需要传递cols参数。它表示为数组,其中每个项目都是带有列参数的对象−
S.No | 参数 &描述 | 类型 | 默认 |
---|---|---|---|
1 | values 您可以使用数组指定字符串列值。 |
array | - |
2 | displayValues 它具有包含字符串列值的数组,当未指定时,它将显示来自 values 参数的值。 |
array | - |
3 | cssClass 用于在列 HTML 容器上设置的 CSS 类 名称。 |
string | - |
4 | textAlign 用于设置列值的文本对齐方式,可以是 "left"、"center"或"right"。 |
string | - | 5 | width 默认情况下,宽度是自动计算的。如果您需要在选择器中修复列宽,而依赖列应以 px 为单位。 |
number | - |
6 | divider 它用于应为可视分隔符的列,它没有任何值。 |
boolean | false |
7 | content 它用于指定分隔符列 (divider:true) 以及列的内容。 |
string | - |
列回调参数
S.No | 回调和说明 | 类型 | 默认 |
---|---|---|---|
1 | onChange 每当列值发生变化时,回调函数就会执行。 value 和 displayValue 代表当前列 value 和 displayValue。 |
function (p, value, displayValue) | - |
Picker 属性
Picker 变量具有许多属性,如下表所示 −
S.No | 属性 &描述 |
---|---|
1 | myPicker.params 您可以使用对象初始化传递的参数。 |
2 | myPicker.value 每列的选定值由 item 数组表示。 |
3 | myPicker.displayValue 每列的选定显示值由 item 数组表示。 |
4 | myPicker.opened 当选择器打开时,它设置为 true 值。 |
5 | myPicker.inline 当选择器为内联时,它设置为 true 值。 |
6 | myPicker.cols Picker 列有自己的方法和属性。 |
7 | myPicker.container Dom7 实例用于 HTML 容器。 |
Picker 方法
picker 变量有一些有用的方法,如下表所示 −
S.No | 方法和说明 |
---|---|
1 | myPicker.setValue(values, duration) 用于设置新的选择器值。值位于数组中,其中每个项目代表每列的值。 duration - 以毫秒为单位的过渡持续时间。 |
2 | myPicker.open() 用于打开 Picker。 |
3 | myPicker.close() 用于关闭 Picker。 |
4 | myPicker.destroy() 用于销毁 Picker 实例并删除所有事件。 |
列属性
myPicker.cols 数组中的每一列还有自己的有用属性,如下表所示 −
//获取第一列 var col = myPicker.cols[0];
S.No | 属性 &描述 |
---|---|
1 | col.container 您可以创建一个带有列 HTML 容器的实例。 |
2 | col.items 您可以创建一个带有列项 HTML 元素的实例。 |
3 | col.value 用于选择当前列值。 |
4 | col.displayValue 用于选择当前列值显示。 |
5 | col.activeIndex 给出当前索引号,即选定/活动项。 |
列方法
下表给出了有用的列方法 −
S.No | 方法与说明 |
---|---|
1 | col.setValue(value, duration) 用于为当前列设置新值。 value 必须是新值,duration 是以毫秒为单位的过渡持续时间。 |
2 | col.replaceValues(values, displayValues) 用于将列值和 displayValues 替换为新值。 |
每当您将 Picker 初始化为内联 Picker 时,它用于从其 HTML 容器访问 Picker 的实例。
var myPicker = $$('.picker-inline')[0].f7Picker;
下表列出了不同类型的选择器 −
S.No | 标签类型 &描述 |
---|---|
1 | 单值选择器
这是一个功能强大的组件,可让您从列表中选择任何值。 |
2 | 两个值和 3D 旋转效果
在选择器中,您可以使用 3D 旋转效果。 |
3 | 依赖值
值彼此依赖,以实现指定的元素。 |
4 | 自定义工具栏
您可以在单个页面上使用一个或多个选择器进行自定义。 |
5 | 内联选择器/日期时间
您可以在内联选择器中选择多个值。例如日期有日期、月份、年份,时间有小时、分钟、秒。 |