Kendo UI for jQuery使用教程：初始化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小部件都注冊為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微信公眾號，及時獲取最新動態及最新資訊