Kendo UI API中文介绍三:Button

原创|使用教程|编辑:我只采一朵|2014-05-23 10:09:44.000|阅读 5890 次

概述:本节为大家介绍 kendo.ui.Button,包括4个Configuration、1个Methods和1个Events。

相关链接:

本节为大家介绍 kendo.ui.Button,包括4个Configuration、1个Methods和1个Events。

>>Kendo UI Professional下载

Configuration


enable | Boolean(default: true)

用于决定Button是否启用。默认情况下,Button是启用的,除非有disabled="disabled"

示例

<button id="button" type="button">Foo</button>
<script>
$("#button").kendoButton({
enable: false
});
</script>

icon |String

定义Kendo UI中当前图标的名称。图标会作为Button内的一个span元素应用到背景图中,span元素可以自动被组件添加;也可以通过k-icon CSS类添加。icon图标名称请查看icon demo

示例

<button id="button" type="button">Cancel</button>
<script>
$("#button").kendoButton({
icon: "cancel"
});
</script>

示例-有span元素

<button id="button" type="button">
<span class="k-icon"></span> Cancel
</button>
<script>
$("#button").kendoButton({
icon: "cancel"
});
</script>

imageUrl | String

定义用于Button中的img元素的URL。URL可以是相对地址,也可是是绝对地址。img元素可以由组件自动添加,也可以用CSS类k-image。

示例

<button id="button" type="button">Edit</button>
<script>
$("#button").kendoButton({
imageUrl: "/images/edit-icon.gif"
});
</script>

示例-使用CSS类

<button id="button" type="button">
<img class="k-image" alt="Edit" /> Edit
</button>
<script>
$("#button").kendoButton({
imageUrl: "/images/edit-icon.gif"
});
</script>

spriteCssClass | String

定义一个或多个CSS类,这些类会应用到Button中的背景图片中。如果你想使用Kendo UI主题中的图表,最好是使用icon属性。

span元素既可以自动由组件添加,也可以引用k-sprite CSS类。

示例

<button id="button" type="button">Edit</button>
<script>
$("#button").kendoButton({
spriteCssClass: "myEditIcon"
});
</script>

示例-应用CSS类

<button id="button" type="button">
<span class="k-sprite"></span> Edit
</button>
<script>
$("#button").kendoButton({
spriteCssClass: "myEditIcon"
});
</script>

Methods


enable

启用或禁用Button。

参数

toggle Boolean 表示Button是禁用还是启用,支持Truthy 和 falsy 算法,如果没有应用算法,Button会默认true。

示例

<button id="button" type="button">Edit</button>
<script>
$("#button").kendoButton();
var button = $("#button").data("kendoButton");
// disable button
button.enable(false);
// enable button
button.enable(true);
</script>

Events


click

当Button由鼠标、触摸设备或键盘Enter(或空格键)触发时,会应用这个事件。

Event Data

e.event Object 最初的DOM事件

示例-初始化期间触发"click"事件

<button id="button" type="button">Edit</button>
<script>
$("#button").kendoButton({
click: function(e) {
alert(e.event.target.tagName);
}
});
</script>

示例-初始化之后触发"click"事件

<button id="button" type="button">Edit</button>
<script>
$("#button").kendoButton();
var button = $("#button").data("kendoButton");
button.bind("click", function(e) {
alert(e.event.target.tagName);
});
</script>
慧都特邀Kendo UI原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui线下培训



标签:APIKendoUI

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

Kendo UI Mobile

使用HTML5和JavaScript快速开发跨平台原生移动应用程序的移动应用程序框架

Kendo UI DataViz

跨平台跨设备的数据可视化组件

Kendo UI Server Wrappers

帮助你开发基于Kendo UI的出色的HTML5应用程序,并且无需亲自编写JavaScript。

Kendo UI Core

Kendo UI Core是Kendo UI的开源免费版,是HTML5构架下的用于网络和移动开发的工具。

Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat