jQuery UI Switch类

jQuery UI Switch类是一个基于jQuery UI的扩展，用于创建可操作的开关按钮。

用法

Switch类可通过以下方式使用：

1. 引用jQuery库和jQuery UI库及Switch类文件（.js和.css文件）。

2. 创建一个HTML标签并为其添加“switch”类及所需的其他类。例如：

   <label class="switch">
     <input type="checkbox">
     <span class="slider"></span>
   </label>
   

3. 初始化Switch类，选取HTML标签并调用.switch()方法，如下所示：

   $('.switch').switch();
   

选项

以下是可用选项及其默认值：

{
  checked: false, // 初始是否选中
  disabled: false, // 是否禁用
  size: 'normal', // 按钮大小，可选值：small、normal、large
  onLabel: 'ON', // 开启状态标签
  offLabel: 'OFF', // 关闭状态标签
  handleWidth: 'auto', // 滑块宽度，可选值：'auto'、数字（表示像素）
  labelWidth: 'auto', // 状态标签宽度，可选值：'auto'、数字（表示像素）
  onChange: function(){} // 状态改变时调用的函数
}

方法

以下是可用方法：

enable()

启用开关。

disable()

禁用开关。

setChecked(state)

设置开关状态为true（开）或false（关）。

isChecked()

返回当前开关状态。

toggle()

切换开关状态。

事件

以下是可用的事件：

switchChange(event, isChecked)

当开关状态改变时触发。isChecked参数表示当前状态。

示例

$('.switch').switch({
  size: 'large',
  onLabel: 'Available',
  offLabel: 'Busy',
  labelWidth: 80,
  onChange: function(){
    console.log('The switch state changed to ' + this.isChecked());
  }
});

结束语

jQuery UI Switch类是一个功能强大且易于使用的插件，可轻松创建可操作的开关按钮，从而为Web应用程序提供更好的用户体验。