EasyUI jQuery 开关按钮小部件

EasyUI jQuery 开关按钮小部件是一个方便且易于使用的小部件，它能够让用户在一个开关按钮上切换状态。

这个小部件允许用户设置各种属性，包括按钮的大小、颜色、标签等。同时，它还支持一些事件，如 onBeforeToggle、onToggle 等等，用户可以对这些事件进行特定的处理和操作。

使用说明

1. 引入 easyui.css 和 easyui.js 文件。

   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.5/themes/default/easyui.css">
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.5/themes/icon.css">
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.5/jquery.easyui.min.js"></script>
   

2. 在需要使用开关按钮的地方添加以下代码：

   <input id="switch" type="checkbox" class="easyui-switchbutton" data-options="
     onText:'On',
     offText:'Off',
     checked:true,
     width:50,
     height:26
   ">
   

3. 在 JS 文件中进行初始化和事件绑定：

   $('#switch').switchbutton({
     onBeforeToggle: function(checked) {
       // do something before toggle
     },
     onToggle: function(checked) {
       // do something after toggle
     }
   });
   

属性列表

以下是可以被设置的属性和默认值：

| 属性 | 默认值 | 描述 | | --- | --- | --- | | onText | 'On' | 按钮打开时的标签 | | offText | 'Off' | 按钮关闭时的标签 | | checked | false | 按钮初始状态 | | width | 60 | 按钮宽度 | | height | 26 | 按钮高度 | | disabled | false | 禁用按钮 | | readonly | false | 只读模式 | | handleWidth | 'auto' | 按钮开关的大小 | | handleText | null | 开关的标签，如果不设置，将显示 onText/offText | | value | null | 按钮的 value | | name | null | 按钮的 name | | checkedLabel | null | 选中时的 label | | uncheckedLabel | null | 未选中时的 label |

事件列表

以下是可以被绑定的事件和默认值：

| 事件 | 参数 | 描述 | | --- | --- | --- | | onBeforeToggle | checked | 鼠标点击按钮前事件 | | onToggle | checked | 鼠标点击按钮后事件 |

示例

以下是一个基本的开关按钮示例：

<input id="switch" type="checkbox" class="easyui-switchbutton" data-options="
  onText:'On',
  offText:'Off',
  checked:true,
  width:50,
  height:26
">

以下是一个基本的事件绑定示例：

$('#switch').switchbutton({
  onBeforeToggle: function(checked) {
    console.log('Before toggle:', checked);
  },
  onToggle: function(checked) {
    console.log('After toggle:', checked);
  }
});

结论

EasyUI jQuery 开关按钮小部件是一个非常简单、方便以及易于使用的小部件，使用它可以让用户在一个开关按钮上切换状态。同时，它还提供了各种属性和事件，为用户提供了更多的操作和处理方式。