Kendo UI使用教程：入门指南

最新推荐文章于 2022-05-27 10:36:52 发布

weixin_30938149

最新推荐文章于 2022-05-27 10:36:52 发布

阅读量200

点赞数

文章标签： ui javascript php ViewUI

原文链接：http://www.cnblogs.com/AABBbaby/p/11168954.html

版权

【Kendo UI最新试用版下载】

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 Angular是专用于Angular开发的专业级Angular UI组件；Kendo UI Support for React支持React Javascript框架，更快地构建更好的应用程序；Kendo UI Support for Vue为Vue技术框架提供可用的Kendo UI组件，更快地构建更好的Vue应用程序。

在项目中托管Kendo UI

要在项目中托管Kendo UI，你需要：

下载bundles
添加CSS和JavaScript引用

下载bundles

下载任何Kendo UI软件包后，下面列出的文件夹将托管在您的本地存储库中。

/apptemplates——该文件夹包含独立的启动器模板。虽然它们是静态HTML文件，但建议您通过Web服务器而不是直接从文件系统打开它们，后一种方法会破坏所有Ajax数据请求。
/examples——容纳快速启动示例文件。虽然它们是静态HTML文件，但建议您通过Web服务器而不是直接从文件系统打开它们，后一种方法会破坏所有Ajax数据请求。
/js——包含缩小的JavaScript文件。
/src——此文件夹用于保存源代码文件，但现在它们在单独的下载包中提供。从你账户的Downloads部分访问源代码包，请注意试用版用户无法使用源代码。
/styles——由缩小的CSS文件和主题图像组成。该文件夹还包含Less文件，可以传递给编译器，位于styles/folder: styles/web/和styles/mobile/的第一级文件夹。请注意，试用版中不提供Less文件。
/wrappers——包括服务器端包装器。由于UI for ASP.NET MVC、UI for JSP或UI for PHP发行版是必须的，因此该文件夹仅在这些版本的商业包中可用。
changelog.html——提供Kendo UI更新说明。

添加CSS和JavaScript引用

要在项目中使用Kendo UI，请包含所需的JavaScript和CSS文件。

Step 1：从bundle存档中提取 /js和/styles目录，并将它们复制到Web应用程序根目录。

Step 2：在HTML文档的head标记中包含Kendo UI JavaScript和CSS文件，验证在主题CSS文件之前注册了公共CSS文件。

示例：

 
       <!DOCTYPE html>< 
       html 
       >< 
       head 
       >< 
       title 
       >Welcome to Kendo UI!</ 
       title 
       > 
       <!-- Common Kendo UI CSS for web widgets and widgets for data visualization. --> 
       < 
       link  
       href 
       = 
       "styles/kendo.common.min.css"  
       rel 
       = 
       "stylesheet"  
       /> 
      
 
       <!-- (Optional) RTL CSS for Kendo UI widgets for the web. Include only in right-to-left applications. --> 
      
 
          
       < 
       link  
       href 
       = 
       "styles/kendo.rtl.min.css"  
       rel 
       = 
       "stylesheet"  
       type 
       = 
       "text/css"  
       /> 
      
 
       <!-- Default Kendo UI theme CSS for web widgets and widgets for data visualization. --> 
      
 
          
       < 
       link  
       href 
       = 
       "styles/kendo.default.min.css"  
       rel 
       = 
       "stylesheet"  
       /> 
      
 
       <!-- (Optional) Kendo UI Hybrid CSS. Include only if you will use the mobile devices features. --> 
      
 
          
       < 
       link  
       href 
       = 
       "styles/kendo.default.mobile.min.css"  
       rel 
       = 
       "stylesheet"  
       type 
       = 
       "text/css"  
       /> 
      
 
       <!-- jQuery JavaScript --> 
      
 
          
       < 
       script  
       src 
       = 
       "js/jquery.min.js" 
       ></ 
       script 
       > 
      
 
       <!-- Kendo UI combined JavaScript --> 
      
 
          
       < 
       script  
       src 
       = 
       "js/kendo.all.min.js" 
       ></ 
       script 
       > 
      
 
          
       </ 
       head 
       > 
      
 
          
       < 
       body 
       > 
      
 
          
       Hello World! 
      
 
          
       </ 
       body 
       > 
      
 
          
       </ 
       html 
       > 
      

注意：代码示例以后假设Kendo UI scripts和stylesheets现在已添加到文档中。

Step 3：初始化一个小部件

以下示例演示如何初始化DatePicker小部件。

示例：

 
       <!-- HTML element from which the DatePicker would be initialized --> 
      
       <input id= 
       "datepicker"  
       /> 
      
       <script> 
      
       $( 
       function 
       () { 
      
       // Initialize the Kendo UI DatePicker by calling the kendoDatePicker jQuery plugin 
      
       $( 
       "#datepicker" 
       ).kendoDatePicker(); 
      
       }); 
      
       </script>

以下示例演示了DatePicker小部件的完全初始化。

示例：

 
       <!DOCTYPE html> 
      

          
      
 
          
       < 
       html 
       > 
      
 
       < 
       head 
       > 
      
 
       < 
       title 
       >Welcome to Kendo UI!</ 
       title 
       > 
      
 
       < 
       link  
       href 
       = 
       "styles/kendo.common.min.css"  
       rel 
       = 
       "stylesheet"  
       /> 
      
 
       < 
       link  
       href 
       = 
       "styles/kendo.default.min.css"  
       rel 
       = 
       "stylesheet"  
       /> 
      
 
       < 
       script  
       src 
       = 
       "js/jquery.min.js" 
       ></ 
       script 
       > 
      
 
       < 
       script  
       src 
       = 
       "js/kendo.all.min.js" 
       ></ 
       script 
       > 
      
 
       </ 
       head 
       > 
      
 
       < 
       body 
       > 
      
 
       < 
       input  
       id 
       = 
       "datepicker"  
       /> 
      
 
       < 
       script 
       > 
      
 
       $(function() { 
      
 
       $("#datepicker").kendoDatePicker(); 
      
 
       }); 
      
 
       </ 
       script 
       > 
      
 
       </ 
       body 
       > 
      
 
       </ 
       html 
       > 
      

安装Bower包

Bower是一个流行的Web管理程序包管理器，用于处理框架、库、资产和实用程序。

概要

Kendo UII维护2个Bower包：

Kendo UI Core.
Kendo UI Professional.

所有正式版本，Service Pack和内部版本都会上传到它们中。

重复异常的分隔符

截至Kendo UI 2016 Q2（2016.2.504）更新：

Scheduler用逗号（，）替换分号（;）作为重复异常的分隔符类型。
Scheduler不再向重复异常添加尾随分隔符。

使用CDN服务

Kendo UI CDN托管在Amazon CloudFront上。要访问CDN服务，您可以使用不同的方法。

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

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

转载于:https://www.cnblogs.com/AABBbaby/p/11168954.html

weixin_30938149

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Kendo UI使用教程：入门指南

【Kendo UI最新试用版下载】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 Angular是专用于Angular...
复制链接

扫一扫