入門指南

---

立即下載Kendo UI for jQuery

本指南演示了如何啟動(dòng)和運(yùn)行Kendo UI for jQuery Button。

完成本指南后，您將能夠達(dá)到以下最終結(jié)果：

<button id="btn">My Button</button>

<script> 
$("#btn").kendoButton({
icon: "pencil",
badge: {
text: "!Note", 
themeColor: "warning",
shape: "circle"
}
});
</script>

預(yù)覽：

1.創(chuàng)建一個(gè)選擇元素

首先，在將初始化button組件的頁(yè)面上創(chuàng)建一個(gè)<button>元素。

<button id="btn">My Button</button>

2.初始化Button

雖然您可以使用任何元素和任何內(nèi)容初始化button，但直觀的做法是使用button或a元素。當(dāng)您在表單中使用button元素時(shí)，按鈕的默認(rèn)type HTML屬性是submit，單擊按鈕將提交表單并重新加載頁(yè)面。要改變這種行為，可以使用顯式的type="button" HTML屬性。

在這一步中您將從< Button >元素初始化Button，初始化組件時(shí)Button的所有設(shè)置都將在腳本語(yǔ)句中提供，請(qǐng)用JavaScript描述它的配置和事件處理程序。

<button id="btn">My Button</button>

<script>
// Target the button element by using jQuery and then call the kendoButton() method.
$("#btn").kendoButton();
</script>

完成基本初始化后，可以開(kāi)始向Button添加其他配置。

3.添加圖標(biāo)

通過(guò)配置按鈕，可以在按鈕中顯示圖標(biāo)。有關(guān)該按鈕支持的各種圖標(biāo)的詳細(xì)信息，請(qǐng)參閱有關(guān)圖標(biāo)按鈕的文章。

<button id="btn">My Button</button>

<script> 
$("#btn").kendoButton({
icon: "pencil"
});
</script>

4.在button中添加Badge

現(xiàn)在您可以在Button上顯示badge元素。

<button id="btn">My Button</button>

<script> 
$("#btn").kendoButton({
icon: "pencil",
badge: {
text: "!Note", 
themeColor: "warning",
shape: "circle"
}
});
</script>