这个页面展示了如何开始使用Wijmo的Input控件。
在JavaScript应用中开始使用Input控件的步骤:
AutoComplete控件是一个自动完成的控件,允许你筛选它的项目列表为你的类型,以及从他的下拉列表直接选择一个值。
要使用AutoComplete控件,你必须至少设置itemsSource属性为一个填充列表的数据数组。 AutoComplete控件还提供了几个其它的属性来改变它的行为,比如cssMatch属性。 这个cssMatch属性允许你指定CSS类来突出符合你搜索条件的部分内容。
下面的实例使用了一个字符串数组通过设置itemsSource属性来填充AutoComplete控件的项目列表。 要看到一个搜索建议列表,在下面的AutoComplete控件键入"ab"或者"za"。
ComboBox控件与AutoComplete控件是非常相似的,但它不是提供一列你输入内容的建议,而会自动补全并且选择一个你键入的选项。
就像AutoComplete控件,你必须至少设置itemsSource属性为一个填充列表的数据数组。 你可能也会想要通过isEditable属性来指定ComboBox是否可编辑。 isEditable属性决定用户是否可以输入ComboBox列表中没有出现的值。
下面这个样例使用两个绑定同一个数据源的ComboBox,就像上面的AutoComplete控件那样。 第一个ComboBox的isEditable属性设为false,而第二个的isEditable属性设为真。
InputDate控件允许你通过一个下拉日历编辑和选择日期,同时防止你输入不正确的值。 InputDate的下拉日历可以作为一个独立的控件,并且可以在InputDate控件外独立使用。
InputDate和Calendar都指定了几个属性来改变控件的行为,最常用的属性包括:
下面的样例展示了如何使用这些属性。
Valid Range: to
与InputDate控件相同,InputTime控件允许你修改JavaScript日期的时间部分。InputTime控件和InputDate控件有许多共有的属性, 包括format, min, max和value。 InputTime控件还提供了一个step属性,允许你在它的下拉表中指定分钟的数量。
下面的样例说明了如何使用同时使用InputTime控件和InputDate控件。 注意这些控件共同编辑同一个JavaScript Date对象并且只更新它们负责的一部分。
Selected Date & Time:
ListBox控件展示了一列项目,允许你使用你的鼠标和键盘选中它们。 就像AutoComplete和ComboBox控件,你必须指定ListBox的itemsSource属性才能使用它。
下面的样例允许你在ListBox控件中选择一个项目同时展示控件的selectedIndex和selectedValue属性。
selectedIndex:
selectedValue:
InputNumber控件允许你编辑数字,它会阻止你输入无效的数据并且在它被编辑的时候将数字格式化。 InputNumber可以在不指定它的任何属性情况下使用。不过,你通常会使用value属性来将它绑定到一些数据。
除了value属性,InputNumber控件提供了几个其他的属性可以被用来改变它的行为,比如:
下面的样例演示了如何使用所有这些属性。
InputMask控件允许在输入的时候校验和格式化用户输入,阻止无效的数据。 InputMask控件可以在不指定任何属性的情况下使用; 不过,你通常会设置它的value和mask属性。像其他Wijmo输入控件一样, value属性制定了InputMask控件的值。mask属性制定了控件的输入掩码并且支持下列字符的的组合:
下面这个样例演示如何在InputMask, InputDate和InputTime控件使用value和mask属性。
菜单控件允许你创建一个简单的拥有可点击项目的下拉列表。就像ComboBox一样,Menu的项目可以通过itemsSource属性直接定义。 要指定显示在Menu的文本,你可以设置header属性。
Menu控件提供了两种方法来处理用户的选择,在每个菜单项目上指定一条指令或者指定一个itemClicked事件。 与itemClicked事件不同,指令是实现了以下两种方法的对象:
下面的样例演示如何使用这两种方法。