Framework7 - 选择器

上一页
下一页

描述

选择器看起来像 iOS 原生选择器，它是一个功能强大的组件，允许您从列表中选择任何值，也可用于创建自定义覆盖层选择器。您可以将选择器用作内联组件或覆盖层。覆盖层选择器将在平板电脑（iPad）上自动转换为弹出窗口。

使用以下 App 的方法，您可以创建并初始化 JavaScript 方法 -

myApp.picker(parameters)

其中参数是必需的对象，用于初始化选择器实例，并且它是一个必需的方法。

选择器参数

下表指定了选择器中可用的参数 -

序号 参数 & 描述 类型 默认值
1

container

用于为内联选择器生成选择器 HTML 的 CSS 选择器字符串或 HTMLElement。

 字符串或 HTMLElement -
2

input

使用 CSS 选择器字符串或 HTMLElement 放在一起的相关输入元素。

 字符串或 HTMLElement -
3

scrollToInput

每当选择器打开时，它用于滚动输入的视口（页面内容）。

 布尔值 true
4

inputReadOnly

用于在指定的输入上设置“只读”属性。

 布尔值 true
5

convertToPopover

它用于在 iPad 等大屏幕上将选择器模态转换为弹出窗口。

 布尔值 true
6

onlyOnPopover

您可以通过启用它在弹出窗口中打开选择器。

 布尔值 true
7

cssClass

对于选择器模态，您可以使用其他 CSS 类名。

 字符串 -
8

closeByOutsideClick

您可以通过启用该方法，通过点击选择器或输入元素外部来关闭选择器。

 布尔值 false
9

toolbar

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

 布尔值 true
10

toolbarCloseText

用于“完成/关闭”工具栏按钮。

 字符串 '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>
字符串 -

特定选择器参数

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

序号 参数 & 描述 类型 默认值
1

rotateEffect

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

 布尔值 false
2

momentumRatio

当您在快速触摸和移动后释放选择器时，它会产生更多的动量。

 数字 7
3

updateValuesOnMomentum

用于在动量期间更新选择器和输入值。

 布尔值 false
4

updateValuesOnTouchmove

用于在触摸移动期间更新选择器和输入值。

 布尔值 true
5

value

该数组具有其初始值，并且每个数组项都表示相关列的值。

 数组 -
6

formatValue

该函数用于格式化输入值，它应该返回新的/格式化的字符串值。值和显示值是相关列的数组。

 function (p, values, displayValues) -
7

cols

每个数组项都表示一个带有列参数的对象。

 数组 -

选择器参数回调

下表显示了选择器中可用的回调函数列表 -

序号 回调 & 描述 类型 默认值
1

onChange

每当选择器值更改时，回调函数将被执行，并且值和显示值是相关列的数组。

 function (p, values, displayValues) -
2

onOpen

每当选择器打开时，回调函数将被执行。

 function (p) -
3

onClose

每当选择器关闭时，回调函数将被执行。

 function (p) -

列参数

在配置选择器时，我们需要传递cols参数。它表示为数组，其中每个项目都是带有列参数的对象 -

序号 参数 & 描述 类型 默认值
1

values

您可以使用数组指定字符串列值。

 数组 -
2

displayValues

它包含带有字符串列值的数组，它将显示来自values参数的值，当它未指定时。

 数组 -
3

cssClass

用于在列 HTML 容器上设置的CSS 类名称。

 字符串 -
4

textAlign

它用于设置列值的文本对齐方式，可以是“left”，“center”或“right”。

 字符串 -
5

width

默认情况下，宽度会自动计算。如果您需要在具有依赖列的选择器中修复列宽度，则应以px为单位。

 数字 -
6

divider

它用于应为视觉分隔符的列，它没有任何值。

 布尔值 false
7

content

它用于使用列的内容指定分隔符列(divider:true)。

 字符串 -

列回调参数

序号 回调 & 描述 类型 默认值
1

onChange

每当列值发生变化时，回调函数都会执行。value 和 displayValue分别表示当前列的value 和 displayValue。

 function (p, value, displayValue) -

选择器属性

Picker 变量有很多属性，如下表所示 -

序号 属性 & 描述
1

myPicker.params

您可以使用对象初始化传递的参数。
2

myPicker.value

每列的选择值由项目数组表示。
3

myPicker.displayValue

每列的选择显示值由项目数组表示。
4

myPicker.opened

当选择器打开时，它设置为true值。
5

myPicker.inline

当选择器为内联时，它设置为true值。
6

myPicker.cols

选择器列具有其自身的方法和属性。
7

myPicker.container

Dom7 实例用于 HTML 容器。

选择器方法

选择器变量有一些有用的方法，如下表所示 -

序号 方法 & 描述
1

myPicker.setValue(values, duration)

用于设置新的选择器值。值位于数组中，其中每个项目都表示每列的value。duration - 它是以毫秒为单位的过渡持续时间。
2

myPicker.open()

用于打开选择器。
3

myPicker.close()

用于关闭选择器。
4

myPicker.destroy()

用于销毁选择器实例并删除所有事件。

列属性

myPicker.cols数组中的每个列也具有其自身的有用属性，如下表所示 -

//Get first column
var col = myPicker.cols[0];
序号 属性 & 描述
1

col.container

您可以使用列 HTML 容器创建一个实例。
2

col.items

您可以使用列项目 HTML 元素创建一个实例。
3

col.value

用于选择当前列的值。
4

col.displayValue

用于选择当前列的显示值。
5

col.activeIndex

给出当前索引号，即选定的/活动的项目。

列方法

有用的列方法如下表所示 -

序号 方法 & 描述
1

col.setValue(value, duration)

用于为当前列设置新值。value必须是新值，duration是以毫秒为单位的过渡持续时间。
2

col.replaceValues(values, displayValues)

用于将列值和显示值替换为新的值。

每当您将选择器初始化为内联选择器时，它用于从其 HTML 容器访问选择器的实例。

var myPicker = $$('.picker-inline')[0].f7Picker;

选择器有不同类型，如下表所示 -

序号 选项卡类型 & 描述
1 带单个值的选择器

它是一个功能强大的组件，允许您从列表中选择任何值。
2 两个值和 3D 旋转效果

在选择器中，您可以使用 3D 旋转效果。
3 依赖值

值取决于指定元素的彼此。
4 自定义工具栏

您可以在单个页面上使用一个或多个选择器进行自定义。
5 内联选择器 / 日期时间

您可以在内联选择器中选择多个值。例如，日期有日期、月份、年份，时间有小时、分钟、秒。
打印页面
上一页
下一页
广告