Wijmo Input模块功能详解
Wijmo 是一款采用 TypeScript 编写的新一代 JavaScript/HTML5 控件集,以触控优先的设计理念为基础,在全球范围内率先支持 AngularJS,并提供性能卓越、零依赖的 F
Wijmo 是一款采用 TypeScript 编写的新一代 JavaScript/HTML5 控件集,以触控优先的设计理念为基础,在全球范围内率先支持 AngularJS,并提供性能卓越、零依赖的 FlexGrid 和图表等多个控件。本文将重点介绍 Wijmo Input 模块的主要功能。
InputDate
InputDate 允许用户编辑日期值或从下拉日历中选择日期。通过控件的 value 属性将其绑定到 JavaScript 的 Date 值上,同时可以利用 min 和 max 属性限制有效的日期范围。
InputTime
InputTime 功能类似于 InputDate,用户可以编辑时间值或从下拉列表中选择时间。同样,通过 value 属性绑定到 JavaScript 的 Date 值上,使用 min 和 max 属性限制有效的时间范围,并可以设置 step 属性选择显示在下拉列表中的时间间隔。
InputDateTime
InputDateTime 提供两个独立的下拉控件,用于编辑 JavaScript Date 值的日期和时间部分。使用 value 属性将其绑定到 JavaScript 的 Date 值上,实现日期和时间的选择和编辑。
InputNumber
InputNumber 允许用户编辑数字值或使用微调按钮增加或减少当前值。通过 value 属性将其绑定到 JavaScript 变量,利用 min 和 max 属性限制有效的数字范围,使用 step 属性确定微调按钮增加的值。
InputMask
InputMask 使用掩码编辑字符串,阻止非法输入并跳过特定字符。这种方式可以有效地限制输入内容的格式和规范,提高数据输入的准确性。
ComboBox
ComboBox 允许用户从一个自动完成的列表中选择值。通过 isEditable 属性决定是否允许用户键入列表之外的值,可以使用 displayMemberPath 和 displayValuePath 属性从包含复杂对象的表格中选择值。
AutoComplete
AutoComplete 允许用户从动态获取的服务器列表中选择值。在用户输入时,控件会动态从服务器获取选项,使得即使对于庞大的列表也能够高效工作。
MultiSelect
MultiSelect 允许用户从包含自定义对象或简单字符串的下拉列表中选择多个项。这为用户提供了方便快捷地选择多个选项的功能。
DropDownList
DropDownList 允许用户通过下拉列表选择值或执行命令。这种简单而直观的交互方式为用户提供了便利的选择操作。
Calendar
Calendar 允许用户从月份日历中选择日期,支持日期、月份和年份的导航。通过 min 和 max 属性限制可选的日期范围,该控件通常用于与 InputDate 结合使用。
Menu
Menu 允许用户从下拉菜单中选择选项。支持 MVVM 命令,每个选项都有执行命令和决定在当前应用状态下是否执行命令的方法。
ListBox
ListBox 显示一列包含普通文本或 HTML 值的项目,允许用户选择其中一个值。通常出现在 ComboBox、AutoComplete、TimePicker 和 Menu 控件的下拉部分。
ColorPicker
ColorPicker 允许用户通过调色板或组件来选择颜色,包括色调、饱和度、亮度和透明度。通常显示在 InputColor 的下拉部分。
InputColor
InputColor 允许用户选择颜色,可以直接编辑 HTML 规范或通过 ColorPicker 控件下拉框进行选择。
Popup
Popup 可将 HTML 元素显示为对话框或工具提示。对话框模式下位于页面中央,可能是模态或非模态;工具提示模式下固定在宿主控件旁,可显示各种内容,提供更丰富的交互体验。
通过全面了解 Wijmo Input 模块的各项功能,开发者可以更灵活地运用这些控件,为用户提供更便捷、友好的界面操作体验。