Kendo UI API中文介绍二:AutoComplete (1)

原创|使用教程|编辑:我只采一朵|2014-05-16 14:18:32.000|阅读 3675 次

概述:本文介绍Kendo UI API之AutoComplete,介绍打开和关闭动画的相关配置。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

相关链接:

温馨提示:Kendo UI AutoComplete必须使用input HTML元素。AutoComplete具有配置元素22个,字段元素4个,方法12个以及事件5个。

Configuration


animation Object

配置建议窗口的打开和关闭动画。将animation设置为false时会禁用打开和关闭动画,其结果就是建议窗口而直接打开和关闭,没有动画。

示例:如何禁用打开和关闭动画

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
animation: false
});
</script>

示例:配置动画

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
animation: {
close: {
effects: "fadeOut zoom:out",
duration: 300
},
open: {
effects: "fadeIn zoom:in",
duration: 300
}
}
});
</script>

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
animation: {
close: {
effects: "fadeOut zoom:out",
duration: 300
},
open: {
effects: "fadeIn zoom:in",
duration: 300
}
}
});
</script>

animation.close Object

示例:配置关闭动画

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
animation: {
close: {
effects: "zoom:out",
duration: 300
}
}
});
</script>

animation.close.duration Number(default: 100)

关闭动画的持续时间是以毫秒计算的。

animation.close.effects String

关闭动画的效果是以字符串的形式表示的,多个效果之间用空格隔开。有哪些可用的动画效果?请猛戳这里

animation.open Object

示例:配置打开动画

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
animation: {
open: {
effects: "zoom:in",
duration: 300
}
}
});
</script>

animation.open.duration Number(default: 200)

打开动画的持续时间以毫秒计算,默认是200毫秒。

animation.open.effects String

打开动画的效果是以字符串的形式表示的,多个效果之间用空格隔开。有哪些可用的动画效果?请猛戳这里

慧都特邀Kendo UI原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui线下培训


标签:APIKendoUI

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:慧都控件

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP