Kendo UI開發教程：使用Kendo UI Web建立自定義組件（基礎篇）

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

首先在kendo.ui namespace中擴展基礎的Widget類，還能夠建立一些變量來保存值用於向下縮小路徑。

擴展基礎組件：

1 2 3 4 5 6 7 8 9 10 11

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

添加一個初始化的方法：

如今須要對你的組件提供一個初始化方法，當組件被調用的時候，這個方法就會被框架調用，這個初始化函數須要兩個參數，一個是你正在初始化的組件參數，一個是不久你將要指定的一套選項。這兩個參數都將會配置值。

1 2 3 4 5 6 7 8 9

var MyWidget = Widget.extend({   init: function(element, options) {   // base call to initialize widget Widget.fn.init.call(this, element, options);   } });

對組件添加選項：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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組件並使得它像其餘的組件同樣可用的一個完整的樣板。

自定義組件樣板：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

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

本文轉載自Kendo UI中文網