界面控件Kendo UI for jQuery 2024 Q1亮点 - 新的ToggleButton组件
<!DOCTYPE html>
<html>
<head>
<title>Kendo UI for jQuery Q1 2024 Release Highlights - New ToggleButton Component</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2024.1.221/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2024.1.221/styles/kendo.silver.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2024.1.221/js/kendo.all.min.js"></script>
</head>
<body>
<button id="toggleButton">Toggle</button>
<script>
// 初始化ToggleButton组件
$("#toggleButton").kendoToggleButton({
text: {
on: "开",
off: "关"
},
checked: true
});
// 监听切换事件
$("#toggleButton").on("change", function(e) {
console.log("ToggleButton状态改变：" + e.checked);
// 这里可以添加自定义逻辑处理
});
</script>
</body>
</html>这个示例展示了如何在HTML页面中引入Kendo UI for jQuery库，并初始化一个ToggleButton组件。ToggleButton组件有两种状态（开启和关闭），可以通过点击按钮进行切换，并且可以监听其状态改变的事件。
评论已关闭