最近遇到的一个 Web 项目,页面上需要用类似 toggle 的开关。由于整个前端是用 bootstrap 搭建起来的,我选择了用 bootstrap-switch 做这个开关。
样子大概如上图所示。
想要的功能呢,就是当它在 on 的时候,就把对应的设置项打开,当它在 off 的时候,就把对应的设置项关闭。
所以,每次前端改变了这个 switch 的值,就得向服务器发送 Ajax 请求,做相应的事情,如果成功,则开关切换是正确的;如果失败,则开关切换是错误的,要回滚。
由于 bootstrap-switch 的一些示例页面是 https 的,但又引入了 http 的静态资源(css/js/img),所以网上很多示例页面没法直接查看,只能下载下来在本地查看。我后来找到了一个能看的方法:
把它的代码 clone 到本地,浏览器打开 doc 目录
以下是在 stackoverflow 找到的可以把 Ajax 加进去的代码:
$("input.switch-input").on('change.bootstrapSwitch', function(e){
if($(this).is