點擊下載最新版Kendo UI>>>

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

擴展基礎(chǔ)組件：

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

添加一個初始化的方法：

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

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
...
}
});

現(xiàn)在并不可以添加這個自定義組件到Kendo UI，到這里只是用于創(chuàng)建你自己的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);

本文轉(zhuǎn)載自

購買正版授權(quán)的朋友可以點擊""哦~~~

慧都科技年終促銷第二波火熱開啟啦！挑戰(zhàn)全年最低價 ！點擊查看詳情>>

慧都特邀Kendo UI原廠開發(fā)工程師舉行線上公開課，使用該控件的朋友千萬別錯過哦>>