入门指南

---

立即下载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>