jQuery Mobile Flipswitch 创建事件

jQuery Mobile是一款基于jQuery核心库构建的轻量级移动端UI框架，能够方便快捷的开发出优美的移动端网站和APP。jQuery Mobile Flipswitch是一款开关按钮插件，拥有良好的用户交互体验和动效。本文就介绍如何通过jQuery Mobile Flipswitch创建事件。

Flipswitch基本用法

首先来介绍一下Flipswitch的基本用法。

在您的html文件中加入以下代码即可，其中id属性值为flip-1：

<label for="flip-1">Flipswitch:</label>
<select name="flip-1" id="flip-1" data-role="flipswitch">
  <option value="Off">Off</option>
  <option value="On">On</option>
</select>

这里的label标签是用来描述该Flipswitch控件的，for属性值需与后面select标签的id属性值保持一致，data-role属性值设为flipswitch表示使用Flipswitch插件。option标签中value属性值即为Flipswitch控件的开关状态。

将上述代码放入你的html文件并运行后，就可以看到一个Flipswitch控件，通过点击可以切换开关选择。

Flipswitch创建事件

要为Flipswitch创建事件，需要使用jQuery Mobile的事件处理机制。

可以通过以下代码来为Flipswitch添加change事件：

$(document).on("change", "#flip-1", function() {
  if($(this).val() == "On"){
    //开关打开的处理
  } else{
    //开关关闭的处理
  }
});

以上代码中，我们为整个document文档添加了change事件，当 并且只当Flipswitch控件的值变化时触发该事件。如果当前开关为打开状态，就会执行代码块中的开关打开的处理;如果当前开关为关闭状态，就会执行代码块中的开关关闭的处理。

代码片段

# jQuery Mobile Flipswitch 创建事件

jQuery Mobile是一款基于jQuery核心库构建的轻量级移动端UI框架，能够方便快捷的开发出优美的移动端网站和APP。jQuery Mobile Flipswitch是一款开关按钮插件，拥有良好的用户交互体验和动效。本文就介绍如何通过jQuery Mobile Flipswitch创建事件。

## Flipswitch基本用法

首先来介绍一下Flipswitch的基本用法。

在您的html文件中加入以下代码即可，其中id属性值为flip-1：

```html
<label for="flip-1">Flipswitch:</label>
<select name="flip-1" id="flip-1" data-role="flipswitch">
  <option value="Off">Off</option>
  <option value="On">On</option>
</select>
```

这里的label标签是用来描述该Flipswitch控件的，for属性值需与后面select标签的id属性值保持一致，data-role属性值设为flipswitch表示使用Flipswitch插件。option标签中value属性值即为Flipswitch控件的开关状态。

将上述代码放入你的html文件并运行后，就可以看到一个Flipswitch控件，通过点击可以切换开关选择。

## Flipswitch创建事件

要为Flipswitch创建事件，需要使用jQuery Mobile的事件处理机制。

可以通过以下代码来为Flipswitch添加change事件：

```javascript
$(document).on("change", "#flip-1", function() {
  if($(this).val() == "On"){
    //开关打开的处理
  } else{
    //开关关闭的处理
  }
});
```

以上代码中，我们为整个document文档添加了change事件，当 并且只当Flipswitch控件的值变化时触发该事件。如果当前开关为打开状态，就会执行代码块中的开关打开的处理;如果当前开关为关闭状态，就会执行代码块中的开关关闭的处理。