彩票走势图

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

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

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

点击下载最新版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原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>


标签:JavaScript HTML5UI界面KendoUIHTML5/JS

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP