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

2020-05-17 06:26:37易采站长站整理

这还不是我想要的!

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

  首先找到皮肤文件,Jsvkjscriptscssflat_graybutton_set.png,我要自己动手加个按键!

原图:

 

修改后:

  只改图片肯定不够,按钮定位在样式表里,继续修改样式表!在样式表Jsvkjscriptscssflat_graykeyboard.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’,