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事件不同,指令是实现了以下两种方法的对象: