點(diǎn)擊下載最新版Kendo UI>>>

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

擴(kuò)展基礎(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);

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

自定義組件樣板：

(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)載自

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

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

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