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

獲取Widget實(shí)例

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

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

The Kendo UI widgets是jQuery插件，獲取對(duì)窗口小部件實(shí)例的引用常用方法是使用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方法

要獲取對(duì)窗口小部件實(shí)例的引用，您還可以使用getKendo <WidgetName>方法。 請(qǐng)注意，返回所選DOM元素的jQuery約定也適用于窗口小部件初始化插件方法。 這意味著插件方法（例如kendoAutoComplete（））不返回窗口小部件實(shí)例，而是返回使用該方法的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>

使用方法

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

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

初始化期間綁定事件

每次觸發(fā)事件時(shí)，都會(huì)執(zhí)行在窗口小部件初始化期間附加的事件處理程序。 要僅執(zhí)行一次處理程序，請(qǐng)?jiān)谑褂靡环N方法進(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)有的窗口小部件實(shí)例，但是附加一個(gè)事件處理程序的處理程序只會(huì)執(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ù)

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

<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)用事件對(duì)象的preventDefault方法可以防止某些窗口小部件事件。 事件預(yù)防的效果特定于每個(gè)事件，并在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>

從事件中解除綁定

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

<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)的方法時(shí)，Kendo UI不會(huì)觸發(fā)事件。 例如，如果通過API調(diào)用select方法，則不會(huì)觸發(fā)Kendo UI PanelBar小部件的select事件。

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