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 改变状态而不响应事件的更多相关文章

  1. android通知栏Notification点击,取消,清除响应事件

    主要是检测android通知栏的三种状态的响应事件 这次在实现推送需求的时候,要用到android通知栏Notification点击后进入消息页面,因为要实现一个保存推送用户名字的功能,我在点击后处理 ...

  2. 点击tr实现选择checkbox功能,点击checkobx的时候阻止冒泡事件, jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态

    给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给c ...

  3. 微信公众号开发C#系列-8、自定义菜单及菜单响应事件的处理

    1.概述 自定义菜单能够帮助公众号丰富界面,让用户更好更快地理解公众号的功能.菜单分为默认菜单与个性化菜单.个性化菜单接口是为了帮助公众号实现灵活的业务运营,开发者可以通过该接口,让公众号的不同用户群 ...

  4. OpenGL(十六) 鼠标、键盘交互响应事件

    OpenGL中通过鼠标和键盘跟程序交互的实现需要实现注册鼠标和键盘响应事件,在一定条件下,该事件被触发,事件里的程序被执行,达到交互的目的. 通过glutMouseFunc(&OnMouse) ...

  5. unity 3D物体使用EventSystem响应事件

    在ugui中创建一个canvas 之后会自动创建一个EventSystem,用来处理UI上的时间响应.(可以通过UI>EventSystem创建EventSystem) EventSystem ...

  6. 小程序框架之视图层 View~事件系统~WXS响应事件

    WXS响应事件 基础库 2.4.4 开始支持,低版本需做兼容处理. 背景 有频繁用户交互的效果在小程序上表现是比较卡顿的,例如页面有 2 个元素 A 和 B,用户在 A 上做 touchmove 手势 ...

  7. OpenGL 鼠标交互响应事件

    OpenGL 鼠标.键盘交互响应事件 先来一个样例: uses gl,glu,glut; procedure InitEnvironment;cdecl; begin glClearColor();/ ...

  8. 「iOS造轮子」之UIButton 用Block响应事件

    俗语说 一个不懒的程序员不是好程序员 造轮子,也只是为了以后更好的coding. coding,简易明了的代码更是所有程序员都希望看到的 无论是看自己的代码,还是接手别人的代码 都希望一看都知道这代码 ...

  9. HTTP状态码(响应码)

    HTTP状态码(响应码)用来表明HTTP请求是否已经成功完成.HTTP响应类型一共分五大类:消息响应,成功响应,重定向,客户端错误,服务器端错误. 下表列出了所有HTTP状态码,以及他们各自所代表的含 ...

随机推荐

  1. eAccelerator介绍

    加速器 eAccelerator是一个自由开放源码php加速器,优化和动态内容缓存,提高了php脚本的缓存性能,使得PHP脚本在编译的状态下,对服务器的开销几乎完全消除. 它还有对脚本起优化作用,以加 ...

  2. java内存模型及分块

    转自:http://www.cnblogs.com/BangQ/p/4045954.html 1.JMM简介 2.堆和栈 3.本机内存 4.防止内存泄漏   1.JMM简介   i.内存模型概述 Ja ...

  3. IIS7报错:如果要使用托管的处理程序,请安装 ASP.NET

    转载至码农SeraphWU IIS7报错:如果要使用托管的处理程序,请安装 ASP.NET 进入CMD 输入如下命令即可 "%WINDIR%\Microsoft.NET\Framework\ ...

  4. js setInterval和clearInterval 的使用

    setInterval(函数名, 时间);   函数名:不需要加括号:  时间:单位是毫秒: 例子: var inter= setInterval(searchTasksByCnd, 10 * 100 ...

  5. 2.Oracle11g体系结构

    2.1逻辑存储结构 2.1.1数据块(Data Blocks) 数据块是Oracle逻辑结构中最小的逻辑单位,也是执行数据库输入输出最小的存储单位.通常Oracle数据库是操作系统块的整数倍,如果操作 ...

  6. java静态代理,动态代理,cglib代理

    代理模式在我们的应用中是很常见的,例如拦截器,spring的事务管理等.之所以能被代理,是因为java允许我们通过反射机制动态构造目标对象,并调用相应的方法. 就好像拿到了目标对象的引用,自然可以在目 ...

  7. Windows phone常用控件之Button

    Button类:表示一个响应 ButtonBase.Click 事件的 Windows 按钮控件. 继承层次结构: 命名空间:    System.Windows.Controls ClickMode ...

  8. 从内部剖析C#集合之HashTable

    计划写几篇文章专门介绍HashTable,Dictionary,HashSet,SortedList,List 等集合对象,从内部剖析原理,以便在实际应用中有针对性的选择使用. 这篇文章先介绍Hash ...

  9. django基本命令备忘录

    1. 新建一个 django project django-admin.py startproject project-name 新建 app python manage.py startapp ap ...

  10. 零售POS开发

    零售POS系统是一款基于离线与在线两种模式的POS系统,能够将门店的销售数据及时准确的同步到企业服务器.离线模式操作更加快捷.稳定.高效:在线操作实时同步会员信息.查看库存.下载最新档案.公文公告等一 ...