首先在kendo.ui namespace中擴(kuò)展基礎(chǔ)的Widget類，還可以創(chuàng)建一些變量來保存值用于向下縮小路徑。

擴(kuò)展基礎(chǔ)組件：

 

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

 

添加一個(gè)初始化的方法：

現(xiàn)在需要對(duì)你的組件提供一個(gè)初始化方法，當(dāng)組件被調(diào)用的時(shí)候，這個(gè)方法就會(huì)被框架調(diào)用，這個(gè)初始化函數(shù)需要兩個(gè)參數(shù)，一個(gè)是你正在初始化的組件參數(shù)，一個(gè)是不久你將要指定的一套選項(xiàng)。這兩個(gè)參數(shù)都將會(huì)配置值。

var MyWidget = Widget.extend({

 

init: function(element, options) {

 

// base call to initialize widget

Widget.fn.init.call(this, element,options);

 

}

});

 

對(duì)組件添加選項(xiàng)：

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

...

}

});

 

現(xiàn)在并不可以添加這個(gè)自定義組件到Kendo UI，到這里只是用于創(chuàng)建你自己的Kendo UI組件并使得它像其他的組件一樣可用的一個(gè)完整的樣板。

自定義組件樣板：

 

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