HTML5 Web app开发工具Kendo UI Web教程:创建自定义组件(一)

原创|使用教程|编辑:龚雪|2013-11-08 10:24:13.000|阅读 2772 次

概述:Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件、数据源、验证、一个MVVM框架、主题、模板等。在Kendo UI Web中如何创建自定义组件呢,在下面的文章中将会详细的进行说明。

相关链接:

Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件、数据源、验证、一个MVVM框架、主题、模板等。在Kendo UI Web中如何创建自定义组件呢,在下面的文章中将会详细的进行说明。

基础步骤:

首先在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 Web下载

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

kendo ui 公开课



标签:

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

文章转载自:慧都控件

登录 慧都网发表评论


慧都网友 2017-07-24 16:41:52.000
0

啥也没说 醉了


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat