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

 

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

扩展基础组件：

 

(function($) {

// shorten references to variables. this isbetter 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 offthe kendo namespace(i.e. kendo.ui.MyWidget).

// The jQuery plugin would bejQuery.fn.kendoMyWidget.

name: "MyWidget",

// other options go here

...

}

});

 

现在并不可以添加这个自定义组件到Kendo UI，到这里只是用于创建你自己的Kendo UI组件并使得它像其他的组件一样可用的一个完整的样板。

自定义组件样板：

 

(function($) {

 

// shorten references to variables. this isbetter 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 offthe 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);