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

继承

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

构造函数:init

模板

格式

  • 执行 JS 代码

    #...#,eg: #if(){#...#}#

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

    #=…#

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

    #:…#

  • 可用\#输出#字符串

使用模板

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

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

嵌入式模板 & 外部模板

嵌入式模板

inline: 使用 JavaScript 字符串定义

外部模板

external: 使用 HTML Script 块定义

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

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

动画

基本

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

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

合并动画

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

var effectWrapper = kendo.fx($("#element"));

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

fadeOutEffect.play();

多个元素同时开始动画

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

$.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,发现比这个好用