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微信公众号,及时获取最新动态及最新资讯

Kendo UI for jQuery使用教程:初始化jQuery插件的更多相关文章

  1. Kendo UI for jQuery使用教程:入门指南

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  2. jQuery Mobile 和 Kendo UI 的比较(转)

    jQuery Mobile 和 Kendo UI 的比较 转自 https://www.oschina.net/translate/jquery-mobile-versus-kendo-ui?cmp ...

  3. Kendo UI 初始化 Data 属性

    初始化 Data 属性 前面在介绍准备 Kendo UI 开发环境时我们使用 jQuery 的方法将一个  HTML 元素转换成一个 Kendo UI 控制项: $(“#datepicker”).ke ...

  4. 关于Kendo UI 开发教程

    Kendo UI 开发教程 jQuery UI 是一套 JavaScript 函式库,提供抽象化.可自订主题的 GUI 控制项与动画效果.基于 jQuery JavaScript 函式库,可用来建构互 ...

  5. Kendo UI使用教程:入门指南

    [Kendo UI最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support for React和 ...

  6. Kendo UI Widgets 概述

    UI Widgets 概述 Kendo UI 是基于 jQuery 库开发的,Kendo UI widgets 是以 jQuery 插件形式提供的.这些插件的名称基本上都是以 kendo 作为前缀.比 ...

  7. Kendo UI for jQuery使用教程:使用MVVM初始化(二)

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  8. Kendo UI for jQuery使用教程:使用MVVM初始化(一)

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  9. Kendo UI for jQuery使用教程:方法和事件

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

随机推荐

  1. Nmap扫描二级目录

    nmap --script http-enum -p80 192.168.2.100   //namp扫描2级目录

  2. 面试题 :10亿url去重只给4G内存

    我能想到的有以下几种: 用语言判断去重,ex表格去重,数据库去重,文件名字去重, 有人说:10亿url ex表放不下!! 可以用树和折半的思想将10亿url,变成单元最小化的树,然后用ex表去重 ex ...

  3. mysql 速度优化

    1.添加索引 ALTER TABLE `cw_base_house` ADD INDEX idx_house ( `villageCode`, `buildingNo`, `unitNo`, `hou ...

  4. 一篇文章搞懂python2、3编码

    说在前边: 编码问题一直困扰着每一个程序员的编程之路,如果不将它彻底搞清楚,那么你的的这条路一定会走的格外艰辛,尤其是针对使用python的程序员来说,这一问题更加显著, 因为python有两个版本, ...

  5. 【Spring 源码】Spring 加载资源并装配对象的过程(XmlBeanDefinitionReader)

    Spring 加载资源并装配对象过程 在Spring中对XML配置文件的解析从3.1版本开始不再推荐使用XmlBeanFactory而是使用XmlBeanDefinitionReader. Class ...

  6. HanLP-最短路径分词

    今天介绍的内容是最短路径分词.最近换回了thinkpad x1,原因是mac的13.3寸的屏幕看代码实在是不方便,也可能是人老了吧,^_^.等把HanLP词法分析介绍结束后,还是会换回macbook ...

  7. 水晶报表和rdlc报表传入参数筛选

    在使用报表向客户展示结果数据时,实时的在报表中显示某些特定的数据是必需的,如:显示的部门.打印的日期等.本文只简单的演示向报表内传入一个字符值. 以下是设计好报表之后传入参数的具体操作 一.首先是水晶 ...

  8. mapreduce运行的bug收录

    在8088端口可以看到日志文件(主要看error),操作如下: 1.window jdk版本最好和linux jdk 版本一致,不然容易出现莫名奇妙的bug 之前出现一个bug: Unsupporte ...

  9. std::tr1::function和bind组件

    C++中std::tr1::function和bind 组件的使用 在C++的TR1中(Technology Report)中包含一个function模板类和bind模板函数,使用它们可以实现类似函数 ...

  10. centos终端显示字母重叠

    在使用VMware虚拟机安装linux之后,之后调整了中文显示,但是后来不知道怎么回事在终端显示的字母很多都是重叠的. 在百度上也找到很多的解决办法 eg: 终端键入:vi /etc/fonts/co ...