极客教程EasyUI jQuery开关按钮小部件
EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。
在这篇文章中，我们将学习如何使用jQuery EasyUI设计开关按钮。开关按钮有两个部分：”开””关”。用户可以单击或点击来切换开关
EasyUI for jQuery的下载：
https://www.jeasyui.com/download/index.php
语法:
<div class="switchbutton">
</div>
属性:
- width: 开关按钮的宽度
- height。开关按钮的高度
- handleWidth：开关按钮中心手柄的宽度。
- checked:定义按钮是否被选中
- disabled:定义了是否禁用该按钮
- readonly（只读）。定义该按钮是否为只读
- reversed：设置为真，onText值和offText值将切换它们的位置
- onText。左边的文本值。
- offText。右侧的文本值
- handleText。中心手柄的文本值。
- value。绑定在按钮上的默认值。
事件:
- onChange:当选中的值发生变化时启动
方法:
- options。返回选项对象
- resize。调整开关按钮的大小
- disable:禁用开关按钮
- Enable。启用开关按钮
- readonly:启用/禁用只读模式
- check。检查开关按钮
- uncheck。取消对开关按钮的检查
- clear: 清除开关按钮的 “检查 “值
- reset:重置开关按钮的 “检查 “值
- setValue。设置开关按钮的值
CDN链接：首先，添加你的项目需要的jQuery Easy UI脚本。
<script type=”text/javascript” src=”jquery.min.js”>
</script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”>
</script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”>
</script>
示例 1:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet" type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet" type="text/css"
href="themes/mobile.css">
<link rel="stylesheet" type="text/css"
href="themes/icon.css">
<!--jQuery library -->
<script type="text/javascript" src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<!--jQuery library of EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
<script type="text/javascript">
(document).ready(function (){
('#gfg').switchbutton({
disabled: true
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>EasyUI jQuery switchbutton widget</h3>
<input id="gfg" class="easyui-switchbutton">
</body>
</html>
输出:
