【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小部件都注冊為jQuery插件，允許它們在jQuery對象實例上實例化。

jQuery插件方法由Pascal Case中的小部件名稱構成，該名稱以kendoGrid和kendoListView為前綴。 為了避免與桌面對應物發生沖突，混合UI小部件的方法以kendoMobileTabStrip，kendoMobileButton和kendoMobileListView為前綴。一些Kendo UI小部件對它們實例化的元素類型有特定要求。

注意：

• 避免從同一DOM元素初始化幾個不同的Kendo UI小部件，因為重復初始化可能會導致不希望的副作用。
• 強烈建議從作為DOM樹一部分的HTML元素初始化Kendo UI小部件。 從文檔片段創建小部件可能會導致意外的副作用或導致JavaScript錯誤。

入門

以下示例演示如何使用常規方法實例化Kendo UI AutoComplete。 類似于演示的方法用于所有其他小部件，其小部件名稱拼寫在Pascal Case中。 窗口小部件初始化方法遵循jQuery插件范例，并返回用于創建窗口小部件的相同DOM元素的jQuery對象。 它不返回小部件實例，并且必須通過jQuery data（）方法獲取實例。

注意：如果jQuery對象包含多個DOM元素，則為每個元素實例化一個單獨的窗口小部件。

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

具有單選擇器的多個小部件

以下示例演示如何使用單個jQuery選擇器實例化多個按鈕， 從大多數方法返回所選DOM元素的jQuery約定適用于窗口小部件的初始化方法，這允許鏈接jQuery方法。

鏈接jQuery方法調用

以下示例演示了widget實例化插件方法之后的鏈式jQuery方法調用。

<button>Foo</button> | <button>Bar</button>
<script>
  $(function() {
  $("button").kendoButton().css("color", "red");
  });
  </script>

Iframes中的小部件

從理論上講，可以從父頁面的上下文初始化一個位于iframe內的Kendo UI小部件，反之亦然。 此類跨框架窗口小部件創建可能在特定方案中有效，但未得到官方支持或推薦。 例如，呈現彈出窗口的窗口小部件可能無法顯示它們。 要解決此問題，請通過調用JavaScript函數來初始化其他文檔上下文中的窗口小部件，該函數屬于窗口小部件所在的上下文。

重復初始化

初始化窗口小部件時，目標是獲取實例對象。 但是，重新創建窗口小部件實例是一個常見問題。 當使用Kendo UI服務器端包裝器（因為服務器端包裝器被自動初始化）或者在多次執行的事件處理程序中創建窗口小部件時，可以在同一DOM元素上重復初始化窗口小部件。

以下示例演示了不正確的重復初始化。

<input id="autocomplete" /><script>// initialization code here...$("#autocomplete").kendoAutoComplete(["Apples", "Oranges", "Grapes"]);
// ...
  // correct - instance reference is obtained:
  var autocomplete = $("#autocomplete").data("kendoAutoComplete");
// INCORRECT - instance reference is obtained while creating a duplicate instance:
  var duplicate = $("#autocomplete").kendoAutoComplete().data("kendoAutoComplete");
  </script>

要檢查某個DOM元素的窗口小部件實例是否已存在，請使用標準方法獲取窗口小部件實例。 如果返回的值未定義，則窗口小部件實例不存在。

<input id="autocomplete" /><script>// try to obtain the widget instancevar autocomplete = $("#autocomplete").data("kendoAutoComplete");
// check the returned value
  if (typeof autocomplete === "undefined") {
  // widget instance does not exist
  }
  // simpler alternative syntax for the above
  if (!autocomplete) {
  // widget instance does not exist
  }
  </script>

小部件配置

要配置Kendo UI小部件，請將配置對象（鍵/值對）作為參數傳遞給jQuery插件方法。 每個窗口小部件的受支持配置選項和事件都列在相應窗口小部件的API參考中。 配置對象還可能包含將綁定到相應窗口小部件事件的事件處理程序。

以下示例演示如何設置Grid小部件的height，columns和dataSource配置選項。

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
  height: 200,
  columns:[
  {
  field: "FirstName",
  title: "First Name"
  },
  {
  field: "LastName",
  title: "Last Name"
  }
  ],
  dataSource: {
  data: [
  {
  FirstName: "John",
  LastName: "Doe"
  },
  {
  FirstName: "Jane",
  LastName: "Doe"
  }
  ]
  }
  });
  </script>

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