使用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 vs DevExpress（一）

用戶界面控件的王者之爭：Kendo UI vs DevExpress（二）