随笔- 250  评论- 66  文章- 3 

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);
    });

 

posted on 2015-01-31 11:35  Still_Raining  阅读(3771)  评论(0编辑  收藏