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 for jQuery入门的第一步指南教程！本指南创建一个用例场景，演示如何开始使用该套件并在项目中为jQuery实现Kendo UI DatePicker小部件。
1. 在本地添加所需的CSS和JavaScript文件。
您还可以使用Kendo UI CDN服务。https://kendo.cdn.telerik.com/VERSION/js/FILENAME.min.js和https://kendo.cdn.telerik.com/VERSION/styles/FILENAME.min.css locations提供了CSS和JavaScript文件的缩小CDN版本。
在HTML文档的head标记中包含Kendo UI CSS和CSS JavaScript。
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Kendo UI!</title>
<!– Common (base) Kendo UI stylesheet. Register it before the Kendo UI theme-specific stylesheet. –>
<link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" rel="stylesheet" />
<!– Default Kendo UI theme stylesheet. –>
<link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.min.css" rel="stylesheet" />
<!– (Optional) Kendo UI Hybrid stylesheet. Include only if you will use the mobile devices features. –>
<link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.mobile.min.css" rel="stylesheet" />
<!– jQuery JavaScript. Register it before the Kendo UI JavaScript file. –>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<!– Kendo UI combined JavaScript –>
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
</head>
<body>
Hello World!
</body>
</html>
2. 为Kendo UI DatePicker小部件添加HTML元素。
3. 使用其jQuery插件初始化DatePicker。
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Kendo UI!</title>
<link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.mobile.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
</head>
<body>
<!– HTML element from which the DatePicker would be initialized –>
<input id="datepicker" />
<script>
// Initialize the Kendo UI DatePicker by calling the kendoDatePicker jQuery plugin.
$(function() {
$("#datepicker").kendoDatePicker();
});
</script>
</body>
</html>
4. 设置DatePicker的de-DE文化区域设置。
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Kendo UI!</title>
<link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.mobile.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
<!– Register the culture js file –>
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/cultures/kendo.culture.de-DE.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
// Configure the DatePicker to use German culture.
$(function() {
$("#datepicker").kendoDatePicker({
culture: "de-DE"
});
// Get a reference to the DatePicker and set its value.
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.value(new Date(2016, 10, 1));
});
</script>
</body>
</html>
Kendo UI R2 2019 SP1全新发布，最新动态请持续关注Telerik中文网！
扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯
Kendo UI for jQuery使用教程：入门指南的更多相关文章
- Kendo UI for jQuery使用教程：初始化jQuery插件
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI for jQuery使用教程：方法和事件
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI for jQuery使用教程：使用MVVM初始化（二）
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI for jQuery使用教程：使用MVVM初始化（一）
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI for jQuery使用教程：小部件DOM元素结构
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI for jQuery使用教程——创建自定义捆绑包
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI for jQuery使用教程——使用NPM/NuGet进行安装
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI for jQuery使用教程：操作系统/jQuery支持等
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI for jQuery使用教程：支持Web浏览器
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
随机推荐
- docker(常见调试技巧)：docker打包镜像调试技巧
写Dockerfile可以先不指定CMD.ENTRYPOINT等启动命令,只要拷贝就好了 如下: # Dockerfile for basic-app-client # Build with: # d ...
- java：Session（概述，三层架构实例（实现接口封装JDBC），Session实现简单购物车实例）
1.Session概述: Session:在计算机中,尤其是在网络应用中,称为“会话控制”.Session 对象存储特定用户会话所需的属性及配置信息.这样,当用户在应用程序的 Web 页之间跳转时,存 ...
- springboot--websocket简单demo（一）：session chat
最近跟着大佬 https://tycoding.cn/2019/06/16/project/boot-chat/ 敲了2个关于websocket的demo,总结一下 从将会话信息保存在session中 ...
- 错误：expected initializer before "***"
今天写了一个程序,编译时报了一个错误:expected initializer before "***"报错的语句只是程序开头的一个变量定义语句,怎么会有这样的错误呢,琢磨了半天也 ...
- 在IOS系统中微信浏览器input输入框输入值无效
[contenteditable="true"], input, textarea { -webkit-user-select: auto!important; -khtml-us ...
- LeetCode.1002-寻找共有字符(Find Common Characters)
这是悦乐书的第375次更新,第402篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第236题(顺位题号是1002).给定仅由小写字母组成的字符串A,返回列表中所有字符串都 ...
- 平衡树（fhq无旋treap）
fhq板子(代码正确且风格易懂) 洛谷P3369 #include<iostream> #include<cstring> #include<cstdio> #in ...
- ubuntu系统熄屏无法唤醒
ubuntu系统熄屏无法唤醒 解决办法:重启后,安装laptop-mode-tools工具包. 1.检查是否安装了grep laptop-mode-tools 工具包 $ dpkg -l | grep ...
- 《Python编程从0到1》笔记3——欧几里得算法
本节以欧几里得算法(这是人类历史上最早记载的算法)为示例,向读者展示注释.文档字符串(docstring).变量.循环.递归.缩进以及函数定义等Python语法要素. 欧几里得算法:“在数学中, ...
- 【FFMPEG】网络流媒体协议
目录(?)[-] RTP RTCP SRTP SRTCP RTSP RTSP 和RTP的关系 SDP RTMPRTMPS mms HLS RTP 参考文档 RFC3550/RFC3 ...