首页 > 代码库 > flat ui switch 改变状态而不响应事件
flat ui switch 改变状态而不响应事件
Flat UI 是一套精美的扁平风格 UI 工具包，基于 Twitter Bootstrap 实现。这套界面工具包含许多基本的和复杂的 UI 部件，例如按钮，输入框，组合按钮，复选框，单选按钮，标签，菜单，进度条和滑块，导航元素等等。
对于我们这些不会前端的小码农来说，是绝对的神器。
但也正是因为不了解前端，所以哪怕是丁点的问题，对我们来说都是痛不欲生。
这次让我痛不欲生的便是flat ui的switch组件。
该组件是用来替代 checkbox 的组件, 关于它的用法，可以参见这里。
switch有两种状态，开启和关闭
组件如图所示:
对于该组件的初始化、响应事件可以这样写:
$(‘#forFriend‘).on({ ‘init.bootstrapSwitch‘: function() {
$(‘#forFriend‘).bootstrapSwitch("state", true); }, ‘switchChange.bootstrapSwitch‘: function(event, state) { // 按钮状态发生改变 } });
这样，就可以在加载完页面后对 switch 动态初始化值、并对switch组件状态切换事件进行响应。
想要对switch动态初始化，还需要一个条件，初始化switch状态时，不应该响应switch状态切换事件。
上面的代码是做不到这一点的，为了能够做到，必须想一些办法，即使用代码改变swtch状态和用户改变switch状态有什么不同呢？答案是焦点。
当用户点击switch时，switch组件获得焦点; 相反的，如果使用代码改变swith组件时，焦点不能在switch上。通过这样判断方法就可以实现“随心所欲”的选择是否响应switch切换事件。
简单来写就是这样:
$(‘#switch‘).on({ ‘init.bootstrapSwitch‘: function() { $("#switch").bootstrapSwitch("state", state);// 初始化状态 }, ‘switchChange.bootstrapSwitch‘: function(event, state) { // 如果没有焦点，证明不是用户触发的, 不做任何处理 if ($("#switch").is(":focus") == false) return; // 处理 } });
我们可能还有一些需求，比如当用户开启switch时，弹出模态框，提示是否要开启，如果确认，则开启switch，否则不开启。
用户关闭模态框的方法有很多，可以选择右上角的关闭按钮、可以单击返回、可以点击确认，甚至是按下esc或者点击模态框以外的区域
模态框如图所示:
关闭方法很多，但除了点击确认外，其他的所有关闭模态框都认为拒绝 开启switch。
代码如下:
$(‘#switch‘).on({ ‘init.bootstrapSwitch‘: function() { // 确保一开始焦点不在switch上 var state = true; // 从服务器获取按钮状态 $("#switch").bootstrapSwitch("state", state);// 初始化状态 }, ‘switchChange.bootstrapSwitch‘: function(event, state) { // 如果没有焦点，证明不是用户触发的, 不做任何处理 if ($("#switch").is(":focus") == false) return; if (state == true) { // 如果状态为 on, 需要开启模态框 // 让其失去焦点，这时使用代码改变按钮状态就不会触发事件 $("#switch").blur(); // 防止模态框意外关闭，先设置按钮的状态为关闭 $("#switch").bootstrapSwitch("state", false); // 弹出模态框 $("#modal-switch").modal({backdrop: ‘static‘, keyboard: false}); } else { // 如果当前状态为off // 处理 } } }); // 单击了模态框中的确定按钮 $(‘#modal-switch-confirm‘).click(function () { // 处理 ... // 处理成功改变 switch 状态 $("#switch").bootstrapSwitch("state", true); });
flat ui switch 改变状态而不响应事件