Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成HTML元素的过渡显示。每种特效近可能的使用CSS Transition ,对于一些老版本浏览器使用修改属性的方法作为补充。所有动画可以反向显示从而可以方便的实现元素的显示和隐藏。 本篇介绍了Kendo UI特效的概要,完整的文档可以参考API文档
准备开始
所有Kendo UI 特效都是通过kendo.fx JQuery 选择器封装来创建,每个封装支持显示多种特效。例如:
6 |
var effectWrapper = kendo.fx($( "#foo" )); |
7 |
var fadeOutEffect = effectWrapper.fadeOut(); |
和jQuery 方法一样,kendo UI fx也支持方法链,比如上面代码可以简化为:
6 |
kendo.fx($( "#foo" )).fadeOut().play(); |
指定特效显示的方向
大部分特效可以指定多个方向。可以通过特效构造方法的第一个参数来指定方向,或者通过调用构造方法的快捷方法来指明方向。比如下面三种方法的效果是一样的。
6 |
var fadeOut1 = kendo.fx($( "#foo" )).fadeOut(); |
7 |
var fadeOut2 = kendo.fx($( "#foo" )).fade( "out" ); |
8 |
var fadeOut3 = kendo.fx($( "#foo" )).fade().direction( "out" ); |
10 |
//Call .play() to run any of the above animations |
组合特效
可以将多个特效组合中一起。比如:
2 |
I will be faded out and zoomed out. |
6 |
var effectWrapper = kendo.fx($( "#foo" )); |
7 |
var fadeOutEffect = effectWrapper.fadeOut(); |
8 |
fadeOutEffect.add(effectWrapper.zoomOut()); |
10 |
// Calling reverse will zoom in and fade in. |
组合特效也可以同时应用到多个元素,这时需要通过$when 方法。比如下面代码:
9 |
//Use jQuery Deferred to chain multiple effects |
10 |
var eleFoo = $( "#foo" ), |
13 |
$.when(kendo.fx(eleFoo).fadeOut().play(), |
14 |
kendo.fx(eleBaz).fadeOut().play()).then( function (){ |
15 |
//This will be called when both animations are done |
16 |
alert( "Both elements faded!" ); |
Kendo UI支持的特效种类
Kendo UI支持下面几种特效,具体请参见其文档
- Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events
本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事 ...
- Kendo UI开发教程(9): Kendo UI Validator 概述
Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...
- Kendo UI开发教程(22): Kendo MVVM 数据绑定(十一) Value
Value绑定可以把ViewModel的某个属性绑定到DOM元素或某个UI组件的Value属性.当用户修改DOM元素或UI组件的值时,绑定的ViewModel的值也随之发生改名.同样,如果ViewMo ...
- Kendo UI开发教程(6): Kendo DataSource 概述
Kendo 的数据源支持本地数据源(JavaScript 对象数组),或者远程数据源(XML, JSON, JSONP),支持CRUD操作(创建,读取,更新和删除操作),并支持排序,分页,过滤,分组和 ...
- Kendo UI开发教程(7): Kendo UI 模板概述
Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素. Kendo 模板侧重于UI显示 ...
- Kendo UI开发教程(21): Kendo MVVM 数据绑定(十) Source
Source绑定可以把ViewModel的值和由Kendo模板定义的目标元素绑定,如果ViewModel的值发生变化,被绑定的目标元素也随之发生变化.模板由属性data-template指定,它的值为 ...
- Kendo UI开发教程(20): Kendo MVVM 数据绑定(九) Text
Text绑定可以使用ViewModel来设置DOM元素的文本属性,如果需要设置input,textarea,或select的显示,需要使用value属性. 1 <span data-bind=& ...
- Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click
Click绑定可以把由ViewModel定义的方法不绑定到目标DOM的click事件.当点击目标DOM元素时触发ViewModel的对应方法.例如: 使用Click绑定 1 <div id=&q ...
- [置顶] Kendo UI开发教程: Kendo UI 示例及总结
前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoData ...
随机推荐
- SQL字符串处理函数
字符串函数对二进制数据.字符串和表达式运行不同的运算.此类函数作用于CHAR.VARCHAR. BINARY. 和VARBINARY 数据类型以及能够隐式转换为CHAR 或VARCHAR的数据类型. ...
- 前端开发——移动bug整理
1.ios下jquery的delegate失效问题? 解决方案: $("body").delegate(...) 改为 $(".item").delegate( ...
- sql注入工具sqlmap使用参数说明
Options(选项):--version 显示程序的版本号并退出-h, --help 显示此帮助消息并退出-v VERBOSE 详细级别:0-6(默认为1)Target(目标):以下至少需要设置其中 ...
- phpstorm集成phpunit
1.下载phpunit.phar,将该文件放到某个工程中 2.File > Settings > Languages & Frameworks > PHP > PHPU ...
- jquery 超简单的点赞效果
1.HTML(可以优化一下,尽量少些几个标签.....) <div id="dianz"> <b class="cz"><em&g ...
- HTTP 报文中的 Header 字段进行身份验证
[小技巧][ASP.Net MVC Hack] 使用 HTTP 报文中的 Header 字段进行身份验证 在一些 Web 系统中,身份验证是依靠硬件证书进行的:在电脑上插入 USB 证书,浏览器插件读 ...
- ubuntu下java和tomcat安装配置
oracle下载jdk-7u51-linux-i586.tar.gz sudo cp Downloads/jdk-7u51-linux-i586.tar.gz /usr/local/java //拷贝 ...
- mysql存储过程及常用函数
原文:mysql存储过程及常用函数 一.函数 1.数学函数 CEIL()进一取整 SELECT CEIL(1.2);2 FLOOR()舍一取整 SELECT FLOOR(1.9);9 MOD取余数(取 ...
- QueryOver<T>
NHibernate 数据查询之QueryOver<T> 一.限制运算符 Where:筛选序列中的项目WhereNot:反筛选序列中的项目 二.投影运算符 Select:创建部分序列的 ...
- ORACLE抽象数据类型
ORACLE抽象数据类型 *抽象数据类型*/1,抽象数据类型 概念包含一个或多个子类型的数据类型不局限于ORACLE的标准数据类型可以用于其他数据类型中 2,创建抽象数据类型 的语法(必须用NOT F ...