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

相關文章
相關標籤/搜索