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四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)。

所有Kendo UI小部件都注冊(cè)為jQuery插件，允許它們?cè)趈Query對(duì)象實(shí)例上實(shí)例化。

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

注意：

• 避免從同一DOM元素初始化幾個(gè)不同的Kendo UI小部件，因?yàn)橹貜?fù)初始化可能會(huì)導(dǎo)致不希望的副作用。
• 強(qiáng)烈建議從作為DOM樹(shù)一部分的HTML元素初始化Kendo UI小部件。 從文檔片段創(chuàng)建小部件可能會(huì)導(dǎo)致意外的副作用或?qū)е翵avaScript錯(cuò)誤。

入門

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

注意：如果jQuery對(duì)象包含多個(gè)DOM元素，則為每個(gè)元素實(shí)例化一個(gè)單獨(dú)的窗口小部件。

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

具有單選擇器的多個(gè)小部件

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

鏈接jQuery方法調(diào)用

以下示例演示了widget實(shí)例化插件方法之后的鏈?zhǔn)絡(luò)Query方法調(diào)用。

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

Iframes中的小部件

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

重復(fù)初始化

初始化窗口小部件時(shí)，目標(biāo)是獲取實(shí)例對(duì)象。 但是，重新創(chuàng)建窗口小部件實(shí)例是一個(gè)常見(jiàn)問(wèn)題。 當(dāng)使用Kendo UI服務(wù)器端包裝器（因?yàn)榉?wù)器端包裝器被自動(dòng)初始化）或者在多次執(zhí)行的事件處理程序中創(chuàng)建窗口小部件時(shí)，可以在同一DOM元素上重復(fù)初始化窗口小部件。

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

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

要檢查某個(gè)DOM元素的窗口小部件實(shí)例是否已存在，請(qǐng)使用標(biāo)準(zhǔn)方法獲取窗口小部件實(shí)例。 如果返回的值未定義，則窗口小部件實(shí)例不存在。

<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小部件，請(qǐng)將配置對(duì)象（鍵/值對(duì)）作為參數(shù)傳遞給jQuery插件方法。 每個(gè)窗口小部件的受支持配置選項(xiàng)和事件都列在相應(yīng)窗口小部件的API參考中。 配置對(duì)象還可能包含將綁定到相應(yīng)窗口小部件事件的事件處理程序。

以下示例演示如何設(shè)置Grid小部件的height，columns和dataSource配置選項(xiàng)。

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

Kendo UI R2 2019 SP1全新發(fā)布，最新動(dòng)態(tài)請(qǐng)持續(xù)關(guān)注Telerik中文網(wǎng)！

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