Kendo UI开发教程：使用Kendo UI Web创建自定义组件（基础篇）-控件新闻-慧都网

Kendo UI开发教程：使用Kendo UI Web创建自定义组件（基础篇）

原创|使用教程|编辑：龚雪|2016-11-18 09:26:17.000|阅读 1263 次

概述：本教程主要为大家介绍如何使用Kendo UI Web创建自定义组件。

相关链接：

首先在kendo.ui namespace中扩展基础的Widget类，还可以创建一些变量来保存值用于向下缩小路径。

扩展基础组件：

(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);

添加一个初始化的方法：

现在需要对你的组件提供一个初始化方法，当组件被调用的时候，这个方法就会被框架调用，这个初始化函数需要两个参数，一个是你正在初始化的组件参数，一个是不久你将要指定的一套选项。这两个参数都将会配置值。

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，到这里只是用于创建你自己的Kendo UI组件并使得它像其他的组件一样可用的一个完整的样板。

自定义组件样板：

(function($) {

// shorten references to variables. this is better for uglification var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget

var MyWidget = Widget.extend({

init: function(element, options) {

// base call to widget initialization
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
....
}

});

ui.plugin(MyWidget);

})(jQuery);