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

原创|使用教程|编辑:龚雪|2016-11-18 09:26:17.000|阅读 581 次

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

相关链接:

点击下载最新版Kendo UI>>>

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

扩展基础组件:

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

添加一个初始化的方法:

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

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 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.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中文网
购买正版授权的朋友可以点击"咨询在线客服"哦~~~
慧都科技年终促销第二波火热开启啦!挑战全年最低价 !点击查看详情>>
慧都特邀Kendo UI原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui 公开课



标签:JavaScript HTML5UI界面KendoUIHTML5/JS

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件网

登录慧都网发表评论登录


慧都网友 2016-11-18 09:27:15.000
0

非常棒的使用教程,66666


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

Kendo UI Mobile

使用HTML5和JavaScript快速开发跨平台原生移动应用程序的移动应用程序框架

Kendo UI DataViz

跨平台跨设备的数据可视化组件

Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat