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