没有找到合适的产品?
联系客服协助选型:023-68661681
提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
转帖|行业资讯|编辑:龚雪|2016-09-30 09:22:04.000|阅读 1672 次
概述:除了使用jQuery插件的方法来初始化方法外,每个Kendo 控件还可以通过data属性来初始化。本文主要为大家介绍如何使用Data属性进行初始化。
# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>
相关链接:
前面在介绍准备Kendo UI开发环境时我们使用jQuery的方法将一个HTML元素转换成一个Kendo UI控件: $(?#datepicker?).kendoDatePicker();除了使用jQuery插件的方法来初始化方法外,每个Kendo 控件还可以通过data属性来初始化,此时你需要设置data的role属性,然后调用kendo.init方法。
使用初始化Data属性的方法在页面上包含有大量Kendo UI控件时非常便利。 首先, 组件的配置包含在目标元素中,第二无需首先查找每个元素然后调用jQuery方法,你只需调用一次kendo.init()方法。
Kendo UI Mobile应用通常使用Data属性来初始化。如下例使用data 属性来初始化一个UI组件:
<div id=“container”> <input data-role=“numerictextbox” /> </div> <script> kendo.init($(“#container”)); </script>
其中方法kendo.init($(?#container?)) 会查找所有包含有data-role属性的元素,然后初始化这些Kendo UI组件。 每个kendo UI组件的role的值为该UI组件名称的小写名字,比如?autocomplete?或?dropdownlist?。
缺省情况下,kendo.init 只会初始化Kendo UI Web组件和Kendo UI DataViz组件(按这个顺序)。 而Kendo UI Mobile应用 首先初始化Kendo UI Mobile组件,然后是Kendo UI Web组件,最后是Kendo UI DataViz组件。 这意味着data-role=?listview? 在Mobile应用中会缺省初始化为 Kendo UI Mobile Listview。 然而可以通过指明组件全称的方法在修改这个缺省初始化顺序。
比如:在Mobile应用中 指明使用Kendo UI Web的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>
每个组件可以通过Data属性来进行配置,对于配置的属性,只需在属性名前加上data-前缀就可以做为目标元素的属性进行配置。比如 data-delay=?100?。 对于一些使用Camel-cased 的属性则是通过添加“-” ,比如AutoComplete的ignoreCase 的属性可以通过 data-ignore-case来设置。而对于一些已经是使用data前缀的属性则无需再添加data-前缀。比如dataTextField属性可以通过data-text-field属性来配置,dataSource属性可以通过data-source属性来配置。对于一些复杂的配置可以通过JavaScript 对象字面量来配置,比如:data-source=?{data: [{name: ?John Doe?},{name: ?Jane Doe?]}?.
如下例:
<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.init($(“#container”)); </script>
你也可以通过data属性添加对Kendo UI组件的事件处理,属性的值被当成一个JavaScript函数,其作用域为全局。
如下例:
<div id=“container”> <input data-role=“numerictextbox” data-change=“numerictextbox_change” /> </div> <script> function numerictextbox_change(e) { // Handle the “change” event } kendo.init($(“#container”)); </script>
事件处理函数也可以为一个成员函数,比如 foo.bar 可以看出为foo 对象的 bar 方法。例如:
<div id=“container”> <input data-role=“numerictextbox” data-change=“handler.numerictextbox_change” /> </div> <script> var handler = { numerictextbox_change: function (e) { // Handle the “change” event } }; kendo.init($(“#container”)); </script>
支持数据绑定的UI组件的数据源也可以通过data-source 属性来指定。 这个属性可以为一个JavaScript对象,一个数组或是一个全局变量。
例如:使用JavaScript对象作为数据源。
<div id=“container”> <input data-role=“autocomplete” data-source=“{data:[‘One’, ‘Two’]}” /> </div> <script> kendo.init($(“#container”)); </script>
使用JavaScript数组作为数据源。
<div id=“container”> <input data-role=“autocomplete” data-source=“[‘One’, ‘Two’]” /> </div> <script> kendo.init($(“#container”)); </script>
使用一个可以全局访问的变量作为数据源。
<div id=“container”> <input data-role=“autocomplete” data-source=“dataSource” /> </div> <script> var dataSource = new kendo.data.DataSource( { data: [ “One”, “Two” ] }); kendo.init($(“#container”)); </script>
模板也可以通过Data属性来设置,属性的值代表用来定义模板的Script元素的Id。比如:
<div id=“container”> <input data-role="autocomplete" data-source="[{firstName:'John', lastName: 'Doe'}, {firstName:'Jane', lastName: 'Doe'}]" data-text-field="firstName"data-template="template" /> </div> <script id="template" type="text/x-kendo-template"> <span>#: firstName # #: lastName #</span> </script> <script> kendo.init($("#container")); </script>
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com
文章转载自:慧都控件网Parasoft Insure++通过独特的三步调试流程:精准定位关键文件,实现单文件插桩与链接,并在源代码级别进行高效错误检测,极大地提高了代码测试的效率和准确性,让开发人员能够快速定位并修复问题。
随着项目规模扩大,需求管理变得复杂,如何高效追溯需求与测试的关联性成为一大挑战。Parasoft dotTEST 提供了一套强大的需求追溯解决方案,不仅能自动关联单元测试结果与需求,还能兼容几乎所有需求管理系统(RMS),大幅提升开发效率和质量管控能力,从而帮助团队实现测试过程的透明化、精准化。
Parasoft Virtualize通过智能变更顾问、自动化工作流和全面版本控制三大核心功能,为企业提供了高效的虚拟化测试环境管理方案。它不仅大幅降低了维护成本和工作量,还确保了虚拟服务与真实环境的实时同步,显著提升了测试效率和可靠性。
Parasoft SOAtest凭借其精准消息推送、智能监听和高效依赖隔离的能力,为响应式微服务架构的测试提供了强有力的支持。它不仅解决了异步通信复杂、依赖服务多等测试难题,还通过模拟真实场景和简化测试环境,显著提升了测试效率和覆盖率。
运用JavaScript和HTML5就能快速创建性能最优的Web应用程序
Kendo UI Mobile使用HTML5和JavaScript快速开发跨平台原生移动应用程序的移动应用程序框架
Kendo UI DataViz跨平台跨设备的数据可视化组件
Kendo UI CoreKendo UI Core是Kendo UI的开源免费版,是HTML5构架下的用于网络和移动开发的工具。
Kendo UI全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@evget.com
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢
慧都科技 版权所有 Copyright 2003-
2025 渝ICP备12000582号-13 渝公网安备
50010702500608号