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是創建現代Web應用程序的最完整UI庫。

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

入門

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

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

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

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

3. 如果要擴展窗口小部件，對基礎的調用是將窗口小部件從聲明性初始化或標準命令式初始化轉換為合并所有基本選項和自定義選項的內容。在init語句下聲明這些選項，您在選項對象中聲明的任何內容都可供用戶作為配置值或數據屬性傳遞。

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，以下示例演示了用于創建自定義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，請實現一些其他項，以下部分討論了創建DataSource-aware小部件的過程。本節演示的小部件是一個簡單的小部件，只重復數據源中的數據，還允許您指定自己的自定義模板。 您可以將它視為一個非常笨拙的ListView，為了更容易處理，它被命名為Repeater。

要使窗口小部件識別數據源，請在數據源基礎對象上使用創建的便捷方法，代碼片段為您的窗口小部件初始化DataSource提供了靈活性。如果您實際在窗口小部件初始化或內聯之外創建新的DataSource，則返回該DataSource。

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

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

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

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

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

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

掃描關注慧聚IT微信公眾號，及時獲取最新動態及最新資訊