余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

Kendo UI使用教程:入门指南(kendo ui vue中文手册)

xiyangw 2022-12-06 09:47 14 浏览 0 评论

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使用教程:入门指南(kendo ui vue中文手册)

要在项目中托管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中文网!

点击“了解更多”获取最新试用版!

相关推荐

Vue的框架(了解)

前端MVC设计模式MVC设计模式,其实就是将前端实现某个业务的所有代码划分为三部分Model:模型,指数据模型,这个数据一般来自于服务器View:视图,指页面标签内容Controller:控制...

Vue.js实战 第五章练习一

练习要求:在原有表格基础上,新增一项是否选中该商品的功能,总价变为只计算选中商品的总价,同时提供一个全选的按钮。实现思路:按照vue数据和dom元素双向绑定的特性,定义allCheckStatus变量...

Vue基础到进阶教程之class和style绑定

关于class和style我们并不陌生,这个在学习css的时候就是家常便饭了,操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用v-bind处理它们,...

深入Vue 必学高阶组件 HOC「进阶篇」

作者:ssh转发连接:https://mp.weixin.qq.com/s/seKoLSIMtTd1sU4uDrgZCA前言高阶组件这个概念在React中一度非常流行,但是在Vue的社区里讨论...

周末大礼包,23道高质量中级前端面试题。金九银十,建议收藏

这套面试题考察的内容比较常见,涉及到JavaScript、ES6、CSS、Vue、简单算法,浏览器相关知识等。题目列表1.JavaScript的数据类型有哪些2.什么是同源策略3.跨域的方法...

vue3.0-摒弃Object.defineProperty,基于 Proxy 的观察者机制

写在前面:11月16日早上,Vue.js的作者尤大大在VueToronto的主题演讲中预演了Vue.js3.0的一些新特性,其中一个很重要的改变就是Vue3将使用ES6的Proxy作...

程序员都必掌握的前端教程之VUE基础教程(七)

阅读本文约需要10分钟,您可以先关注我们,避免下次无法找到。本篇文章成哥继续带大家来学习前端VUE教程,今天主要讲解VUE的表单处理等知识点。下面我们就一起来学习该块内容吧!01简介在日常开发中,我...

web前端开之网站搭建框架之vue详解

网站搭建框架之vueVue是web前端快速搭建网站的框架之一。它与jQuery有所不同,是以数据驱动web界面(以操作数据改变页面,而jQuery是以操作节点来改变页面),同时,vue还实现了数据的双...

vue3.0尝鲜-基于 Proxy 的观察者机制探索

Vue.js的作者尤大大在VueToronto的主题演讲中预演了Vue.js3.0的一些新特性,其中一个很重要的改变就是Vue3将使用ES6的Proxy作为其观察者机制,取代之前使用...

TypeScript 设计模式之观察者模式

一、模式介绍1.背景介绍在软件系统中经常碰到这类需求:当一个对象的状态发生改变,某些与它相关的对象也要随之做出相应的变化。这是建立一种「对象与对象之间的依赖关系」,一个对象发生改变时将「自动通知其他...

vue面试3

1.单页面应用与多页面应用的去别2.简述一下Sass、Less,且说明区别?他们是动态的样式语言,是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。变量符不一样,les...

VUE v-bind 数据绑定

动态的绑定一个或多个attribute,也可以是组件的prop。缩写::或者.(当使用.prop修饰符)期望:any(带参数)|Object(不带参数)参数:attrOrP...

vue初学习之自定义选择框实现

v-model简单介绍在使用vue的过程中会经常用到input和textarea这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签...

Vue实现拖拽穿梭框功能四种方式

一、使用原生js实现拖拽打开视频讲解更加详细Vue实现拖拽穿梭框功能的四种方式_哔哩哔哩_bilibili<html><head><meta...

Vue3.x setup 语法糖实现props双向绑定

1.背景为了封装一下Element-Plus的分页插件,需要实现父子组件之间的传值。2.父组件<scriptsetuplang="ts">letqueryPa...

取消回复欢迎 发表评论: