kendo ui资源合集
当前位置: 首页 > 使用教程

Kendo UI API中文介绍三:Button

发布时间:2018-02-06

本节为大家介绍 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原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情