Kendo

发表于 分类于 本文字数： 1.3k 阅读时长 ≈ 1 分钟

API 文档：https://docs.telerik.com/kendo-ui/api/javascript/effects/common

继承

JS 中没有类，生成对象以“复制”方式。可用kendo.Class.extend()创建对象，参数为 JS 对象。其中 Class 是基类，若换成其他对象，则从该对象继承。

构造函数：init

模板

格式

  • 执行 JS 代码

    #...#，eg: #if()#

  • 显示原始数据，如果有标签会解析

    #=…#

  • 显示 Html 元素，把标签当成文本显示

    #:…#

  • 可用\#输出#字符串

使用模板

1
2
var template = kendo.template($("#模板id").html());
var result = template(数据);

kendo.template 函数返回值为函数，执行函数并传入数据，即将数据和模板合并，返回 html 文本

嵌入式模板 & 外部模板

嵌入式模板

inline: 使用 JavaScript 字符串定义

外部模板

external: 使用 HTML Script 块定义

1
2
3
 <script type="text/x-kendo-template" id="templateId">
    <!--Template content here-->
</script>

使用script标签定义，通过 id 使用模板

动画

基本

通过kendo.fx()函数 + jQuery选择器创建动画对象

1
2
3
kendo.fx($("#element")).fadeOut().play();
kendo.fx($("#element")).fade("out").play();
kendo.fx($("#element")).fade().direction("out").play();

合并动画

使用动画对象的add()方法

1
2
3
4
5
6
var effectWrapper = kendo.fx($("#element"));

var fadeOutEffect = effectWrapper.fadeOut();
fadeOutEffect.add(effectWrapper.zoomOut());

fadeOutEffect.play();

多个元素同时开始动画

通过 $.when()和$.then() 方法

1
2
3
4
5
6
7
$.when(
    kendo.fx(eleFoo).fadeOut().play(),
    kendo.fx(eleBaz).fadeOut().play())
    .then(function(){
        //This will be called when both animations are done
        alert("Both elements faded!");
        });

Kendo UI Validator

用于表单验证，弥补 HTML5 的不足

不想写了。。。

因为学了 vue + element ui，发现比这个好用