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庫(kù)。

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

入門

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

本示例演示如何創(chuàng)建變量來(lái)保存值，這些值也有助于縮小。 整個(gè)過(guò)程包含在一個(gè)自執(zhí)行的匿名函數(shù)中，以保護(hù)全局命名空間。 jQuery作為引用傳入，以確保$是jQuery。 小部件本身擴(kuò)展了基本小部件類，因此它被賦予了MyWidget的大寫名稱 - 或者小部件的名稱。 在使用JavaScript命名類而不是常規(guī)對(duì)象時(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í)，框架會(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ò)展窗口小部件，對(duì)基礎(chǔ)的調(diào)用是將窗口小部件從聲明性初始化或標(biāo)準(zhǔn)命令式初始化轉(zhuǎn)換為合并所有基本選項(xiàng)和自定義選項(xiàng)的內(nèi)容。在init語(yǔ)句下聲明這些選項(xiàng)，您在選項(xiàng)對(duì)象中聲明的任何內(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，請(qǐng)實(shí)現(xiàn)一些其他項(xiàng)，以下部分討論了創(chuàng)建DataSource-aware小部件的過(guò)程。本節(jié)演示的小部件是一個(gè)簡(jiǎn)單的小部件，只重復(fù)數(shù)據(jù)源中的數(shù)據(jù)，還允許您指定自己的自定義模板。 您可以將它視為一個(gè)非常笨拙的ListView，為了更容易處理，它被命名為Repeater。

要使窗口小部件識(shí)別數(shù)據(jù)源，請(qǐng)?jiān)跀?shù)據(jù)源基礎(chǔ)對(duì)象上使用創(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來(lái)綁定窗口小部件。此步驟不是必須的，因?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. 通過(guò)內(nèi)聯(lián)指定其配置值來(lái)創(chuàng)建DataSource，如以下示例所示。 該示例指定了DataSource配置，但實(shí)際上并未創(chuàng)建DataSource實(shí)例。 kendo.data.DataSource.create（that.options.dataSource）獲取此配置對(duì)象并返回具有指定配置的新DataSource實(shí)例。

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

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

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