吞吴

我个人非常喜欢iOS系统中的开关按钮效果。相比于普通的checkbox，这种带有滑动效果的开关按钮显得更加美观，体验也更好。刚好最近在开发围脖贴，于是想在一些要用到checkbox的页面中使用类似iPhone/iPod/iPad中的开关按钮效果。

当然首先是寻找现成的实现，可能是我太土鳖了，不知道这个东西叫做 toggle switch，结果一直搜 toggle button，得到的结果都不是我想要的。于是索性自己实现了一个。（效果，Github Repo）

下面简单记录一下实现的思路。

背景动画

实现的重点在状态的切换过程，需要产生一个平滑的滑动效果。于是我想，制作一个左侧是开启，右侧是关闭的图片，作为背景，然后在切换的时候给背景做一个动画。于是产生了下图。

为背景作动画用到了Backgroud-Position Animation Plugin。仅使用一个开启/关闭联合起来的图是不够的，因为按钮有一个圆角，如果始终使用联合图的话，在一个开启状态下，右上角和右下角会显示灰色，在关闭状态下，左上角和左下角会显示蓝色，很不自然。所以，需要在动画结束后，把背景切换到单独的开启/关闭按钮的位置。

状态保存

考虑到这个开关按钮基本是放在一个form里面用的，因此使用一个hidden的input元素来保存它的状态。每次开关被单击，就改变input的值。这样以来，就很容易把开关状态通过表单提交到后台。

自定义事件

很多时候需要根据开关按钮的状态进行编程，因此添加了两个自定义事件 on 和 off，分别表示按钮被开启和关闭。可以使用jQuery的bind方法来添加事件处理函数。

成果

感兴趣的童鞋，可以 点击这里查看效果，或者在这里下载。

No related posts.