您的位置：首页 > 产品设计 > UI/UE

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

2013-06-22 10:37 447 查看
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)
1
<input id=
"autocomplete"
/>
2
<script>
3
$(
"#autocomplete"
).kendoAutoComplete([
"Apples"
,
"Oranges"
,
"Grapes"
]);
4
</script>
其中 $(“#autocomplete”).kendoAutoComplete(["Apples","Oranges","Grapes"]); 完成两项任务：查找Id为autocomplete的HTML元素，#autocomplete 为CSS 选择器
使用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组件。
1
<div id=
"grid"
></div>
2
<script>
3
$(
"#grid"
).kendoGrid({
4
height: 200,
5
columns:[
6
{
7
field:
"FirstName"
,
8
title:
"First Name"
9
},
10
{
11
field:
"LastName"
,
12
title:
"Last Name"
13
}
14
],
15
dataSource: {
16
data: [
17
{
18
FirstName:
"John"
,
19
LastName:
"Doe"
20
},
21
{
22
FirstName:
"Jane"
,
23
LastName:
"Doe"
24
}
25
]
26
}
27
});
28
</script>


上面例子为Grid组件配置了height,columns和dataSource. API 文档 包含了每个Kendo UI 组件支持的配置项。
获取Kendo UI组件的引用对象
Kendo UI 通过jQuery 插件的方式来初始化，但是调用这些方法时不会返回这些实例对象的引用，而是使用传统的jQuery 方法来获取所创建的Kendo UI对象的引用，为了获得所创建的Kendo UI组件对象的引用，使用jQuery data方法，例如获取前面例子中创建kendoAutoComplete的对象，可以使用下面代码：
1
<input id=
"autocomplete"
 
/>
2
<script>
3
$(
"#autocomplete"
).kendoAutoComplete([
"Apples"
,
"Oranges"
,
"Grapes"
]);
4
var
 
autocomplete =$(
"#autocomplete"
).data(
"kendoAutoComplete"
);
5
</script>
方法 $(“#autocomplete”).data(“kendoAutoComplete”) 返回所创建的Kendo AutoComplete对象。data的参数为Kendo UI组件的名称，比如”kendoAutoComplete”,“kendoGrid”等。
使用Kendo UI组件的方法
在获取Kendo UI组件对象的引用之后，就可以调用该UI组件的方法，例如：
1
<input id=
"autocomplete"
 
/>
2
<script>
3
$(
"#autocomplete"
).kendoAutoComplete([
"Apples"
,
"Oranges"
,
"Grapes"
]);
4
var
 
autocomplete =$(
"#autocomplete"
).data(
"kendoAutoComplete"
);
5
autocomplete.value(
"Cherries"
);
6
var
 
value = autocomplete.value();
7
alert(value);
// Displays "Cherries"
8
</script>
上面的例子中获取autocompete对象之后，调用了它的value()方法来写入和读取该输入框的内容。
监听Kendo UI事件
Kendo UI组件支持多种事件，比如按键，鼠标，内容变化等事件，有两种方法可以为Kendo Ui 组件定义事件处理方法：在初始化时定义JavaScript函数作为该UI组件的事件处理方法
通过bind函数来把一个JavaScript函数绑定到UI组件的某个事件
比如，初始化时定义事件处理方法：
1
<input id=
"autocomplete"
 
/>
2
<script>
3
function
 
autocomplete_change() {
4
// Handle the "change" event
5
}
6
$(
"#autocomplete"
).kendoAutoComplete({
7
change: autocomplete_change
8
});
9
</script>
下面例子，使用bind方法。
1
<input id=
"autocomplete"
 
/>
2
<script>
3
function
 
autocomplete_change() {
4
// Handle the "change" event
5
}
6
$(
"#autocomplete"
).kendoAutoComplete();
7
var
 
autocomplete =$(
"#autocomplete"
).data(
"kendoAutoComplete"
);
8
autocomplete.bind(
"change"
,autocomplete_change);
9
</script>
两种方法都把一个函数绑定到autocomplete的”change”事件。此时如果autocomplete内容发生变化，则触发change事件，相应的事件处理方法会被调用。
事件处理函数
事件处理函数在事件发生时被调用，该事件处理函数的传入参数包含了事件相关的JavaScript对象，你可以通过sender参数获得触发该事件的UI组件，比如：
1
<input id=
"autocomplete"
 
/>
2
<script>
3
function
 
autocomplete_change(e) {
4
var
 
autocomplete =e.sender;
5
var
 
value = autocomplete.value();
6
alert(value);
// Displays the value of the AutoComplete widget
7
}
8
$(
"#autocomplete"
).kendoAutoComplete({
9
change: autocomplete_change
10
});
11
</script>
此外，也可以使用this 关键字来获取触发事件的UI对象引用，比如：
1
<input id=
"autocomplete"
 
/>
2
<script>
3
function
 
autocomplete_change(e) {
4
var
 
autocomplete =
this
;
5
var
 
value = autocomplete.value();
6
alert(value);
// Displays the value of the AutoComplete widget
7
}
8
$(
"#autocomplete"
).kendoAutoComplete({
9
change: autocomplete_change
10
});
11
</script>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航