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

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

您可以通过数据属性或基于自定义HTML属性初始化和配置每个Kendo UI小部件。

Kendo UI混合应用程序、单页面应用程序(SPA)视图组件和模型视图视图模型(MVVM)kendo.bind方法使用声明性方法自动实例化现有DOM元素中的多个小部件。

使用数据属性

当页面上有许多Kendo UI小部件时,从数据属性初始化很方便,因为小部件配置是在目标元素中声明的。

以下示例演示如何使用数据属性初始化Kendo UI窗口小部件。 kendo.bind($(“#container”))语句查找具有角色数据属性的所有元素,并初始化相应的Kendo UI小部件。

注意:角色数据属性的值是窗口小部件的小写名称 - "autocomplete"、"dropdownlist"等。

在混合应用程序中初始化

您可以从混合应用程序和给定元素中的数据属性初始化窗口小部件,然后还可以配置data- *选项。 默认情况下为避免歧义,kendo.bind仅初始化kendo.ui命名空间中的小部件,不包括混合小部件。 可以通过将其他名称空间作为参数传递来更改此操作。请注意混合Kendo UI应用程序首先从kendo.mobile.ui命名空间初始化小部件。 这意味着具有data-role =“listview”的元素将自动初始化为混合应用程序上下文中的混合ListView小部件。

注意:data-role属性还接受完整窗口小部件类名称(带有其名称空间)作为值。

以下示例演示如何使用窗口小部件的完整类路径在混合应用程序中实例化Kendo UI ListView。

<div data-role="view">
<!-- specify the Kendo UI Web ListView widget -->
<div data-role="kendo.ui.ListView"></div>
</div>
<script>
var app = new kendo.mobile.Application();
</script>
在特定元素中初始化

以下示例演示如何在特定元素中实例化Kendo UI小部件。

<div id="container">
<input data-role="numerictextbox" />
<button data-role="button">Mobile button</button>
</div>
<script>
kendo.bind($("#container"), {}, kendo.ui, kendo.mobile.ui);
</script>
设置数据选项

可以使用target元素的data属性设置每个配置选项。 将“data-”前缀添加到配置选项的名称并指定选项值 - 例如,data-delay =“100”。

注意:camelCase选项通过破折号分隔的属性设置。 例如,AutoComplete的ignoreCase选项通过data-ignore-case设置。

以数据开头的选项不需要属性名称中的附加“数据”。 例如,dataTextField选项通过data-text-field属性设置,dataSource通过data-source属性设置。 复杂配置选项设置为JavaScript对象文字 - 例如,data-source =“{data:[{name:‘John Doe‘},{name:‘Jane Doe‘}]}”。

以下示例演示如何使用数据属性配置Kendo UI小部件。

<div id="container"><input data-role="autocomplete"data-ignore-case="true"data-text-field="name"data-source="{data: [{name: ‘John Doe‘},{name: ‘Jane Doe‘}]}" /></div>
<script>
  kendo.bind($("#container"), {});
  </script>
订阅事件

您可以使用数据属性订阅Kendo UI小部件事件。 data属性的值被解析为JavaScript函数,可在全局范围内使用。 以下示例演示如何通过数据属性订阅Kendo UI窗口小部件事件。

<div id="container"><input data-role="numerictextbox" data-change="numerictextbox_change" /></div>
<script>
  function numerictextbox_change(e) {
  // Handle the "change" event.
  }
  kendo.bind($("#container"));
  </script>


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

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

原文地址:https://www.cnblogs.com/AABBbaby/p/11464993.html

时间: 2024-11-01 12:44:37

Kendo UI for jQuery使用教程:使用MVVM初始化(一)的相关文章

Kendo UI for jQuery使用教程:支持Web浏览器

[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小部件和框架组件旨在支持所有主要的Web浏览器,并提供跨浏览器兼容性.标准兼容性或支持触摸设备. 但是根据项目的具体情况,您

Kendo UI for jQuery使用教程——使用NPM/NuGet进行安装

[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库. 使用NPM进行安装 Node Package Manager (NPM)是目前比较流行的一个JavaScript包管理器.在本文中假设您熟悉

Kendo UI for jQuery使用教程:小部件DOM元素结构

[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库. 所有Web Kendo UI小部件都保留对元素和封装DOM元素的引用,并且所有混合Kendo UI小部件仅保留对元素DOM元素的引用. el

两大HTML5框架评测:Kendo UI 和 jQuery Mobile

jQuery Mobile 和 Kendo UI 都是流行的 JavaScript 框架,在开发中我们可以在它们的基础上添砖加瓦制作所有现代移动WEB应用.这两个框架都是基于使用率顶尖的 JavaScript 库 jQuery 所构建的.比较 Kendo UI 和 jQuery Mobile 有些类似于比较同一枚硬币的两面.众所周知,jQuery Mobile 实际上并不需要太多的介绍,因为它是最常用的HTML5框架之一. Kendo UI 具有相似的动机和类似的发展速度.与 jQuery Mo

Web UI开发神器—Kendo UI for 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网格的基本功能,可让您操纵其数据的显示方式. Kendo UI Grid提供以下编辑模式: 批量编辑 内联编辑 弹出式编辑

Web界面开发工具!Kendo UI for jQuery数据管理之网格列宽

Kendo UI for jQuery R1 2020 SP1试用版下载 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库. 要设置Grid列的宽度,请使用其width属性. 当您通过col元素从HTML表创建网格时,也可以设置列的宽度:但是,当对表

关于Kendo UI 开发教程

Kendo UI 开发教程 jQuery UI 是一套 JavaScript 函式库,提供抽象化.可自订主题的 GUI 控制项与动画效果.基于 jQuery JavaScript 函式库,可用来建构互动式的 Web 应用. 在开发 Web 应用时,可以直接使用 jQueryUI ,也可以使用其它一些基于 jQuery 的其它 UI 框架,其中 Kendo (日文剑道) UI 就是其中的佼佼者.两种框架各有所长,下表列出两种 UI 框架的简单比较: 分类 jQuery UI Kendo UI Wi

Kendo UI常用示例汇总(六)

Kendo UI Professional 提供开源和商业两个版本.开源版 Kendo UI Core,有40+个框架和组件:商业版整合了之前的Kendo UI Web.Kendo UI Mobile 和 Kendo UI DataViz ,一共有70+个框架和组件.作为Kendo UI的升级版,Kendo UI Professional既可以开发网页版应用程序,也可以开发移动版应用程序,并且在性能上也有显著的优化和提升. Kendo UI Professional试用版下载猛戳>> Kend

[转]Upgrading to Async with Entity Framework, MVC, OData AsyncEntitySetController, Kendo UI, Glimpse &amp; Generic Unit of Work Repository Framework v2.0

本文转自:http://www.tuicool.com/articles/BBVr6z Thanks to everyone for allowing us to give back to the .NET community, we released v1.0 of the Generic Unit of Work and Repository Framework for four weeks and received 655 downloads and 4121 views. This po