摘要：
前面介绍了一款非常不错的前端框架kendo-ui，如果你想阅读，请点这里。通过使用它一段时间，感觉是非常好用。下面就介绍一下如何使用它和开发自己的组件
引入：
只需要引进下面三个文件即可
kendo.common.min.css 通用样式
kendo.default.min.css 皮肤
kendo.all.min.js js文件
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Kendo UI!</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body> </body>
</html>
开发自己的组件：
第一步：继承基本组件
(function($) {
// shorten references to variables. this is better for uglification
var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget
var MyWidget = Widget.extend({
// initialization code goes here
});
})(jQuery);
注意：
1、为了保护全局的命名空间，开发组件是在单独的函数中执行，确保$是jQuery
2、组件是继承基本组件的，所以组件名首字母大写
第二步：添加一个初始化的方法
var MyWidget = Widget.extend({
init: function(element, options) {
// base call to initialize widget
Widget.fn.init.call(this, element, options);
}
});
当这个组件初始化时，这个方法会被框架调用。两个参数，第一个是宿主元素，第二个是配置参数
第三步：添加配置参数
var MyWidget = Widget.extend({
init: function(element, options) {
// base call to initialize widget
Widget.fn.init.call(this, element, options);
},
options: {
// the name is what it will appear as off the kendo namespace(i.e. kendo.ui.MyWidget).
// The jQuery plugin would be jQuery.fn.kendoMyWidget.
name: "MyWidget",
// other options go here
...
}
});
第四步：暴露组件
kendo.ui.plugin(MyWidget);
下面是一个详细的列表组件:
(function() {
var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget,
CHANGE = "change";
var Repeater = Widget.extend({
init: function(element, options) {
var that = this;
kendo.ui.Widget.fn.init.call(that, element, options);
that.template = kendo.template(that.options.template || "<p><strong>#= data #</strong></p>");
that._dataSource();
},
options: {
name: "Repeater",
autoBind: true,
template: ""
},
refresh: function() {
var that = this,
view = that.dataSource.view(),
html = kendo.render(that.template, view);
that.element.html(html);
},
_dataSource: function() {
var that = this;
// returns the datasource OR creates one if using array or configuration object
that.dataSource = kendo.data.DataSource.create(that.options.dataSource);
// bind to the change event to refresh the widget
that.dataSource.bind(CHANGE, function() {
that.refresh();
});
if (that.options.autoBind) {
that.dataSource.fetch();
}
}
});
kendo.ui.plugin(Repeater);
})(jQuery);
使用：
<div id="repeater"></div>
<script>
$("#repeater").kendoRepeater({
dataSource: [ "item1", "item2", "item3" ]
});
</script>
效果图：