入門指南

---

立即下載Kendo UI for jQuery

本指南演示了如何啟動和運行Kendo UI for jQuery Button。

完成本指南后，您將能夠達到以下最終結果：

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

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

預覽：

1.創建一個選擇元素

首先，在將初始化button組件的頁面上創建一個<button>元素。

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

2.初始化Button

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

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

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

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

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

3.添加圖標

通過配置按鈕，可以在按鈕中顯示圖標。有關該按鈕支持的各種圖標的詳細信息，請參閱有關圖標按鈕的文章。

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

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

4.在button中添加Badge

現在您可以在Button上顯示badge元素。

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

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