本节为大家介绍 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。

参数

示例

<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

示例-初始化期间触发"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原厂开发工程师举行线上公开课，使用该控件的朋友千万别错过哦>>查看详情