本節(jié)為大家介紹 kendo.ui.Button，包括4個(gè)Configuration、1個(gè)Methods和1個(gè)Events。

>>Kendo UI Professional下載

Configuration

enable | Boolean(default: true)

用于決定Button是否啟用。默認(rèn)情況下，Button是啟用的，除非有disabled="disabled"

示例

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

icon |String

定義Kendo UI中當(dāng)前圖標(biāo)的名稱。圖標(biāo)會(huì)作為Button內(nèi)的一個(gè)span元素應(yīng)用到背景圖中，span元素可以自動(dòng)被組件添加；也可以通過(guò)k-icon CSS類添加。icon圖標(biāo)名稱請(qǐng)查看

示例

<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可以是相對(duì)地址，也可是是絕對(duì)地址。img元素可以由組件自動(dòng)添加，也可以用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

定義一個(gè)或多個(gè)CSS類，這些類會(huì)應(yīng)用到Button中的背景圖片中。如果你想使用Kendo UI主題中的圖表，最好是使用icon屬性。

span元素既可以自動(dòng)由組件添加，也可以引用k-sprite CSS類。

示例

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

示例-應(yīng)用CSS類

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

Methods

enable

啟用或禁用Button。

參數(shù)

示例

<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

當(dāng)Button由鼠標(biāo)、觸摸設(shè)備或鍵盤Enter(或空格鍵)觸發(fā)時(shí)，會(huì)應(yīng)用這個(gè)事件。

Event Data

示例-初始化期間觸發(fā)"click"事件

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

示例-初始化之后觸發(fā)"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原廠開發(fā)工程師舉行線上公開課，使用該控件的朋友千萬(wàn)別錯(cuò)過(guò)哦>>