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四個(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的大寫名稱 - 或者小部件的名稱。 在使用JavaScript命名類而不是常規(guī)對象時(shí)，這通常被認(rèn)為是最佳實(shí)踐。

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

要使窗口小部件識別數(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: "//mydomain/customers"
}
}
}
});

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