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

獲取Widget實例

• 使用jQuery數據方法
• 使用getKendo <WidgetName>方法

jQuery數據方法

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

使用方法

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

<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事件

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

初始化期間綁定事件

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

<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小部件都提供綁定和一種方法。 這兩種方法都將事件處理程序附加到現有的窗口小部件實例，但是附加一個事件處理程序的處理程序只會執行一次。

<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>

使用事件處理程序參數

每個Kendo UI小部件都將一個參數傳遞給事件處理程序 - 即所謂的“事件對象”。 通常，它有一個或多個字段，其中包含事件的特定信息。 所有事件對象都有一個sender字段，該字段提供對觸發事件的窗口小部件實例的引用。不支持將其他自定義事件參數傳遞給處理程序，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>

預防事件

通過調用事件對象的preventDefault方法可以防止某些窗口小部件事件。 事件預防的效果特定于每個事件，并在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>

從事件中解除綁定

要取消綁定特定事件，請保持對事件處理函數的引用，并使用它調用unbind方法。 請注意，在沒有任何參數的情況下調用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>

已知限制

當調用相應的方法時，Kendo UI不會觸發事件。 例如，如果通過API調用select方法，則不會觸發Kendo UI PanelBar小部件的select事件。

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