Kendo UI开发教程：使用Kendo UI Web创建自定义组件（基础篇）

本教程主要为大家介绍如何使用Kendo UI Web创建自定义组件。

最新版Kendo UI>>>

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

扩展基础组件：

(function($) {// shorten references to variables. this is better for uglificationvar kendo = window.kendo,ui = kendo.ui,Widget = ui.Widgetvar MyWidget = Widget.extend({// initialization code goes here});})(jQuery);

添加一个初始化的方法：

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

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

对组件添加选项：

var MyWidget = Widget.extend({init: function(element, options) {// base call to initialize widgetWidget.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组件并使得它像其他的组件一样可用的一个完整的样板。

自定义组件样板：

(function($) {// shorten references to variables. this is better for uglification var kendo = window.kendo,ui = kendo.ui,Widget = ui.Widgetvar MyWidget = Widget.extend({init: function(element, options) {// base call to widget initializationWidget.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中文网

购买正版授权的朋友可以点击”咨询在线客服”哦~~~

科技年终促销第二波火热开启啦！挑战全年最低价 ！点击查看详情>>

特邀Kendo UI原厂开发工程师举行线上公开课，使用该控件的朋友千万别错过哦>>查看详情

标签：JavaScript HTML5UI界面KendoUIHTML5/JS

来源：慧都