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);
    });
时间: 2024-11-05 22:32:06

flat ui switch 改变状态而不响应事件的相关文章

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

主要是检测android通知栏的三种状态的响应事件 这次在实现推送需求的时候,要用到android通知栏Notification点击后进入消息页面,因为要实现一个保存推送用户名字的功能,我在点击后处理了这个功能,但是测试发现我点击删除或者滑动清除后这个功能并没有执行,所以才意识到要处理删除和滑动清除的事件: 首先实现一个BroadcastReceiver public class NotificationBroadcastReceiver extends BroadcastReceiver {

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

给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态,所以我就把jquery对象转换为DOM对象,怎么转呢?jquery对象[0]或者get(0)就转换成DOM对象,然后直接.checked返回true或false就可以判断checkbox是否选中了.然后判断状

C# winform datagridview 内嵌控件值改变后立即触发事件,而不需要离开该单元格时才触发,此时需要用到dgv_CurrentCellDirtyStateChanged事件

以下是参考代码 //datagridview内嵌控件值修改事件 private void dgv_CurrentCellDirtyStateChanged(object sender, EventArgs e) { if (dgv.IsCurrentCellDirty) { dgv.CurrentCellDirtyStateChanged -= dgv_CurrentCellDirtyStateChanged; dgv.CommitEdit(DataGridViewDataErrorContex

HTTP状态码(响应码)

HTTP状态码(响应码)用来表明HTTP请求是否已经成功完成.HTTP响应类型一共分五大类:消息响应,成功响应,重定向,客户端错误,服务器端错误. 下表列出了所有HTTP状态码,以及他们各自所代表的含义: 状态码 原因短语 代表含义 HTTP 版本 消息响应 100 Continue(继续) 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应.服务器必须在请求完成后向客户端发送一个最

iOS:利用代码UIBarButtonItem如何响应事件?

在storyboard中,可以通过拖拽的方法响应事件. 如果是纯代码构建的UI,UIBarButtonItem 无法调用 addTarget: action: forControlEvents: 这个方法. 如下图所示,用代码创建的left按钮: 我想让导航栏中的『left』响应事件. 网上搜了一大堆方法,都好繁琐. 刚才奇思妙想试了一下,没想到居然可以╰( ̄▽ ̄)╮ 只写了两行代码: 1 left.target = self; 2 left.action = @selector(myMetho

1、Flat UI Getting started(文档翻译)

下载链接:http://www.bootcss.com/p/flat-ui/ 一.什么是Flat UI? Flat UI 是一种漂亮的Boostrap主题.我们重新设计了它的很多组件,使得其看起来扁平化. 其中的大部分组件,都是用起来很简单的.但是,为了确保其中一些组件外观和我们想要的一样,我们最终使用了一些JS插件.这意味着,需要一点努力来将它们整合到你的项目中去. 二.如何使用Flat UI? 由于Flat UI是建立在Bootstrap上层的一个主题,你可以在你的Bootstrap3项目中

胡博君收集JS中的响应事件

onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown IE4.N4 按下鼠标时触发此事件 onmouseup IE4.N4 鼠标按下后松开鼠标时触发此事件 onmouseover IE3.N2 当鼠标移动到某对象范围的上方时触发此事件 onmousemove IE4.N4 鼠标移动时触发此事件 onmouseout IE4.N3 当鼠标离开某对象范围时触发此事件 onkeypress IE4.N4 当键盘上的某个键被

输入坐标和输出坐标——图片框上动态加载按钮及响应事件

在实际的项目中总会遇到一些需要动态加载一些控件,并且加载控件的响应事件的代码.现在写一个简单的例子,主要说一下里面的一些关键点:使用鼠标在窗体上的图片框中动态的添加按钮 .动态的去加载事件,肯定是需要使用对象类动态的生成,动态事件,必须要使用委托去实现.还有一个就是"动态"的实现过程,打算鼠标点下去,在鼠标单击的位置添加上按钮. 环境:Visual Studio 2010, .Net FrameWork 3.5 private void pictureBox1_MouseDown(ob

[UI]Flat UI - Free Boorstrap Framework and Theme

---------------------------------------------------------------------------------------------------------- Flat UI Free - Design Framework (html/css3/less/js). Flat UI is based on Bootstrap, a comfortable, responsive, and functional framework that si