【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小部件都提供可用于在運行時查詢或修改其狀態(tài)的方法和事件。

獲取Widget實例

• 使用jQuery數(shù)據(jù)方法
• 使用getKendo <WidgetName>方法

jQuery數(shù)據(jù)方法

The Kendo UI widgets是jQuery插件，獲取對窗口小部件實例的引用常用方法是使用jQuery數(shù)據(jù)方法并將插件名稱作為字符串傳遞。

<p>Animal: <input id="animal" /></p>
<script>
  $(function() {
  // create a new widget instance
  $("#animal").kendoAutoComplete({ dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ] });
// retrieve the widget instance
  var autoComplete = $("#animal").data("kendoAutoComplete");
console.log(autoComplete);
  });
  </script>

getKendo方法

要獲取對窗口小部件實例的引用，您還可以使用getKendo <WidgetName>方法。 請注意，返回所選DOM元素的jQuery約定也適用于窗口小部件初始化插件方法。 這意味著插件方法（例如kendoAutoComplete（））不返回窗口小部件實例，而是返回使用該方法的jQuery選擇器。

<p>Animal: <input id="animal" /></p>
<script>
  $(function() {
  // create a new widget instance
  $("#animal").kendoAutoComplete({ dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ] });
// retrieve the widget instance
  var autoComplete = $("#animal").getKendoAutoComplete();
console.log(autoComplete);
  });
  </script>

使用方法

在窗口小部件實例可用后，您可以使用標(biāo)準(zhǔn)JavaScript方法語法調(diào)用其方法。 API參考部分中提供了窗口小部件方法和方法參數(shù)的完整列表和示例。 如果返回窗口小部件實例的代碼返回undefined，則窗口小部件尚未初始化。 例如，如果在document.ready處理程序中創(chuàng)建窗口小部件但是從先前執(zhí)行的代碼引用窗口小部件實例，則可能發(fā)生此類問題。

<p>Animal: <input id="animal" /></p>
<script>
  $(function() {
  $("#animal").kendoAutoComplete({ dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ] });
var autoComplete = $("#animal").data("kendoAutoComplete");
// focus the widget
  autoComplete.focus();
  });
  </script>

處理Widget事件

每個小部件根據(jù)其特定功能公開不同的事件。 例如，AutoComplete小部件會觸發(fā)change，close，dataBound等。 您可以在窗口小部件初始化期間或窗口小部件初始化之后傳遞事件處理程序。 使用Kendo UI小部件的事件時，還可以使用事件處理程序參數(shù)，阻止事件和取消綁定事件。

初始化期間綁定事件

每次觸發(fā)事件時，都會執(zhí)行在窗口小部件初始化期間附加的事件處理程序。 要僅執(zhí)行一次處理程序，請在使用一種方法進(jìn)行窗口小部件初始化后附加它。

<p>Animal: <input id="animal" /></p>
<script>
  $(function() {
$("#animal").kendoAutoComplete({
  dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ],
  change: function(e) {
  console.log("change event handler");
  }
  });
});
  </script>

初始化后綁定事件

所有Kendo UI小部件都提供綁定和一種方法。 這兩種方法都將事件處理程序附加到現(xiàn)有的窗口小部件實例，但是附加一個事件處理程序的處理程序只會執(zhí)行一次。

<p>Animal: <input id="animal" /></p>
<script>
  $(function() {
$("#animal").kendoAutoComplete({
  dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ]
  });
// ...
var autocomplete = $("#animal").data("kendoAutoComplete");
// Attach an event handler that will be executed each time the event is fired.
  autocomplete.bind("change", function(e) {
  console.log("change event handler");
  });
// Attach an event handler that will be executed only the first time the event is fired.
  autocomplete.one("open", function(e) {
  console.log("open event handler");
  });
});
  </script>

使用事件處理程序參數(shù)

每個Kendo UI小部件都將一個參數(shù)傳遞給事件處理程序 - 即所謂的“事件對象”。 通常，它有一個或多個字段，其中包含事件的特定信息。 所有事件對象都有一個sender字段，該字段提供對觸發(fā)事件的窗口小部件實例的引用。不支持將其他自定義事件參數(shù)傳遞給處理程序，API參考部分中提供了窗口小部件事件的完整列表和示例以及事件對象中的字段。

<p>Animal: <input id="animal" /></p>
<script>
  $(function() {
$("#animal").kendoAutoComplete({
  dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ],
  open: function(e) {
  var autocomplete = e.sender;
  }
  });
});
  </script>

預(yù)防事件

通過調(diào)用事件對象的preventDefault方法可以防止某些窗口小部件事件。 事件預(yù)防的效果特定于每個事件，并在API參考中記錄。

<p>Animal: <input id="animal" /></p>
<script>
  $(function() {
  $("#animal").kendoAutoComplete({
  dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ]
  });
var autoComplete = $("#animal").data("kendoAutoComplete");
// prevent the autocomplete from opening the suggestions list
  autoComplete.bind('open', function(e) {
  e.preventDefault();
  });
  });
  </script>

從事件中解除綁定

要取消綁定特定事件，請保持對事件處理函數(shù)的引用，并使用它調(diào)用unbind方法。 請注意，在沒有任何參數(shù)的情況下調(diào)用unbind方法會從事件中取消綁定所有事件處理程序。

<p>Animal: <input id="animal" /></p>
<button id="unbindButton">Unbind event</button>
<script>
  $(function() {
  var handler = function(e) { console.log(e); };
  $("#animal").kendoAutoComplete({ dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ] });
var autoComplete = $("#animal").data("kendoAutoComplete");
autoComplete.bind("open", handler);
$("#unbindButton").on("click", function() {
  autoComplete.unbind("open", handler);
  });
  });
  </script>

已知限制

當(dāng)調(diào)用相應(yīng)的方法時，Kendo UI不會觸發(fā)事件。 例如，如果通過API調(diào)用select方法，則不會觸發(fā)Kendo UI PanelBar小部件的select事件。

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