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中文网！

https://www.kendouicn.com/