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>

---

Kendo UI R2 2019 SP1全新发布，最新动态请持续关注Telerik中文网！

扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯