Kendo UI for jQuery使用教程：自定義小部件（一）

Kendo UI for jQuery最新試用版下載

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

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

入門

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

本示例演示如何創(chuàng)建變量來保存值，這些值也有助于縮小。 整個過程包含在一個自執(zhí)行的匿名函數(shù)中，以保護全局命名空間。 jQuery作為引用傳入，以確保$是jQuery。 小部件本身擴展了基本小部件類，因此它被賦予了MyWidget的大寫名稱 - 或者小部件的名稱。 在使用JavaScript命名類而不是常規(guī)對象時，這通常被認為是最佳實踐。

(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方法。 初始化窗口小部件時，框架會調(diào)用此方法。 這個init函數(shù)有兩個參數(shù)，第一個是初始化窗口小部件的元素；第二個是您將很快指定的一組選項，這些將是配置值。

var MyWidget = Widget.extend({
init: function(element, options) {
// The base call to initialize the widget.
  Widget.fn.init.call(this, element, options);
}
  });

3. 如果要擴展窗口小部件，對基礎(chǔ)的調(diào)用是將窗口小部件從聲明性初始化或標(biāo)準命令式初始化轉(zhuǎn)換為合并所有基本選項和自定義選項的內(nèi)容。在init語句下聲明這些選項，您在選項對象中聲明的任何內(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 widget initialization.
  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，請實現(xiàn)一些其他項，以下部分討論了創(chuàng)建DataSource-aware小部件的過程。本節(jié)演示的小部件是一個簡單的小部件，只重復(fù)數(shù)據(jù)源中的數(shù)據(jù)，還允許您指定自己的自定義模板。 您可以將它視為一個非常笨拙的ListView，為了更容易處理，它被命名為Repeater。

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

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

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

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

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

注意：要復(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"
}
}
}
});

Kendo UI R3 2019全新發(fā)布，最新動態(tài)請持續(xù)關(guān)注Telerik中文網(wǎng)！

掃描關(guān)注慧聚IT微信公眾號，及時獲取最新動態(tài)及最新資訊