EasyUI jQuery 开关按钮小部件

EasyUI jQuery 开关按钮小部件是一个易于使用和高度可定制的 jQuery 插件，可用于在网页上添加开关按钮。这个小部件可以让用户在页面上快速切换某些设置，比如打开或关闭某些功能。你可以使用此插件来实现开关按钮的样式和功能。

特性

• 适用于各种设备和浏览器。
• 可以设置不同的开/关文本和颜色。
• 提供了多个事件用于自定义开关的行为。
• 支持键盘导航和鼠标滚轮调整。
• 可以配置为只读状态。
• 可以用JavaScript控制开关状态，也可以用HTML标签设置默认状态。

安装

要使用 EasyUI jQuery 开关按钮小部件，在你的项目中引入 jQuery 和 EasyUI 的 JavaScript 和 CSS 文件。

<!-- include the jQuery library (local or from a CDN) -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- include the EasyUI library (local or from a CDN) -->
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

<!-- include the EasyUI switch widget -->
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/plugins/switchbutton/jquery.switchbutton.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/plugins/switchbutton/jquery.switchbutton.js"></script>

使用

创建一个 HTML 元素，然后调用 switchbutton() 方法即可创建一个开关按钮。

<!-- HTML -->
<input id="mySwitch" type="checkbox"/>

<!-- JavaScript -->
$('#mySwitch').switchbutton();

在上面的例子中，我们创建了一个开关按钮并将其绑定到了名为“mySwitch”的 HTML 元素上。

你也可以通过传递一个对象来配置开关按钮。

$('#mySwitch').switchbutton({
    checked: true,
    onText: '开',
    offText: '关',
    onChange: function(checked){
        console.log('开关状态改变了：' + checked);
    }
});

在上面的例子中，我们将开关按钮的默认状态设置为打开，开关状态文本设置为“开”和“关”，并为改变开关状态时触发一些代码设置了一个事件处理程序。

选项

EasyUI jQuery 开关按钮小部件提供了许多选项，你可以用它们来自定义开关按钮的样式和功能。下面是一些可用的选项：

• checked：bool 表示开关按钮的默认状态。默认为 false。
• disabled：bool 表示开关按钮的只读状态。默认为 false。
• handleWidth：number 表示开关按钮的手柄的宽度（单位：像素）。默认为 22。
• height：number 表示开关按钮的高度（单位：像素）。默认为 24。
• offText：string 表示开关按钮关闭状态的文本。默认为 “OFF”。
• onText：string 表示开关按钮打开状态的文本。默认为 “ON”。
• readonly：bool 表示开关按钮的只读状态。默认为 false。
• reversed：bool 表示反转开关状态。默认为 false。
• value：bool 表示开关按钮的值。默认为 false。
• width：number 表示开关按钮的宽度（单位：像素）。默认为 50。
• onChange：function 开关按钮发生改变时的回调函数。
• onLoadSuccess：function 开关按钮加载完毕时的回调函数。
• onLoadError：function 开关按钮加载失败时的回调函数。

事件

EasyUI jQuery 开关按钮小部件提供了多个事件，你可以使用它们来自定义开关按钮的行为。下面是一些可用的事件：

• onBeforeLoad：在数据加载之前触发。
• onLoadSuccess：数据加载成功时触发。
• onLoadError：数据加载失败时触发。
• onChange：当开关状态改变时触发。
• onClick：当单击按钮时触发。
• onFocus：当焦点移到按钮上时触发。
• onBlur：当焦点移出按钮时触发。
• onMouseDown：当鼠标按下按钮时触发。
• onMouseUp：当释放鼠标按钮时触发。
• onMouseEnter：当鼠标进入按钮时触发。
• onMouseLeave：当鼠标离开按钮时触发。
• onResize：当调整大小时触发。

结论

EasyUI jQuery 开关按钮小部件是一个出色的 jQuery 插件，能够让你在网页上添加易于使用和高度可定制的开关按钮。它提供了许多选项和事件，使你可以轻松地自定义开关按钮的样式和行为。如果你正在寻求一种可靠的方法在网页上添加开关按钮，那么 EasyUI jQuery 开关按钮小部件就是一个很好的选择。