Wijmo 5

Input 101

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

入门

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

  1. 为AngularJS,Wijmo和Wijmo的AngularJS指令添加引用。
  2. 在应用模块中包括Wijmo 5指令:
    var app = angular.module('app', ['wj']);
  3. 添加一个控制器来提供数据和逻辑。
  4. 向当前页面添加一个Input控件,并且将它与数据绑定。
  5. (可选)添加一些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/angular.js" type="text/javascript"></script> <script src="scripts/wijmo.js" type="text/javascript"></script> <script src="scripts/wijmo.input.js" type="text/javascript"></script> <script src="scripts/wijmo.angular.js" type="text/javascript"></script> <script src="scripts/app.js" type="text/javascript"></script> </head> <body ng-app="app" ng-controller="appCtrl"> <!-- this is the InputNumber directive --> <wj-input-number value="someValue" format="n" step=".5"> </wj-input-number> </body> </html>
// declare app module var app = angular.module('app', ['wj']); // app controller provides data app.controller('appCtrl', function appCtrl($scope) { // value to bind to $scope.someValue = 3.5; });

结果:

AutoComplete

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

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

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

<div> <label>只设置itemsSource</label> <wj-auto-complete items-source="countries"> </wj-auto-complete> </div> <div> <label>设置itemsSource &amp; cssMatch</label> <wj-auto-complete items-source="countries" css-match="highlight"> </wj-auto-complete> </div>
.highlight { background-color: #ff0; color: #000; }

结果:

ComboBox

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

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

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

<div> <label>不可编辑</label> <wj-combo-box items-source="countries" is-editable="false"> </wj-combo-box> </div> <div> <label>可编辑</label> <wj-combo-box items-source="countries" is-editable="true"> </wj-combo-box> </div>

结果:

InputDate和Calendar

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

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

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

除了这些基本属性外,Calendar控件有一个formatItem事件,你可以用它来自定义日历指定日期的显示外观。 下面这个示例使用了这个事件来自定义weekends和holiday的外观。

<div> <label>带有min和max的InputDate</label> <wj-input-date value="today" min="{​{ minDate | date:'yyyy-MM-dd' }}" max="{​{ maxDate | date:'yyyy-MM-dd' }}"> </wj-input-date> </div> <div> <label>带有min和max的Calendar</label> <wj-calendar style="width:300px;" value="today" min="{​{ minDate | date:'yyyy-MM-dd' }}" max="{​{ maxDate | date:'yyyy-MM-dd' }}" format-item="formatItem(s,e)"> </wj-calendar> </div> <p> <b>所选日期: {​{ today | date }}</b> </p> <p> <b>有效范围: {​{ minDate | date }} to {​{ maxDate | date }}</b> </p>
// apply special styles to weekends and holidays var today = new Date(); $scope.today = today; $scope.minDate = new Date(today.getFullYear(), 0, 1); $scope.maxDate = new Date(today.getFullYear(), 11, 31); // apply special styles to weekends and holidays $scope.formatItem = function (s, e) { var weekday = e.data.getDay(), holiday = getHoliday(e.data); wijmo.toggleClass(e.item, 'date-weekend', weekday == 0 || weekday == 6); wijmo.toggleClass(e.item, 'date-holiday', holiday); e.item.title = holiday; } // gets the holiday for a given date function getHoliday(date) { var day = date.getDate(), month = date.getMonth() + 1; switch (month + '/' + day) { // simple holidays (fixed dates) case '1/1': return 'New Year\'s Day'; case '6/14': return 'Flag Day'; case '7/4': return 'Independence Day'; case '11/11': return 'Veteran\'s Day'; case '12/25': return 'Christmas Day'; } var weekDay = date.getDay(), weekNum = Math.floor((day - 1) / 7) + 1; switch (month + '/' + weekNum + '/' + weekDay) { case '1/3/1': return 'Martin Luther King\'s Birthday'; // third Monday in January case '2/3/1': return 'Washington\'s Birthday'; // third Monday in February case '5/3/6': return 'Armed Forces Day'; // third Saturday in May case '9/1/1': return 'Labor Day'; // first Monday in September case '10/2/1': return 'Columbus Day'; // second Monday in October case '11/4/4': return 'Thanksgiving Day'; // fourth Thursday in November } return ''; // no holiday today }
.wj-calendar .date-holiday { /* holidays in calendar */ color: #008f22; outline: 2px solid #008f22; } .wj-calendar .date-weekend:not(.wj-state-selected) { /* weekends in calendar */ background-color: #d8ffa6; }

结果:

所选日期: {{ today | date }}

有效范围: {{ minDate | date }} to {{ maxDate | date }}

InputDate, InputTime和InputDateTime控件

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

InputDateTime控件结合了InputDate和InputTime控件,允许你同时设置JavaScript日期的日期和时间部分。 InputDateTime控件有两个下拉列表:一个用来选择日期,一个用来选择时间。

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

这个示例也展示了一个InputDateTime控件,它更新JavaScript Date对象的时间和日期部分。

<div> <label>带有min,max,format的InputDate</label> <wj-input-date value="today" min="{​{ minDate | date:'yyyy-MM-dd' }}" max="{​{ maxDate | date:'yyyy-MM-dd' }}" format="MMM dd, yyyy"> </wj-input-date> </div> <div> <label>带有min,max,step的InputTime</label> <wj-input-time value="today" step="15" min="09:00" max="17:00"> </wj-input-time> </div> <p> <b>所选日期和时间: {​{ today | date: 'medium' }}</b> </p> <div> <label>带有min,max,format,step的InputDateTime</label> <wj-input-date-time value="today" format="MMM dd, yyyy hh:mm tt" min="{​{ minDate | date:'yyyy-MM-dd' }}" max="{​{ maxDate | date:'yyyy-MM-dd' }}" time-step="15" time-min="09:00" time-max="17:00"> </wj-input-date-time> </div>
var today = new Date(); $scope.today = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 13, 30); $scope.minDate = new Date(today.getFullYear(), 0, 1); $scope.maxDate = new Date(today.getFullYear(), 11, 31);

结果:

所选日期和时间: {{ today | date: 'medium' }}

InputDate和校验

InputDate控件会自动分隔用户键入的使用format属性指定格式的日期,无效的日期会被无视并且初始值会保留下来。 InputDate控件也会检查时间范围,确保时间值在使用minmax属性确定的时间范围内。

但是在大多数情况下,不是所有在minmax属性之间的日期都是有效的。 例如,你可能会创建一个日程安排应用,并希望用户不安排周末,假期或者已经有一定数量安排的日期。

要处理这些情况,InputDate(和Calendar)有个itemValidator属性。 这个属性代表一个函数,该函数以日期为参数,如果日期是有效的返回true,否则返回false。无效的日期会被自动禁用, 这样用户就不会在日历中选择它们或者通过输入来输入它们了。

下面这个示例展示了一个含有itemValidator函数的InputDate控件,当输入为周末或者美国法定假日时函数返回false。 这个示例也使用了itemFormatter函数来增加一些指定的格式和一个含有假期名称的工具栏。

<div class="app-input-group"> <label>选择一个非节假日和周末的日期:</label> <wj-input-date value="theDate" item-formatter="itemFormatter" item-validator="itemValidator"> </wj-input-date> </div> <p> <b>所选日期: {{ theDate | date }}</b> </p>
$scope.itemFormatter = function (date, element) { var weekday = date.getDay(), holiday = getHoliday(date); wijmo.toggleClass(element, 'date-weekend', weekday == 0 || weekday == 6); wijmo.toggleClass(element, 'date-holiday', holiday); element.title = holiday; } $scope.itemValidator = function (date, element) { switch (date.getDay()) { case 0: case 6: return false; // no appointments on weekends } if (getHoliday(date)) { return false; // no appointments on holidays } return true; // not a weekend or a holiday, this date is OK } // gets the holiday for a given date function getHoliday(date) { var day = date.getDate(), month = date.getMonth() + 1; switch (month + '/' + day) { // simple holidays (fixed dates) case '1/1': return 'New Year\'s Day'; case '6/14': return 'Flag Day'; case '7/4': return 'Independence Day'; case '11/11': return 'Veteran\'s Day'; case '12/25': return 'Christmas Day'; } var weekDay = date.getDay(), weekNum = Math.floor((day - 1) / 7) + 1; switch (month + '/' + weekNum + '/' + weekDay) { case '1/3/1': return 'Martin Luther King\'s Birthday'; // 3rd Mon/Jan case '2/3/1': return 'Washington\'s Birthday'; // 3rd Mon/Feb case '5/3/6': return 'Armed Forces Day'; // 3rd Sat/May case '9/1/1': return 'Labor Day'; // 1st Mon/Sep case '10/2/1': return 'Columbus Day'; // 2nd Mon/Oct case '11/4/4': return 'Thanksgiving Day'; // 4th Thu/Nov } return ''; // no holiday today }
.wj-calendar .date-holiday { color: #008f22; outline: 2px solid #008f22; }

结果:

所选日期: {{ theDate | date }}

ListBox

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

一个任意的项目内容可以使用wj-item-template指令定义, $item$itemIndex变量代表一个数据项,它的参数可以分别地用在Angular绑定中。

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

<wj-list-box style="height:150px;width:250px;" items-source="cities" control="listBox"> </wj-list-box> <p> <b>所选索引: {​{listBox.selectedIndex}}</b> </p> <p> <b>所选值: {​{listBox.selectedValue}}</b> </p>

结果:

所选索引: {{listBox.selectedIndex}}

所选值: {{listBox.selectedValue}}

第二个示例演示如何使用模板来填充ListBox控件。它使用了一个项目模板来通过复杂布局的方式展示项目,包括图像。

<wj-list-box style="max-height:300px;width:250px;" items-source="musicians"> <wj-item-template> {​{$itemIndex + 1}}. <b>{​{$item.name}}</b> <div ng-if="$item.photo"> <img ng-src="{​{$item.photo}}" height="100" /> <br /> <a href="https://www.google.ru/#newwindow=1&q=The+Beatles+{​{$item.name}}" target="_blank" style="color:red">go there!</a> </div> </wj-item-template> </wj-list-box>

结果:

{{$itemIndex + 1}}. {{$item.name}}

InputNumber

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

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

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

<div> <label>未绑定"n0"格式</label> <wj-input-number format="n0"> </wj-input-number> </div> <div> <label>绑定"n"格式</label> <wj-input-number value="pi" format="n"> </wj-input-number> </div> <div> <label>绑定min (0), max (10), step和"c2"格式</label> <wj-input-number value="price" format="c2" step=".5" min="0" max="10"> </wj-input-number> </div> <div> <label>未绑定占位符并且required="false"</label> <wj-input-number placeholder="Enter a number..." required="false" value="nullVal"> </wj-input-number> </div>
$scope.pi = Math.PI; $scope.price = 3.5; $scope.nullVal = null;

结果:

InputMask

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

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

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

<div> <label>社会安全号码</label> <wj-input-mask mask="000-00-0000" title="Mask: 000-00-0000"> </wj-input-mask> </div> <div> <label>电话号码</label> <wj-input-mask mask="(999) 000-0000" title="Mask: (999) 000-0000"> </wj-input-mask> </div> <div> <label>试验你自己的掩码</label> <wj-input-mask value="customMask" required="false" placeholder="输入一个掩码..."> </wj-input-mask> <wj-input-mask mask="{​{ customMask }}" title="Mask: {​{ customMask || 'N/A' }}" required="false" placeholder="试验你的输入掩码..."> </wj-input-mask> </div> <div> <label>带有掩码的InputDate</label> <wj-input-date value="maskToday" format="d" mask="99/99/9999" title="Mask: 99/99/9999"> </wj-input-date> </div> <div> <label>带有掩码的InputTime</label> <wj-input-time value="maskToday" format="t" is-editable="true" step="15" mask="00:00 >LL" title="Mask: 00:00 >LL"> </wj-input-time> </div>
$scope.customMask = null; $scope.maskToday = today;

结果:

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

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

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

<div> <label>itemClicked事件</label> <wj-menu header="File" item-clicked="menuItemClicked(s)"> <wj-menu-item><i class="fa fa-file-o"></i>&nbsp;&nbsp;<b>New</b><br><small><i>create a new file</i></small></wj-menu-item> <wj-menu-item><i class="fa fa-folder-open-o"></i>&nbsp;&nbsp;<b>Open</b><br><small><i>open an existing file or folder</i></small></wj-menu-item> <wj-menu-item><i class="fa fa-save"></i>&nbsp;&nbsp;<b>Save</b><br><small><i>save the current file</i></small></wj-menu-item> <wj-menu-separator></wj-menu-separator> <wj-menu-item><i class="fa fa-times"></i>&nbsp;&nbsp;<b>Exit</b><br><small><i>exit the application</i></small></wj-menu-item> </wj-menu> <wj-menu header="Edit" item-clicked="menuItemClicked(s)"> <wj-menu-item><i class="fa fa-cut"></i>&nbsp;&nbsp;<b>Cut</b><br><small><i>move the current selection to the clipboard</i></small></wj-menu-item> <wj-menu-item><i class="fa fa-copy"></i>&nbsp;&nbsp;<b>Copy</b><br><small><i>copy the current selection to the clipboard</i></small></wj-menu-item> <wj-menu-item><i class="fa fa-paste"></i>&nbsp;&nbsp;<b>Paste</b><br><small><i>insert clipboard content at the cursor position</i></small></wj-menu-item> </wj-menu> </div> <div> <label>命令</label> <wj-menu header="Change Tax"> <wj-menu-item cmd="menuCommand" cmd-param=".25">+ 25%</wj-menu-item> <wj-menu-item cmd="menuCommand" cmd-param=".10">+ 10%</wj-menu-item> <wj-menu-item cmd="menuCommand" cmd-param=".05">+ 5%</wj-menu-item> <wj-menu-item cmd="menuCommand" cmd-param=".01">+ 1%</wj-menu-item> <wj-menu-separator></wj-menu-separator> <wj-menu-item cmd="menuCommand" cmd-param="-.01">- 1%</wj-menu-item> <wj-menu-item cmd="menuCommand" cmd-param="-.05">- 5%</wj-menu-item> <wj-menu-item cmd="menuCommand" cmd-param="-.10">- 10%</wj-menu-item> <wj-menu-item cmd="menuCommand" cmd-param="-.25">- 25%</wj-menu-item> </wj-menu> <wj-input-number value="tax" format="p0" min="0" max="1" step=".05"></wj-input-number> </div>
$scope.tax = .07; $scope.menuItemClicked = function(menu) { alert('You\'ve selected option ' + menu.selectedIndex + ' from the ' + menu.header + ' menu!'); }; $scope.menuCommand = { executeCommand: function (arg) { $scope.tax += arg; }, canExecuteCommand: function (arg) { if (wijmo.isNumber(arg)) { var val = $scope.tax + arg; return val >= 0 && val <= 1; } return false; } };

结果:

  New
create a new file
  Open
open an existing file or folder
  Save
save the current file
  Exit
exit the application
  Cut
move the current selection to the clipboard
  Copy
copy the current selection to the clipboard
  Paste
insert clipboard content at the cursor position
+ 25% + 10% + 5% + 1% - 1% - 5% - 10% - 25%