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中文网