Kendo UI目前最新提供KendoUI for jQuery、KendoUI for Angular、KendoUI Support for React和KendoUI Support for Vue四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的完整UI庫。

Kendo UI通過繼承基本窗口小部件類為您提供創(chuàng)建自定義窗口小部件的選項(xiàng)。

 

 

入門

1. 在kendo.ui命名空間中擴(kuò)展基本Kendo UI小部件類。

本示例演示如何創(chuàng)建變量來保存值，這些值也有助于縮小。整個(gè)過程包含在一個(gè)自執(zhí)行的匿名函數(shù)中，以保護(hù)全局命名空間。 jQuery作為引用傳入，以確保$是jQuery。 小部件本身擴(kuò)展了基本小部件類，因此它被賦予了MyWidget的大寫名稱 – 或者小部件的名稱。

(function($) {
// Shorten references to variables which is better for uglification. kendo =window.kendo,
ui = kendo.ui,
Widget = ui.Widget

var MyWidget = Widget.extend({
// The initialization code goes here.
});

})(jQuery);

 

2. 為您的小部件提供init方法。 初始化窗口小部件時(shí)，框架會(huì)調(diào)用此方法。 這個(gè)init函數(shù)有兩個(gè)參數(shù)，第一個(gè)是初始化窗口小部件的元素；第二個(gè)是您將很快指定的一組選項(xiàng)，這些將是配置值。

var MyWidget = Widget.extend({

init: function(element, options) {

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

}
});

 

3. 如果要擴(kuò)展窗口小部件，對基礎(chǔ)的調(diào)用是將窗口小部件從聲明性初始化或標(biāo)準(zhǔn)命令式初始化轉(zhuǎn)換為合并所有基本選項(xiàng)和自定義選項(xiàng)的內(nèi)容。在init語句下聲明這些選項(xiàng)，您在選項(xiàng)對象中聲明的任何內(nèi)容都可供用戶作為配置值或數(shù)據(jù)屬性傳遞。

var MyWidget = Widget.extend({

init: function(element, options) {

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

options: {
// The name is what it will appear as the kendo namespace(i.e.kendo.ui.MyWidget).
// The jQuery plugin would be jQuery.fn.kendoMyWidget.
name: "MyWidget",
// Other options go here.
…
}

});

 

4. 將小部件添加到Kendo UI，以下示例演示了用于創(chuàng)建自定義Kendo UI窗口小部件，并使其像所有其他Kendo UI窗口小部件一樣可用的完整樣板。

(function($) {

// Shorten the 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) {

// The base call to the widgetinitialization.
Widget.fn.init.call(this, element, options);

},

options: {
// The name is what it will appear as 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);

 

5. 要使此小部件支持DataSource或MVVM，請實(shí)現(xiàn)一些其他項(xiàng)，以下部分討論了創(chuàng)建DataSource-aware小部件的過程。本節(jié)演示的小部件是一個(gè)簡單的小部件，只重復(fù)數(shù)據(jù)源中的數(shù)據(jù)，還允許您指定自己的自定義模板。您可以將它視為一個(gè)非常笨拙的ListView，為了更容易處理，它被命名為Repeater。

要使窗口小部件識(shí)別數(shù)據(jù)源，請?jiān)跀?shù)據(jù)源基礎(chǔ)對象上使用創(chuàng)建的便捷方法，代碼片段為您的窗口小部件初始化DataSource提供了靈活性。如果您實(shí)際在窗口小部件初始化或內(nèi)聯(lián)之外創(chuàng)建新的DataSource，則返回該DataSource。

that.dataSource =kendo.data.DataSource.create(that.options.dataSource);

 

6. 創(chuàng)建一個(gè)新的DataSource來綁定窗口小部件。此步驟不是必須的，因?yàn)槟梢詫ataSource設(shè)置為數(shù)組，如以下示例所示。如果傳遞此數(shù)組，kendo.data.DataSource.create方法將根據(jù)此數(shù)組中的數(shù)據(jù)創(chuàng)建一個(gè)新的DataSource，并將其返回給that.dataSource。

$("#div").kendoRepeater({
dataSource: ["Item 1", "Item 2", "Item 3"]
});

 

7. 通過內(nèi)聯(lián)指定其配置值來創(chuàng)建DataSource，如以下示例所示。該示例指定了DataSource配置，但實(shí)際上并未創(chuàng)建DataSource實(shí)例。 kendo.data.DataSource.create（that.options.dataSource）獲取此配置對象并返回具有指定配置的新DataSource實(shí)例。

注意：要復(fù)制Kendo UI MultiSelect數(shù)據(jù)綁定操作，請顯式分配kendo.data.binders.widget.multiSelectCustom= kendo.data.binders.widget.multiselect; 捆綁。

$("#div").kendoRepeater({
dataSource: {
transport: {
read: {
url: "http://mydomain/customers"
}
}
}
});