余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

Kendo UI for jQuery使用教程:初始化jQuery插件

xiyangw 2022-12-06 09:58 134 浏览 0 评论

【点击“了解更多获取”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/

相关推荐

高效删除文件名中的指定内容,祛除烦恼

如何快速批量删除文件名中的指定字符?在电脑整理文件时,我们常常需要进行批量重命名操作。如果文件名中含有不必要或重复的字符,这将影响文件的识别和查找。因此,删除这些文字或字符是非常必要且有效的。本文将分...

你的手机是不是经常提示存储空间不足?Python帮你清理重复文件

  最近我的手机经常提示存储空间不足,主要是微信和QQ群里接收的文件太多了,平时也没怎么整理。我把这些文件从手机里拷出来,打算整理一下,把该删的文件都删掉,把要备份的文件分门别类存到电脑或网盘上。我突...

从零开始打造云端AI管理调度平台(四)如何设计主页_1

最近闲来无事,想着把自己工作正在做的一个项目做一个简单的分享与实战教程,该项目不困难但是由于涉及要素过多所以比较复杂。所以这里分享出来也是为了帮助新手小白能在实战当中快速了解python知识。主要内容...

「万能Python」-17-标准库OS_python2.7标准库

Python的库是指预先编写好的代码集合,可以用来处理特定的任务或实现特定的功能。Python的标准库提供了许多常用的标准库,无需安装引入使用。Python3的标准库提供了许多常用的功能,包括...

十多行代码生成原帖和临写对照图_几十行代码可以申请软著吗

介绍这个小工具把原帖和临写分解成多列对照的形式。输入原帖图片,和输入临写图片,生成对照图片。使用说明运行compare.py文件,输入参数为:原帖图片文件名,临写图片文件名,列数。python3co...

Python合集之目录操作(四)_python之文件操作大全

1.删除目录删除目录可以通过os模块提供的rmdir()函数实现。通过rmdir()函数删除目录时,只有当要删除的目录为空时才起作用。os.rmdir(path)path为要删除的目录,可以使用绝对路...

excel办公自动化,自动合并excel表格

平时时收到不同人反馈的excel表格,需要将其合并在一个excel中,每个excel打开复制粘贴会很慢,如下脚本可一键合并所有的exceldefauto_merge():try:print('...

批量打开一个文件夹下面所有的excel表格

如果现在有一个文件夹,名称叫做“练习表格”,路径名是'C:\Users\123\Desktop\练习表格',现在的要求是打开这个文件下面所有的excel表格,后缀名字为“xlsx”,我...

500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!让他们的左手/右手...

python 日志写入_python日志文件写入

1.第一步,新建日志文件路径,如下图:2.日志模块封装,代码如下:importlogging,oslogs_path=os.path.join(os.path.dirname(__file...

Python os.path模块使用指南:轻松处理文件路径

前言在Python编程中,文件和目录的操作是非常重要的一部分。为了方便用户进行文件和目录的操作,Python标准库提供了os模块。其中,os.path子模块提供了一些处理文件路径的函数和方法。本文主要...

Python中获取当前路径之pathilb和os的区别

20230114星期六:1,直接在py脚本中,执行,没有区别;2,打包成exe文件以后,在本机执行,有区别,这时,不能使用os.path.dirname(__file__),只能使用pathlib.P...

Python(办公自动化编程系列)学习笔记1

1、获得当前程序工作目录importos#os.getcwd()函数可以取得当前工作路径的字符串print(os.getcwd())运行结果2、获得程序文件夹相对路径#相对路径都用/表示#../...

文件路径名Pathnames的操作_路径和文件名是什么意思

1.现象问题使用路径名来获取文件名,目录名,绝对路径等等2.原因分析无3.问题解决使用os.path模块中的函数来操作路径名importos.path#查看标准化的绝对路径print...

关于《Python入门:os常用函数》中复制文件(夹)函数从简到繁

基本考虑练习os模块及file读写操作:将给定的源路径的文件(夹)复制到目标路径简单实现#文件到文件的复制path_src='E:\src.txt'path_tar='D...

取消回复欢迎 发表评论: