Framework7 - 智能选择
描述
智能选择是一种通过使用复选框和单选输入组将表单选择更改为动态页面的简单方法。
我们可以使用下表中指定的各种类型的智能选择 −
| S.No | 类型 &描述 |
|---|---|
| 1 | 智能选择布局
智能选择布局使用 smart-select 类在 select 元素内定义列表视图。 |
| 2 | 带搜索栏的智能选择
智能选择使用 搜索栏 搜索元素，并通过将 data-searchbar 类设置为 true 来启用它。 |
| 3 | 自定义页面标题和反向链接文本
您可以使用 data-page-title 和 data-back-text 属性为智能选择设置自定义页面标题和反向链接。 |
| 4 | 在弹出窗口中打开
通过使用 data-open-in 属性 popup，智能选择可以作为弹出窗口打开。 |
| 5 | 在选择器中打开
智能选择可以通过将 data-open-in 属性设置为 picker。 |
| 6 | 自定义图标、颜色和图像
您可以分别使用 data-option-icon、data-option-color 和 data-option-image 属性在智能选择上定义自定义图标、颜色或图像。 |
| 7 | 多选和 Optgroup
智能选择允许使用 multiple 和optgroup 属性。 |
| 8 | 多选和 Maxlength
智能选择允许使用 maxlength 属性选择有限数量的项目。 |
您可以拥有更多类型的智能选择，可用于下表所列的不同场景 −
| S.No | 类型 &描述 | 属性 |
|---|---|---|
| 1 | 用户选择时关闭智能选择 当用户选择任何选项时，您可以关闭智能选择。 |
data-back-on-select = "true" |
| 2 | 使用虚拟列表进行智能选择 如果您有很多选项，虚拟列表可以与智能选择一起使用。 |
data-virtual-list = "true" |
| 3 | 智能选择颜色主题 您可以在智能选择页面上指定表单和导航栏的颜色主题。 |
data-form-theme = "color" data-navbar-theme = "color" |
| 4 | 通过选项文本设置智能选择值 可以使用选项值设置智能选择的值。 |
smart-select-value |
| 5 | 使用打开智能选择JavaScript 您可以使用 JavaScript 方法打开智能选择。 |
myApp.smartSelectOpen (smartSelect)
|
| 6 | 动态添加选项 您可以动态向智能选择添加选项，即使它们已经打开。 |
myApp.smartSelectAddOption (select, optionHTML, index)
|
framework7_forms.html
