入門指南

---

立即下載Kendo UI for jQuery

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

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

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

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

預(yù)覽：

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

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

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

2.初始化Button

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

在這一步中您將從&lt; Button >元素初始化Button，初始化組件時Button的所有設(shè)置都將在腳本語句中提供，請用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.添加圖標(biāo)

通過配置按鈕，可以在按鈕中顯示圖標(biāo)。有關(guān)該按鈕支持的各種圖標(biāo)的詳細信息，請參閱有關(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>