打造个性化的功能强大的Jquery虚拟键盘(VirtualKe(2)

  按照这个思路,我重新研究加载代码,发现输入法加载的JS是在Jsvk\jscripts\layouts\layouts.js中定义的。于是果断删除多余的选项,只留下了Chinese Simpl. Pinyin和US两个选项。改完后的效果图如下,只有中文和英文两个选项,清爽多了。

打造个性化的功能强大的Jquery虚拟键盘(VirtualKe

这还不是我想要的!

  中英文切换实现了,但操作还不够便捷,我需要的是一键切换,为什么不在键盘中增加一个切换键呢?

  首先找到皮肤文件,\Jsvk\jscripts\css\flat_gray\button_set.png,我要自己动手加个按键!

原图:

打造个性化的功能强大的Jquery虚拟键盘(VirtualKe

 

修改后:

打造个性化的功能强大的Jquery虚拟键盘(VirtualKe

  只改图片肯定不够,按钮定位在样式表里,继续修改样式表!在样式表\Jsvk\jscripts\css\flat_gray\keyboard.css最后加入下面的代码。

复制代码 代码如下:


#kbDesk div#kb_binput_method {
    float: right;
    width: 102px;
}
#kbDesk div#kb_binput_method a {
        background-position: -453px 0px;
}
#kbDesk div#kb_binput_method.kbButtonHover a {
        background-position: -453px -38px;
}
#kbDesk div#kb_binput_method.kbButtonDown a {
        background-position: -453px -76px;
}

  接下来要在JS文件中给按钮定义事件。打开virtualkeyboard.js,找到

复制代码 代码如下:


var C = {
        14: 'backspace',
        15: 'tab',
        28: 'enter',
        29: 'caps',
        41: 'shift_left',
        52: 'shift_right',
        53: 'del',
        54: 'ctrl_left',
        55: 'alt_left',
        56: 'space',
        57: 'alt_right',
        58: 'ctrl_right'
    };

  在下面加上59: 'input_method',记得在'ctrl_right'后面加上逗号。修改后:

复制代码 代码如下:


var C = {
        14: 'backspace',
        15: 'tab',
        28: 'enter',
        29: 'caps',
        41: 'shift_left',
        52: 'shift_right',
        53: 'del',
        54: 'ctrl_left',
        55: 'alt_left',
        56: 'space',
        57: 'alt_right',
        58: 'ctrl_right',
        59: 'input_method'
    };

  继续找到按钮点击响应代码:

复制代码 代码如下:


var d = function (i) {
        var e = DOM.getParent(i.srcElement || i.target, 'a');
        if (!e || e.parentNode.id.indexOf(Q) < 0) return;
        e = e.parentNode;
        var iI = X;
        var il = e.id.substring(Q.length);
        switch (il) {
            case "caps":
                iI = iI ^ s;
                break;
            case "shift_left":
            case "shift_right":
                if (i.shiftKey) break;
                iI = iI ^ Z;
                break;
            case "alt_left":
            case "alt_right":
            case "ctrl_left":
            case "ctrl_right":
                iI = iI ^ (i.altKey << 1 ^ w) ^ (i.ctrlKey << 2 ^ W);
                break;
            default:
                if (_) DOM.CSS(e).addClass(y.buttonDown);
                break
        }
        if (X != iI) {
            B(iI);
            b();
        }
        i.preventDefault();
        i.stopPropagation();
    };

  修改为:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgsjyp.html