myApp.picker(parameters)
S.No | 参数和说明 | 输入 | 默认 |
1 |
container
带有 CSS 选择器或 HTMLElement 的string,用于为内联选择器生成选择器 HTML。
|
string或 HTMLElement | - |
2 |
input
与CSS选择器或HTMLElementstring一起放置的相关输入元素。
|
string或 HTMLElement | - |
3 |
scrollToInput
每当打开选择器时,它用于滚动输入的视口(页面内容)。
|
boolean | true |
4 |
inputReadOnly
用于设置指定输入的"只读"属性。
|
boolean | true |
5 |
convertToPopover
用于在iPad等大屏幕上将picker modal转换为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模板,默认是HTMLstring,模板如下-
<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
在picker中开启3D旋转效果
|
boolean | false |
2 |
momentumRatio
当你在快速触摸和移动后释放选择器时,它会产生更多的动量。
|
number | 7 |
3 |
updateValuesOnMomentum
用于在动量期间更新选择器和输入值。
|
boolean | false |
4 |
updateValuesOnTouchmove
用于在触摸移动期间更新选择器和输入值。
|
boolean | true |
5 |
value
array有初始值,每个array项代表相关列的值。
|
array | - |
6 |
formatValue
该function用于格式化输入值,它应该返回新的/格式化的string值。
值 和
displayValues 是相关列的array。
|
function(p, values, displayValues) | - |
7 |
cols
每个array项代表一个带有列参数的对象。
|
array | - |
S.No | 回调和描述 | 输入 | 默认 |
1 |
onChange
每当picker 值改变并且
values 和displayValues 是相关列的array时,回调function将被执行。
|
function(p, values, displayValues) | - |
2 |
onOpen
每当打开选择器时都会执行回调function。
|
function(p) | - |
3 |
onClose
回调function会在picker关闭时执行。
|
function(p) | - |
S.No | 参数和说明 | 输入 | 默认 |
1 |
values
您可以使用array指定string列值。
|
array | - |
2 |
displayValues
它有一个包含string列值的array,它将显示来自
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
每当列值发生变化时,回调function就会执行。
value 和 displayValue 代表当前列mn
value 和 displayValue.
|
function(p, value, displayValue) | - |
S.No | 属性和描述 |
1 |
myPicker.params
您可以使用对象初始化传递的参数。
|
2 |
myPicker.value
每列的选定值由项目array表示。
|
3 |
myPicker.displayValue
每列选定的显示值由一个项目array表示。
|
4 |
myPicker.opened
当picker打开时,它设置为
true值。
|
5 |
myPicker.inline
当picker 为内联时,它设置为
true 值。
|
6 |
myPicker.cols
Picker 列有自己的方法和属性。
|
7 |
myPicker.container
Dom7 实例用于 HTML 容器。
|
S.No | 方法和说明 |
1 |
myPicker.setValue(values, duration)
用于设置新的选择器值。值在array中,其中每个项目代表每列的
value。
duration-以毫秒为单位的转换持续时间。
|
2 |
myPicker.open()
用于打开选择器。
|
3 |
myPicker.close()
用于关闭 Picker。
|
4 |
myPicker.destroy()
用于销毁 Picker 实例并删除所有事件。
|
//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(value, duration)
用于为当前列设置新值。
value 必须是一个新值,
duration 是以毫秒为单位的转换持续时间。
|
2 |
col.replaceValues(values, displayValues)
用于用新的值替换列值和显示值。
|
var myPicker = $('.picker-inline')[0].f7Picker;
S.No | 标签类型和描述 |
1 | 单值选取器
这是一个强大的组件,允许您从列表中选取任何值。
|
2 | 两个值和 3D 旋转效果
在选择器中,您可以使用 3D 旋转效果。
|
3 | 依赖值
对于指定元素,值相互依赖。
|
4 | 自定义工具栏
您可以在单个页面上使用一个或多个选择器进行自定义。
|
5 | 内联选择器/日期时间
您可以在内联选择器中选择值的数量。比如日期有
日期、月份、年,时间有
小时、分钟、秒。
|