Framework7 - 智能选择

描述

智能选择是一种通过使用复选框和单选按钮组将表单选择转换为动态页面的一种简单方法。

我们可以在下表中指定的各种类型中使用智能选择 -

序号	类型和描述
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	多选和分组智能选择允许使用 multiple 和 optgroup 属性来使用多选和分组选项。
8	多选和最大长度智能选择允许使用 maxlength 属性选择有限数量的项目。

您可以使用更多类型的智能选择，这些选择可以用于下表中列出的不同场景 -

序号	类型和描述	属性
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) smartSelect - 它是要打开的指定智能选择的 HTMLElement 或字符串参数。
6	动态添加选项即使智能选择已打开，您也可以动态向其中添加选项。	myApp.smartSelectAddOption (select, optionHTML, index) smartSelect - 它是要打开的指定智能选择的 HTMLElement 或字符串参数。 optionHTML - 它是必需的字符串元素，可用于添加 HTML 选项。 index - 它指定新选项的索引号。

framework7_forms.htm

打印页面

广告