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 ...
随机推荐
- 阶段3 2.Spring_03.Spring的 IOC 和 DI_7 spring中bean的细节之作用范围
bean的作用范围调整. 我们的bean通常情况下都是一个单例的模式 Spring是否也知道这些都是单例 构造函数只走了一次.也就是spring这个对象默认情况就是单例的 scope属性 定义bean ...
- 配置pip镜像源（转）
使用pip安装python扩展时,如若没有配置国内镜像源,在未翻墙的情况下,其下载速度将会特别缓慢.因此,有些时候我们必须使用国内镜像源,来解决pip下载安装速度慢的问题,比较常用的国内镜像包括: 阿 ...
- STM32Cube填坑,ST link 下载一次以后无法下载
ST link 下载一次以后无法下载, 原因是工程设置忘记设置Debug模式
- 【VS开发】【图像处理】ISP图像传感器处理器基础
1 前言 做为拍照手机的核心模块之一,camera sensor效果的调整,涉及到众多的参数,如果对基本的光学原理及sensor软/硬件对图像处理的原理能有深入的理解和把握的话,对我们的 ...
- Linux文件目录的权限
权限对文件的重要性:(主要是针对文件的内容而言,与文件名没有关系) r: 可读取此文件的实际内容. w: 可以编辑.新增或者修改该文件的内容(但不能删除该文件) x: 该文件具有可以被系统执行的权限. ...
- python 并发编程 基于gevent模块 协程池 实现并发的套接字通信
基于协程池 实现并发的套接字通信 客户端: from socket import * client = socket(AF_INET, SOCK_STREAM) client.connect(('12 ...
- python 并发编程 协程 greenlet模块
一 greenlet模块 不敢是yield,还是greenlet都没有实现检测io,实现遇到io切换效果 如果我们在单个线程内有20个任务,要想实现在多个任务之间切换,使用yield生成器的方式过于麻 ...
- String StringBuffer StringBuilder区别与联系
java.lang.String.java.lang.StringBuffer.java.lang.StringBuilder都是字符串类型,是Java中用于处理字符串常用的三个类.它们主要有以下区别 ...
- Redhat7 CentOS7安装阿里云的yum源
先说CentOS的 1.备份 [root@harry ~]# cd /etc/yum.repos.d/ [root@harry yum.repos.d]# mkdir repo_bak [root@b ...
- 区间和序列上的dp
区间上的dp状态设计最基本的形式: \(F[i]\)表示以i结尾的最优值或方案数. \(F[i][k]\)表示以i结尾附加信息为k的最优值或方案数. 当然可以有多维附加信息. 转移的话往往是枚举上一个 ...