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: "http://mydomain/customers"
}
}
}
});

---

Kendo UI R3 2019全新發布，最新動態請持續關注Telerik中文網！

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