当前您所在的位置:首页>新闻中心>新品发布
新品发布
行业动态
营销活动

Kendo UI开发教程:使用Kendo UI Web创建自定义组件(基础篇)

发布时间:2020/10/02 浏览量:2132

 

首先在kendo.ui namespace中扩展基础的Widget类,还可以创建一些变量来保存值用于向下缩小路径。

扩展基础组件:

 

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

 

添加一个初始化的方法:

现在需要对你的组件提供一个初始化方法,当组件被调用的时候,这个方法就会被框架调用,这个初始化函数需要两个参数,一个是你正在初始化的组件参数,一个是不久你将要指定的一套选项。这两个参数都将会配置值。

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 offthe kendo namespace(i.e. kendo.ui.MyWidget).

// The jQuery plugin would bejQuery.fn.kendoMyWidget.

name: "MyWidget",

// other options go here

...

}

});

 

现在并不可以添加这个自定义组件到Kendo UI,到这里只是用于创建你自己的Kendo UI组件并使得它像其他的组件一样可用的一个完整的样板。

自定义组件样板:

 

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

北京哲想软件有限公司