Facebook Twitter LinkedIn E-mail
magnify
Home 2013 六月

Kendo UI开发教程(9): Kendo UI Validator 概述

Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法。

完整的Kendo UI 的Validator可以参见API 文档

HTML 5 表单校验

HTML5 的一项重要功能是HTML 5 表单校验属性, 通过设置限制属性为HTML输入设置输入类型,值域等,然后由浏览器来检查输入是否合法。 支持的几种规则有:

  • 必填域
  • 正规表达式规则
  • 最大,最小值域
  • HTML 5 数据类型( 如EMail, URL,数值等)

为了使用这些规则,可以通过为HTML输入添加对应的属性的方法来设置。比如:

<input type="email" required>

如果浏览器支持HTML5,则它会自动根据这些规则来检查输入的值是否符合规则,如果输入数据无效,浏览器会显示错误信息给用户,也不会提交表单。HTML5 也支持了一些新添的JavaScript方法来实现手工校验,比如checkValidity()方法。

HTML 5表单校验存在的问题

HTML5 表单校验非常有用,但它也存在一些问题,比如:

  • 一些旧版本浏览器不支持HTML5.
  • 某些支持HTML5的浏览器对HTML 5表单支持不完整。
  • 由浏览器生成的错误信息很难为它们重新定义显示风格。

Kendo UI Validator就是为了解决上面的这些问题而实现的。

Kendo UI Validator的基本配置

Kendo UI Validator支持标准的HTML5表单校验属性,从而允许你正常使用HTML 5表单校验属性,从而可以在所有浏览器(IE7+)上使用这些属性,比如:

<div id="myform">
    <input type="text" name="firstName" required />
    <input type="text" name="lastName" required />
    <button id="save" type="button">Save</button>
</div>

然后,在页面上添加Kendo UI Validator,添加在Script部分,比如:

// Initialize the Kendo UI Validator on your "form" container
// (NOTE: Does NOT have to be a HTML form tag)
var validator = $("#myform").kendoValidator().data("kendoValidator");

// Validate the input when the Save button is clicked
$("#save").on("click", function() {
    if (validator.validate()) {
        // If the form is valid, the Validator will return true
        save();
    }
});

使用这样的简单配置,这些HTML5 表单校验在旧版本浏览器中也可以工作,并且Web应用可以完全控制错误信息的显示和其显示风格,当点击“Save” 按钮后,如果输入不满足输入规则,Kendo UI Validator显示合适的错误信息, 每个HTML元素也可以通过validatorMessage定义一个自定义的错误信息,比如:

<input type="tel" pattern="\d{10}" validationMessage="Plase enter a ten digit phone number" />

缺省支持的校验规则

输入项必填规则

 <input type="text" name="firstName" required />

输入必须符合指定的正规表达式

  <input type="text" name="twitter" pattern="https?://(?:www\.)?twitter\.com/.+i" />

最大,最小值限制

<input type="number" name="age" min="1" max="42" />

输入步骤和最大,最小值限制一同使用

 <input type="number" name="age" min="1" max="100" step="2" />

输入为有效的URL

 <input type="url" name="url" />

输入为有效的EMail

 <input type="email" name="email" />

除此之外,Kendo UI Validator也支持自定义的规则。

自定义规则

使用自定义规则时的注意事项:

  • 表单的每个元素都会执行自定义规则,因此如果表单中有多个输入项,注意检查输入项的类型,然后再执行合适的校验规则,比如:
custom: function (input) {
    if (input.is("[name=firstName]")) {
        return input.val() === "Test"
    } else {
        return true;
    }
}
  • 如果自定义规则返回true,那么表示校验成功。
  • 如果有多个自定义规则,那么会按属性执行这些自定义规则,在发生错误时停止后续校验规则的执行,而是显示错误信息。只有所有规则都通过才表示表单校验成功。
  • 自定义错误信息必须和自定义规则匹配,如果没有定义自定义错误信息,则显示一个简单的出错图标。

 

自定义输入提示的位置

缺省情况下Kendo UI 将输入提示显示在输入框附近,然而,如果输入通过Kendo UI插件转换为ComboBox ,AutoComplete 或其它Kendo UI组件后,缺省的输入提示可能会影响到某些重要信息的显示,这时,你可以指定在什么地方显示输入提示,这时,可以通过添加一个span元素,定义data-for 属性到需要校验的输入框的name, 并添加 .k-invalid-msg 类。

比如:

custom: function (input) {
    if (input.is("[name=firstName]")) {
        return input.val() === "Test"  
    } else {
        return true;
    }
}

20130622003

 

Kendo UI开发教程(8): Kendo UI 特效概述

Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成HTML元素的过渡显示。每种特效近可能的使用CSS Transition ,对于一些老版本浏览器使用修改属性的方法作为补充。所有动画可以反向显示从而可以方便的实现元素的显示和隐藏。 本篇介绍了Kendo UI特效的概要,完整的文档可以参考 API文档

准备开始

所有Kendo UI 特效都是通过kendo.fx JQuery 选择器封装来创建,每个封装支持显示多种特效。例如:

<div id="foo">
    I will be animated
</div>

<script>
    var effectWrapper = kendo.fx($("#foo"));
    var fadeOutEffect = effectWrapper.fadeOut();
    fadeOutEffect.play();
</script>

和jQuery 方法一样,kendo UI fx也支持方法链,比如上面代码可以简化为:

<div id="foo">
    I will be animated
</div>

<script>
    kendo.fx($("#foo")).fadeOut().play();
</script>

指定特效显示的方向

大部分特效可以指定多个方向。可以通过特效构造方法的第一个参数来指定方向,或者通过调用构造方法的快捷方法来指明方向。比如下面三种方法的效果是一样的。

<div id="foo">
    I will be animated
</div>

<script>
    var fadeOut1 = kendo.fx($("#foo")).fadeOut();
    var fadeOut2 = kendo.fx($("#foo")).fade("out");
    var fadeOut3 = kendo.fx($("#foo")).fade().direction("out");

    //Call .play() to run any of the above animations
</script>

组合特效

可以将多个特效组合中一起。比如:

<div id="foo">
    I will be faded out and zoomed out.
</div>

<script>
    var effectWrapper = kendo.fx($("#foo"));
    var fadeOutEffect = effectWrapper.fadeOut();
    fadeOutEffect.add(effectWrapper.zoomOut());
    fadeOutEffect.play();
    // Calling reverse will zoom in and fade in.
</script>

组合特效也可以同时应用到多个元素,这时需要通过$when 方法。比如下面代码:

<div id="foo">
    I will fade out.
</div>
<div id="baz">
    I will also fade out.
</div>

<script>
    //Use jQuery Deferred to chain multiple effects
    var eleFoo = $("#foo"),
        eleBaz = $("#baz");

    $.when(kendo.fx(eleFoo).fadeOut().play(),
                kendo.fx(eleBaz).fadeOut().play()).then(function(){
            //This will be called when both animations are done
            alert("Both elements faded!");
        });
</script>

Kendo UI支持的特效种类

Kendo UI支持下面几种特效,具体请参见其文档

 

 

Kendo UI开发教程(7): Kendo UI 模板概述

Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎。通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素。

Kendo 模板侧重于UI显示,支持关键的模板功能,着重于性能而不是语法上的方便。

模板语法

Kendo 模板使用了一种称为“#”的语法形式,使用这种语法,#用来表明模板中的某个部分可以使用JavaScript数据来替代。

用三种方式使用#语法:

  1. 显示字面量 #=#
  2. 显示HTML元素 #:#
  3. 执行任意的Javascript代码  #if() {# …#}#

注意:如何你的模板中包含有“#”字符,不是用来绑定的部分,你必须使用转义字符,否则会引起模板编译错误。 你可以通过“\\#”转义需要显示“#”的地方。

显示原始数据

显示数据的本来的形式是使用模板的一个最基本的用法,使用Kendo UI模板,可以使用如下类似的代码:

var template = kendo.template("<div id='box'>#= firstName #</div>")

上面代码创建了“编译”过的嵌入式模板,使用这个模板可以用来显示数据,比如下面的代码

<div id="example"></div>
<script>
	var template = kendo.template("<div id='box'>#= firstName #</div>");
	var data = { firstName: "Todd" }; //A value in JavaScript/JSON
	var result = template(data); /Pass the data to the compiled template
	$("#example").html(result); //display the result
</script>

通过模板与数据的合并,最终显示“Todd”。

显示HTML数据

如果你需要显示经过HTML编码过的数据,使用Kendo UI模板可以自动处理这些编码过的HTML元素,但需要使用不同的语法 #: …#,例如:

 var template = kendo.template("<div id='box'>#: firstName #</div>");

完整的示例如下:

<div id="example"></div>
<script>
	var template = kendo.template("<div id='box'>#: firstName #</div>");
	var data = { firstName: "<b>Todd</b>" }; //Data with HTML tags
	var result = template(data); //Pass the data to the compiled template
	$("#example").html(result); //display the resulting encoded HTML Output (<b>Todd</b>)
</script>

这个例子的显示结果为

<b>Todd </b>

而不是 Todd,如果需要显示Todd ,则需要使用#= # 语法,显示HTML编码的一个主要作用是当你无需再模板中显示HTML标记,而是把整个标记和其内容作为字符串显示出来。

使用外部模板和表达式

在模板中也可以使用表达式,Kendo UI 支持者模板中执行JavaScript代码,在模板中使用JavaScript代码的方法是在JavaScript语句的前后加上#,比如下面模板显示一组列表:

<script id="javascriptTemplate" type="text/x-kendo-template">
<ul>
# for (var i = 0; i < data.length; i++) { #
	<li>#= data[i] #</li>
# } #
</ul>
</script>

然后为了使用这个模板,可以通过模板的id ,通过kendo.template 创建这个模板,然后和数据合并,比如:

<div id="example"></div>

<script id="javascriptTemplate" type="text/x-kendo-template">
	<ul>
	# for (var i = 0; i < data.length; i++) { #
		<li>#= data[i] #</li>
	# } #
	</ul>
</script>

<script type="text/javascript">
	//Get the external template definition using a jQuery selector
	var template = kendo.template($("#javascriptTemplate").html());

	//Create some dummy data
	var data = ["Todd", "Steve", "Burke"];

	var result = template(data); //Execute the template
	$("#example").html(result); //Append the result
</script>

20130622001

可以看到模板执行了JavaScipt的for 循环,并且我们使用了外部模板,外部模板的定义使用type=”text/x-kendo-template”来定义,并通过其id来访问这个外表模板。
在模板中也可以定义变量,使用这个自定义变量的方法和使用字面量的方法类似。比如定义一个变量myCustomVariable

<script id="javascriptTemplate" type="text/x-kendo-template">
	# var myCustomVariable = "foo"; #
	<p>
		#= myCustomVariable #
	</p>
</script>

嵌入式模板 vs 外部模板

Kendo UI 模板可以使用嵌入式模板和外部模板:

  • inline: 使用JavaScript字符串定义
  • external: 使用HTML Script 块定义

 

嵌入式模板使用比较简单的情况,对于比较复杂的模板一般使用外部模板。外部模板的定义的基本格式如下:

 <script type="text/x-kendo-template" id="myTemplate">
	<!--Template content here-->
</script>

外部模板必须定义一个id,这样你才可以通过id 来访问这个模板:

//extract the template content from script tag
var templateContent = $("#myTemplate").html(); 
//compile a template
var template = kendo.template(templateContent);

使用外部模板,你可以使用任意合法的HTML元素和JavaScirpt,只需语法正确,比如:

<ul id="users"></ul>

<script type="text/x-kendo-template" id="myTemplate">
	#if(isAdmin){#
		<li>#: name # is Admin</li>
	#}else{#
		<li>#: name # is User</li>
	#}#
</script>

<script type="text/javascript">
	var templateContent = $("#myTemplate").html();
	var template = kendo.template(templateContent);

	//Create some dummy data
	var data = [
		{ name: "John", isAdmin: false },
		{ name: "Alex", isAdmin: true }
	];

	var result = kendo.render(template, data); //render the template

	$("#users").html(result); //append the result to the page
</script>

20130622002

 

Kendo UI开发教程(6): Kendo DataSource 概述

Kendo 的数据源支持本地数据源(JavaScript 对象数组),或者远程数据源(XML, JSON, JSONP),支持CRUD操作(创建,读取,更新和删除操作),并支持排序,分页,过滤,分组和集合等。

准备开始

下面创建一个本地数据源。

var movies = [ {
      title: "Star Wars: A New Hope",
      year: 1977
   }, {
     title: "Star Wars: The Empire Strikes Back",
     year: 1980
   }, {
     title: "Star Wars: Return of the Jedi",
     year: 1983
   }
];
var localDataSource = new kendo.data.DataSource({data: movies});

创建一个远程数据源 (Twitter)

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            // the remote service url
            url: "http://search.twitter.com/search.json",

            // JSONP is required for cross-domain AJAX
            dataType: "jsonp",

            // additional parameters sent to the remote service
            data: {
                q: "html5"
            }
        }
    },
    // describe the result format
    schema: {
        // the data which the data source will be bound to is in the "results" field
        data: "results"
    }
});

绑定数据源到UI组件

Kendo UI组件很多都支持数据绑定 ,UI组件绑定的数据源可以在配置UI组件时设置,或是多个UI组件共享同一个数据源。

创建UI组件时设置DataSource属性

$("#chart").kendoChart({
    title: {
        text: "Employee Sales"
    },
    dataSource: new kendo.data.DataSource({
        data: [
        {
            employee: "Joe Smith",
            sales: 2000
        },
        {
            employee: "Jane Smith",
            sales: 2250
        },
        {
            employee: "Will Roberts",
            sales: 1550
        }]
    }),
    series: [{
        type: "line",
        field: "sales",
        name: "Sales in Units"
    }],
    categoryAxis: {
        field: "employee"
    }
});

20130621006

使用共享的远程数据源

var sharableDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "data-service.json",
            dataType: "json"
        }
    }
});

// Bind two UI widgets to same DataSource
$("#chart").kendoChart({
    title: {
        text: "Employee Sales"
    },
    dataSource: sharableDataSource,
    series: [{
        field: "sales",
        name: "Sales in Units"
    }],
    categoryAxis: {
        field: "employee"
    }
});

$("#grid").kendoGrid({
    dataSource: sharableDataSource,
        columns: [
        {
            field: "employee",
            title: "Employee"
        },
        {
            field: "sales",
            title: "Sales",
            template: '#= kendo.toString(sales, "N0") #'
    }]
});

这个例子使用了模板 template ,模板的用法参见后面的文章。

 

Kendo UI开发教程(5): 使用 Kendo UI库实现对象的继承

JavaScript 也是一种面向对象的开发语言,但和C++,Java,C#所不同的是,它的对象不是基于类(Class),而是基于对象原型(ProtoType),因此对于来自C++,Java等背景的程序员,初次接触到JavaScript 的面向对象的开发时,开始会有些不适应。而JavaScript语言本身也非常灵活,实现面向对象的方法也很多,不同的框架使用的方法也不同。

对于JavaScript的面向对象的方法和C++,Java面向对象的不同点,举个简单的类比,使用C++,Java来建房,是先有蓝图(Class),然后根据这个蓝图(Class)来建房(对象)。而JavaScript是直接建个房(Object),如果要将个新房,就参考这个建好的房作为原型(prototype),然后复制一个对象。

Kendo UI不仅仅提供了一些好看的UI组件,而且也提供一个JavaScript 构建对象,实现继承的方法,其形式接近于C++,Java的类继承方法。

使用kendo.Class.extend 创建对象

首先可以创建一个新对象(注意JavaScript中没有类的概念),可以通过kendo.Class.extend 来定义。

var person = kendo.Class.extend({});

上面代码创建一个Person对象,但没有定义Person对象任何属性和方法。下面可以为Person定义一些属性和方法(函数),可以通过对象字面量的方法来定义,Javascript对象的属性或方法都是以Key:value的形式来定义。也使用this来引用对象的方法或属性。

var Person = kendo.Class.extend({
    firstName: 'Not Set',
    lastName: 'Not Set',
    isAPrettyCoolPerson: false,
    sayHello: function() {
        alert("Hello! I'm " + this.firstName + " " + this.lastName);
    }
});

var person = new Person();
person.sayHello();

20130621002

创建构造函数

也可以为对象添加一个构造函数,Kendo UI使用 init 来定义构造函数 ,这样在创建新对象时,可以通过构造函数来创建新的对象. 下面代码重新定义Person对象,并为其添加一个属性isAPrettyCoolPerson ,

var Person = kendo.Class.extend({
    firstName: 'Not Set',
    lastName: 'Not Set',
    isAPrettyCoolPerson: false,
    init: function (firstName, lastName) {
        if (firstName) this.firstName = firstName;
        if (lastName) this.lastName = lastName;
    },

    sayHello: function () {
        alert("Hello! I'm " + this.firstName + " " + this.lastName);
    }

});

var person = new Person("John", "Bristowe");
person.isAPrettyCoolPerson = true;
person.sayHello();

我们使用这个对象,创建一个名为John ,Bristowe 的Person,并把它的 isAPrettyCoolPerson 属性设为True。

20130621003

创建一个派生对象

现在我们可以创建Person对象的一个派生对象Parent,Parent对象继承Person对象 ,然后我们创建一个Dad对象。

var person = new Person("John", "Bristowe");
person.isAPrettyCoolPerson = true;

var Parent = Person.extend({
    firstName: 'Mark',
    lastName: 'Holland'
});

var myDad = new Parent();
myDad.isAPrettyCoolPerson = true;

myDad.sayHello();
alert(myDad.isAPrettyCoolPerson);


20130621004

我们再创建一个Child对象,继承自Parent,要注意的是isCoolPerson 属性。想想它的值是真还是假呢?

var Child = Parent.extend({});
var me = new Child();
me.firstName = "Burke";
me.sayHello();
alert(me.isAPrettyCoolPerson);

20130621005

可以看到me 的isAPrettyCoolPerson 的值为false, 没有因为myDad 的 isAPrettyCoolPerson 为True 而变为true, 这些因为 Child 继承自Parent ,Parent缺省的 isAPrettyCoolPerson 为false, myDad 修改的只是某个特定的实例的值,没有修改作为原型的对象(Parent)的属性。

 

Kendo UI开发教程(4): UI Widgets 概述

Kendo UI 是基于jQuery 库开发的,Kendo UI widgets是以jQuery 插件形式提供的。这些插件的名称基本上都是以kendo作为前缀。比如 Kendo的autocomplete UI 组件名称为 kendoAutoComplete ,Kendo UI 手机 UI组件是以 “kendoMobile”为前缀。比如:”kendoMobileListView”.

使用jQuery初始化Kendo UI 组件

Kendo UI 组件使用页面上HTML元素来创建,使用CSS选择器 然后调用 jquery 插件(kendo UI组件)将这些HTML元素转换为Kendo UI组件(基本方法和jQuery UI类似)。

例如:初始化一个自动提示输入框组件(autocomplete)

<input id="autocomplete" />
<script>
	$("#autocomplete").kendoAutoComplete(["Apples", "Oranges", "Grapes"]);
</script>

其中 $(“#autocomplete”).kendoAutoComplete([“Apples”, “Oranges”, “Grapes”]); 完成两项任务:

  1. 查找Id为autocomplete的HTML元素,#autocomplete 为CSS 选择器
  2. 使用kendoAutoComplete jQuery插件初始化 Kendo UI组件,并使用数组[“Apples”, “Oranges”, “Grapes”]作为配置参数传给kendoAutoComplete组件

注意:如果jQuery 找不到由css 选择器指定的HTML元素,Kendo UI组件不会被创建,你可以使用任意合法的CSS选择器来初始化Kendo UI组件,对于每个符合选择器条件的HTML元素都会初始化一个Kendo UI组件。

配置Kendo UI 组件

如前面例子,可以通过传递配置对象的方法来配置Kendo UI组件,配置对象为一组Key/Value对,这些Key/Value值用来配置UI组件。

如下例,配置一个Grid组件。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  height: 200,
  columns:[
      {
          field: "FirstName",
          title: "First Name"
      },
      {
          field: "LastName",
          title: "Last Name"
      }
  ],
  dataSource: {
      data: [
          {
              FirstName: "John",
              LastName: "Doe"
          },
          {
              FirstName: "Jane",
              LastName: "Doe"
          }
      ]
  }
});
</script>

20130621001

上面例子为Grid组件配置了height, columns和dataSource. API 文档 包含了每个Kendo UI 组件支持的配置项。

获取Kendo UI组件的引用对象

Kendo UI 通过jQuery 插件的方式来初始化,但是调用这些方法时不会返回这些实例对象的引用,而是使用传统的jQuery 方法来获取所创建的Kendo UI对象的引用,为了获得所创建的Kendo UI组件对象的引用,使用jQuery data方法,例如获取前面例子中创建kendoAutoComplete的对象,可以使用下面代码:

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete(["Apples", "Oranges", "Grapes"]);
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
</script>

方法 $(“#autocomplete”).data(“kendoAutoComplete”) 返回所创建的Kendo AutoComplete对象。data的参数为Kendo UI组件的名称,比如”kendoAutoComplete”, “kendoGrid”等。

使用Kendo UI组件的方法

在获取Kendo UI组件对象的引用之后,就可以调用该UI组件的方法,例如:

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete(["Apples", "Oranges", "Grapes"]);
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.value("Cherries");
var value = autocomplete.value();
alert(value); // Displays "Cherries"
</script>

上面的例子中获取autocompete对象之后,调用了它的value()方法来写入和读取该输入框的内容。

监听Kendo UI事件

Kendo UI组件支持多种事件,比如按键,鼠标,内容变化等事件,有两种方法可以为Kendo Ui 组件定义事件处理方法:

  1. 在初始化时定义JavaScript函数作为该UI组件的事件处理方法
  2. 通过bind函数来把一个JavaScript函数绑定到UI组件的某个事件

比如,初始化时定义事件处理方法:

<input id="autocomplete" />
<script>
function autocomplete_change() {
    // Handle the "change" event
}
$("#autocomplete").kendoAutoComplete({
    change: autocomplete_change
});
</script>

下面例子,使用bind方法。

<input id="autocomplete" />
<script>
function autocomplete_change() {
    // Handle the "change" event
}
$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.bind("change", autocomplete_change);
</script>

两种方法都把一个函数绑定到autocomplete的”change”事件。此时如果autocomplete内容发生变化,则触发change事件,相应的事件处理方法会被调用。

事件处理函数

事件处理函数在事件发生时被调用,该事件处理函数的传入参数包含了事件相关的JavaScript对象,你可以通过sender参数获得触发该事件的UI组件,比如:

<input id="autocomplete" />
<script>
function autocomplete_change(e) {
    var autocomplete = e.sender;
    var value = autocomplete.value();
    alert(value); // Displays the value of the AutoComplete widget
}
$("#autocomplete").kendoAutoComplete({
    change: autocomplete_change
});
</script>

此外,也可以使用this 关键字来获取触发事件的UI对象引用,比如:

<input id="autocomplete" />
<script>
function autocomplete_change(e) {
    var autocomplete = this;
    var value = autocomplete.value();
    alert(value); // Displays the value of the AutoComplete widget
}
$("#autocomplete").kendoAutoComplete({
    change: autocomplete_change
});
</script>