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 ...
随机推荐
- jquery的then方法
绿地项目中的代码: $.ajax({ url: `https://openapi.italent.cn/OAuth/Token`, type: 'post', data: `tenant_id=${t ...
- 报错：Original error: Could not proxy command to remote server. Original error: Error: read ECONNRESET
问题:Appium的android真机启动手机时,会遇到以下问题: An unknown server-side error occurred while processing the command ...
- SAS数据挖掘实战篇【六】
SAS数据挖掘实战篇[六] 6.3 决策树 决策树主要用来描述将数据划分为不同组的规则.第一条规则首先将整个数据集划分为不同大小的 子集,然后将另外的规则应用在子数据集中,数据集不同相应的规则也不同 ...
- java：LeakFilling（JS,JQ）
1.<a href="javascript:void(0)" onclick="dele();"> a标签不使用链接的时候,必须加javascrip ...
- FileChannel原理
官方对Channel的解释 (一个用于输入/输出操作的连接.通道表示对实体的开放连接,如硬件设备.文件.网络套接字或能够执行一个或多个不同的输入/输出操作的程序组件,例如读取或写入.) Thankin ...
- DMA（Direct Memory Access直接存储器访问）总结
转载于http://blog.csdn.net/peasant_lee/article/details/5594753 DMA一种高速的数据传输操作,允许在外部设备和存储器之间直接读写数据,不需要CP ...
- Logistic回归实战篇之预测病马死亡率
利用sklearn.linear_model.LogisticRegression训练和测试算法. 示例代码: import numpy as np import matplotlib.pyplot ...
- python 传址 与传值（暂时保存，后续做分类）
# python 传址 与 传值 # 定义一个函数 用于将 list 下标为2的数据加100 并进行打印 该list def test1(list): list[2]+=100 print(list) ...
- Ubuntu原生源
#deb cdrom:[Ubuntu 18.04.3 LTS _Bionic Beaver_ - Release amd64 (20190805)]/ bionic main restricted # ...
- SSM笔记
Spring Spring就像是整个项目中装配bean的大工厂,在配置文件中可以指定使用特定的参数去调用实体类的构造方法来实例化对象.也可以称之为项目中的粘合剂. Spring的核心思想是IoC(控制 ...