HTML5 UI框架Kendo UI Web自定义组件(一)

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

基础步骤: web

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

扩展基础组件: 框架

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

添加一个初始化的方法: ui

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

var MyWidget = Widget.extend({

    init: function(element, options) {

        // base call to initialize widget
        Widget.fn.init.call(this, element, options);

    }
}); spa

对组件添加选项 示例代码 code

自定义组件样板示例代码 htm

相关文章
相关标签/搜索