开发手册 欢迎您!
软件开发者资料库

Framework7 - Picker

Framework7 Picker - 从概述,环境,布局,导航栏,工具栏,搜索栏,状态栏,侧面板,内容块,布局网格,叠加层,预加载器,进度条,列表视图,手风琴,卡片,芯片,按钮,开始学习Framework7动作按钮,表单,选项卡,Swiper滑块,照片浏览器,自动完成,选择器,日历,刷新,无限滚动,消息,消息栏,通知,延迟加载,颜色主题,细线,模板概述,自动编译,Template7页面,活动状态,点按保持事件,触摸波纹。

描述

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

每当打开选择器时,它用于滚动输入的视口(页面内容).

booleantrue
4

inputReadOnly

用于设置指定输入的"readonly"属性.

booleantrue
5

convertToPopover

它用于在iPad等大屏幕上将选择器模式转换为Popover.

booleantrue
6

onlyOnPopover

您可以通过启用它来打开Popover中的选择器./p>

booleantrue
7

cssClass

要选择模态,你可以使用额外的CSS类名.

string-
8

closeByOutsideClick

您可以通过启用m来点击选取器或输入元素外部来关闭选择器ethod.

booleanfalse
9

工具栏

它用于启用选择器模态工具栏.

booleantrue
10

toolbarCloseText

用于完成/关闭工具栏按钮.

string'完成'
11

toolbarTemplate

这是工具栏HTML模板,按默认是带有以下模板的HTML字符串 :

                         {{closeText}}            
string-

特定选择器参数

下表列出了可用的特定选择器参数 :  ;

S.No参数&说明键入默认
1

rotateEffect

它在选择器中启用3D旋转效果.

booleanfalse
2

momentumRatio

当您快速触摸并移动后释放选择器时,它会产生更多动力.

数字7
3

updateValuesOnMomentum

用于更新动量期间的拣货和输入值.

booleanfalse
4

updateValuesOnTouchmove

用于在触摸移动期间更新拣货员和输入值.

booleantrue
5

数组有初始值,每个数组项也代表相关列的值.

数组-
6

formatValue

该函数用于格式化输入值,它应返回新的/格式化的字符串值. displayValues 是相关列的数组.

function( p,values,displayValues)-
7

cols

每个数组项都代表一个带有列参数的对象.

数组-

选择器参数回调

下表显示了拾取器和减号中可用的回调函数列表;

S.NoCallbacks&说明键入默认
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

分隔符

它用于应该是可视分割器的列,它没有任何值.

booleanfalse
7

内容

它用于指定divider-column (divider:true)以及列的内容.

string-

列回调参数

S.NoCallbacks&说明键入默认
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 columnvar 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内联选择器/日期时间

您可以选择内联选择器中的值数.类似日期日期,月份,年份时间小时,分钟,秒.