本節為大家介紹 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圖標名稱請查看

示例

<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原廠開發工程師舉行線上公開課，使用該控件的朋友千萬別錯過哦>>