Wijmo 5

Input 101

这个页面展示了如何开始使用Wijmo的Input控件。

入门

在JavaScript应用中开始使用Input控件的步骤:

  1. 添加对Wijmo的引用。
  2. 添加标记作为Wijmo控件的宿主。
  3. 通过JavaScript初始化Wijmo控件。
  4. (可选)添加一些CSS自定义输入控件的外观。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="css/wijmo.css" /> <link href="css/app.css" rel="stylesheet" type="text/css" /> <script src="scripts/wijmo.js" type="text/javascript"></script> <script src="scripts/wijmo.input.js" type="text/javascript"></script> <script src="scripts/app.js" type="text/javascript"></script> </head> <body> <input id="gsInputNumber" type="text" /> </body> </html>
var inputNumber = new wijmo.input.InputNumber('#gsInputNumber'); inputNumber.value = 3.5; inputNumber.step = 0.5; inputNumber.format = 'n';

Result (live):

AutoComplete

AutoComplete控件是一个自动完成的控件,允许你筛选它的项目列表为你的类型,以及从他的下拉列表直接选择一个值。

要使用AutoComplete控件,你必须至少设置itemsSource属性为一个填充列表的数据数组。 AutoComplete控件还提供了几个其它的属性来改变它的行为,比如cssMatch属性。 这个cssMatch属性允许你指定CSS类来突出符合你搜索条件的部分内容。

下面的实例使用了一个字符串数组通过设置itemsSource属性来填充AutoComplete控件的项目列表。 要看到一个搜索建议列表,在下面的AutoComplete控件键入"ab"或者"za"

<div> <label>itemsSource Only</label> <div id="acAutoComplete1"></div> </div> <div> <label>itemsSource &amp; cssMatch</label> <div id="acAutoComplete2"></div> </div>
var autoComplete1 = new wijmo.input.AutoComplete('#acAutoComplete1'); var autoComplete2 = new wijmo.input.AutoComplete('#acAutoComplete2'); autoComplete1.itemsSource = data.countries; autoComplete2.itemsSource = data.countries; autoComplete2.cssMatch = 'highlight'; // CSS class for custom highlighting
.highlight { background-color: #ff0; color: #000; }

Result (live):

ComboBox

ComboBox控件与AutoComplete控件是非常相似的,但它不是提供一列你输入内容的建议,而会自动补全并且选择一个你键入的选项。

就像AutoComplete控件,你必须至少设置itemsSource属性为一个填充列表的数据数组。 你可能也会想要通过isEditable属性来指定ComboBox是否可编辑。 isEditable属性决定用户是否可以输入ComboBox列表中没有出现的值。

下面这个样例使用两个绑定同一个数据源的ComboBox,就像上面的AutoComplete控件那样。 第一个ComboBox的isEditable属性设为false,而第二个的isEditable属性设为真。

<div> <label>Non-Editable</label> <div id="cbComboBox1"></div> </div> <div> <label>Editable</label> <div id="cbComboBox2"></div> </div>
var comboBox1 = new wijmo.input.ComboBox('#cbComboBox1'); var comboBox2 = new wijmo.input.ComboBox('#cbComboBox2'); comboBox1.itemsSource = data.countries; comboBox1.isEditable = false; comboBox2.itemsSource = data.countries; comboBox2.isEditable = true;

Result (live):

InputDate & Calendar

InputDate控件允许你通过一个下拉日历编辑和选择日期,同时防止你输入不正确的值。 InputDate的下拉日历可以作为一个独立的控件,并且可以在InputDate控件外独立使用。

InputDate和Calendar都指定了几个属性来改变控件的行为,最常用的属性包括:

下面的样例展示了如何使用这些属性。

<div> <label>Bound InputDate with min &amp; max</label> <input id="idcInputDate" type="text" /> </div> <div> <label>Bound Calendar with min &amp; max</label> <input id="idcCalendar" type="text" style="width:300px;" /> </div> <p> <b>Valid Range: <span id="idcMinDate"></span> to <span id="idcMaxDate"></span></b> </p>
var inputDate = new wijmo.input.InputDate('#idcInputDate'); var calendar = new wijmo.input.Calendar('#idcCalendar'); var today = new Date(); var minDate = new Date(today.getFullYear(), 0, 1); var maxDate = new Date(today.getFullYear(), 11, 31); var format = 'MMM d, yyyy'; inputDate.value = today; inputDate.min = minDate; inputDate.max = maxDate; calendar.value = today; calendar.min = minDate; calendar.max = maxDate; // set current date range values below the example document.getElementById('idcMinDate').innerHTML = wijmo.Globalize.format(minDate, format); document.getElementById('idcMaxDate').innerHTML = wijmo.Globalize.format(maxDate, format);

Result (live):

Valid Range: to

InputDate & InputTime

与InputDate控件相同,InputTime控件允许你修改JavaScript日期的时间部分。InputTime控件和InputDate控件有许多共有的属性, 包括format, min, maxvalue。 InputTime控件还提供了一个step属性,允许你在它的下拉表中指定分钟的数量。

下面的样例说明了如何使用同时使用InputTime控件和InputDate控件。 注意这些控件共同编辑同一个JavaScript Date对象并且只更新它们负责的一部分。

<div> <label>Bound InputDate with min, max, &amp; format</label> <input id="iditInputDate" type="text" /> </div> <div> <label>Bound InputTime with min, max, &amp; step</label> <input id="iditInputTime" type="text" /> </div>
var inputDate = new wijmo.input.InputDate('#iditInputDate'); var inputTime = new wijmo.input.InputTime('#iditInputTime'); var today = new Date(); var minDate = new Date(today.getFullYear(), 0, 1); var maxDate = new Date(today.getFullYear(), 11, 31); var minTime = new Date(0, 0, 0, 7, 0, 0, 0); var maxTime = new Date(0, 0, 0, 19, 0, 0, 0); inputTime.valueChanged.addHandler(valueChanged); inputDate.valueChanged.addHandler(valueChanged); inputDate.value = today; inputDate.min = minDate; inputDate.max = maxDate; inputDate.format = 'MMM dd, yyyy'; inputTime.value = today; inputTime.min = minTime; inputTime.max = maxTime; inputTime.step = 15; // valueChanged event handler function valueChanged() { // get new date from the two controls using Wijmo utility functions var val = wijmo.DateTime.fromDateTime(inputDate.value, inputTime.value); // format and display the new date document.getElementById('iditSelectedValue').innerHTML = wijmo.Globalize.format(val, 'MMM dd, yyyy h:mm:ss tt'); }

Result (live):

Selected Date & Time:

ListBox

ListBox控件展示了一列项目,允许你使用你的鼠标和键盘选中它们。 就像AutoComplete和ComboBox控件,你必须指定ListBox的itemsSource属性才能使用它。

下面的样例允许你在ListBox控件中选择一个项目同时展示控件的selectedIndexselectedValue属性。

<div> <div id="lbListBox" style="height:150px;width:250px;"></div> </div> <p> <b>selectedIndex: <span id="lbSelIdx"></span></b> </p> <p> <b>selectedValue: <span id="lbSelVal"></span></b> </p>
var listBox = new wijmo.input.ListBox('#lbListBox'); listBox.selectedIndexChanged.addHandler(selectedIndexChanged); listBox.itemsSource = data.cities; // selectedIndexChanged event handler function selectedIndexChanged(sender) { // set selectedIndex and selectedValue text document.getElementById('lbSelIdx').innerHTML = sender.selectedIndex; document.getElementById('lbSelVal').innerHTML = sender.selectedValue; }

Result (live):

selectedIndex:

selectedValue:

InputNumber

InputNumber控件允许你编辑数字,它会阻止你输入无效的数据并且在它被编辑的时候将数字格式化。 InputNumber可以在不指定它的任何属性情况下使用。不过,你通常会使用value属性来将它绑定到一些数据。

除了value属性,InputNumber控件提供了几个其他的属性可以被用来改变它的行为,比如:

下面的样例演示了如何使用所有这些属性。

<div> <label>Unbound with "n0" format</label> <input id="inInputNumber1" type="text" /> </div> <div> <label>Bound with "n" format</label> <input id="inInputNumber2" type="text" /> </div> <div> <label>Bound with min (0), max (10), step, and "c2" format</label> <input id="inInputNumber3" type="text" /> </div> <div> <label>Unbound with placeholder and required="false"</label> <input id="inInputNumber4" type="text" /> </div>
var inputNumber1 = new wijmo.input.InputNumber('#inInputNumber1'); var inputNumber2 = new wijmo.input.InputNumber('#inInputNumber2'); var inputNumber3 = new wijmo.input.InputNumber('#inInputNumber3'); var inputNumber4 = new wijmo.input.InputNumber('#inInputNumber4'); inputNumber1.value = 0; inputNumber1.format = 'n0'; inputNumber2.value = Math.PI; inputNumber2.format = 'n'; inputNumber3.value = 3.5; inputNumber3.format = 'c2'; inputNumber3.step = 0.5; inputNumber3.min = 0; inputNumber3.max = 10; inputNumber4.placeholder = 'Enter a number...'; inputNumber4.required = false; inputNumber4.value = null;

Result (live):

InputMask

InputMask控件允许在输入的时候校验和格式化用户输入,阻止无效的数据。 InputMask控件可以在不指定任何属性的情况下使用; 不过,你通常会设置它的valuemask属性。像其他Wijmo输入控件一样, value属性制定了InputMask控件的值。mask属性制定了控件的输入掩码并且支持下列字符的的组合:

0
数字
9
数字或空格
#
数字,符号或空格
L
字母
l
字母或空格
A
字母数字
a
字母数字或空格
.
本地化的小数点
,
本地化的千分位分隔符
:
本地化的时间分隔符
/
本地化的日期分隔符
$
本地化的货币标志
<
使其后所有字符转换为小写
>
使其后所有字符转换为大写
|
Disables case conversion.
\
使其后的字符显示为原义字符
其它
原义字符

下面这个样例演示如何在InputMask, InputDate和InputTime控件使用valuemask属性。

<div> <label>Social Security Number</label> <input id="imSocial" type="text" title="Mask: 000-00-0000" /> </div> <div> <label>Phone Number</label> <input id="imPhone" type="text" title="Mask: (999) 000-0000" /> </div> <div> <label>Try your own</label> <input id="imCustomInput" type="text" /> <input id="imCustomTrial" type="text" /> </div> <div> <label>InputDate with Mask</label> <input id="imInputDate" type="text" title="Mask: 99/99/9999" /> </div> <div> <label>InputTime with Mask</label> <input id="imInputTime" type="text" title="Mask: 00:00 >LL" /> </div>
var socialSecurity = new wijmo.input.InputMask('#imSocial'), phoneNumber = new wijmo.input.InputMask('#imPhone'), customMaskInput = new wijmo.input.InputMask('#imCustomInput'), customMaskTrial = new wijmo.input.InputMask('#imCustomTrial'), inputDate = new wijmo.input.InputDate('#imInputDate'), inputTime = new wijmo.input.InputTime('#imInputTime'), today = new Date(); socialSecurity.mask = '000-00-0000'; phoneNumber.mask = '(999) 000-0000'; // valueChanged event handler customMaskInput.valueChanged.addHandler(function(sender) { customMaskTrial.mask = sender.value; customMaskTrial.hostElement.title = 'Mask: ' + (sender.value || 'N/A'); }); customMaskInput.required = false; customMaskInput.placeholder = 'Enter an input mask...'; customMaskInput.value = null; customMaskTrial.required = false; customMaskTrial.placeholder = 'Try your input mask...'; inputDate.value = today; inputDate.format = 'd'; inputDate.mask = '99/99/9999'; inputTime.value = today; inputTime.format = 't'; inputTime.step = 15; inputTime.isEditable = true; inputTime.mask = '00:00 >LL';

Result (live):

菜单

菜单控件允许你创建一个简单的拥有可点击项目的下拉列表。就像ComboBox一样,Menu的项目可以通过itemsSource属性直接定义。 要指定显示在Menu的文本,你可以设置header属性。

Menu控件提供了两种方法来处理用户的选择,在每个菜单项目上指定一条指令或者指定一个itemClicked事件。 与itemClicked事件不同,指令是实现了以下两种方法的对象:

下面的样例演示如何使用这两种方法。

<div> <label>itemClicked Event</label> <select id="mFileMenu"> <option>New: create a new document</option> <option>Open: load an existing document from a file</option> <option>Save: save the current document to a file</option> <option></option> <option>Exit: save changes and exit the application</option> </select> <select id="mEditMenu"> <option>Cut: move the current selection to the clipboard</option> <option>Copy: copy the current selection to the clipboard</option> <option>Paste: insert the clipboard content at the cursor position</option> <option></option> <option>Find: search the current document for some text</option> <option>Replace: replace occurrences of a string in the current document</option> </select> <div> <label>Commands</label> <select id="mCmdMenu"> <option cmd-param=".25">+ 25%</option> <option cmd-param=".10">+ 10%</option> <option cmd-param=".05">+ 5%</option> <option cmd-param=".01">+ 1%</option> <option></option> <option cmd-param="-.01">- 1%</option> <option cmd-param="-.25">- 25%</option> <option cmd-param="-.05">- 5%</option> <option cmd-param="-.10">- 10%</option> </select> <input id="mInputNumber" type="text" /> </div>
var fileMenu = new wijmo.input.Menu('#mFileMenu'); var editMenu = new wijmo.input.Menu('#mEditMenu'); var cmdMenu = new wijmo.input.Menu('#mCmdMenu'); var inputNumber = new wijmo.input.InputNumber('#mInputNumber'); fileMenu.header = 'File'; fileMenu.itemClicked.addHandler(itemClicked); editMenu.header = 'Edit'; editMenu.itemClicked.addHandler(itemClicked); cmdMenu.header = 'Change Tax'; // set command object for the command menu cmdMenu.command = { executeCommand: function (arg) { // convert argument to Number arg = wijmo.changeType(arg, wijmo.DataType.Number); // check if the conversion was successful if (wijmo.isNumber(arg)) { // update the value inputNumber.value += arg; } }, canExecuteCommand: function (arg) { // convert argument to Number arg = wijmo.changeType(arg, wijmo.DataType.Number); // check if the conversion was successful if (wijmo.isNumber(arg)) { var val = inputNumber.value + arg; // check if the value is valid return val >= 0 && val <= 1; } return false; } }; inputNumber.value = 0.07; inputNumber.step = 0.05; inputNumber.format = 'p0'; inputNumber.min = 0; inputNumber.max = 1; // itemClicked event handler for File and Edit menus function itemClicked(sender) { alert('You\'ve selected option ' + sender.selectedIndex + ' from the ' + sender.header + ' menu!'); }

Result (live):