jQuery自渲染键盘插件keyboard.js

所属分类:输入-丰富的输入,快捷键

 3234  33  查看评论 (5)
jQuery自渲染键盘插件keyboard.js ie兼容9

此为 jquery 键盘插件,使用很简单。(可能有些欠缺,需要大家宝贵意见,所以不用jq币了,大家多多留言意见啊)

$('.keyboard').keyboard(opts);

即可把一个盒子变成键盘

如上 opts为参数,json格式,可不填,具体参数值如下

width:p($obj.css('width')),//键盘宽度
radius:4,//键盘四角的圆角度数
padding:10,//键盘四周空白区域宽度
segment:4,//键盘左中右之间分割线宽度
FbuttonHeight:2,//第一排F区域按键与第二行之间的距离
keyWidth:0,//按钮宽度
keyHeight:0,//按钮高度
keyRadius:4,//每个按钮四角的圆角度数
keyFontSize:12,//按钮上字体大小
keyPassColor:'#fff',//按钮按下时的字体颜色
keyMargin:1,//每个按钮四周留空的距离
keyBorderWidth:1,//每个按钮的边线宽度
keyBorderColor:'#fff',//每个按钮的边线颜色
keyColorShadow:5,//每个按钮的阴影扩散度
keyDoubleFontSize:12,//两行字的按钮上字体大小
keyDoubleSegment:4,//两行字的按钮上 上下两行间距
lightRad:3,//指示灯半径
lightBorderColor:'#cdcd00',//指示灯边线颜色
lightBorderWidth:1,//指示灯边线宽度
lightColor:'#ccc',//指示灯颜色
lightColorShow:'#ff0',//指示灯灯光颜色
keyColors:['rgb(0, 255, 100)','rgb(255, 225, 0)','rgb(255, 100, 0)','rgb(255, 0, 75)','rgb(150, 0, 255)','rgb(0, 150, 255)'],//按钮颜色
keyColorsRun:true,//是否开启按钮颜色移动变化
keyColorsRunTimes:1000,//按钮颜色移动变化频率(毫秒)
boardColors:['rgb(0, 255, 100)','rgb(255, 225, 0)','rgb(255, 100, 0)','rgb(255, 0, 75)','rgb(150, 0, 255)','rgb(0, 150, 255)'],//键盘内阴影颜色
boardColorsShow:true,//是否显示键盘背景内阴影
boardColorsRun:true,//是否开启键盘背景内阴影播放,不开启默认显示第一个颜色
boardColorsRunType:'random',//键盘内阴影播放方式'random' 随机播放 'order' 按顺序播放
boardColorsInsetSize:200,//键盘内阴影大小
boardColorsRunTimes:1500,//键盘内阴影播放频率(毫秒)
keyAfterToRunTime:8000,//按键结束后多少秒自动开启默认播放动作
audio:'',//按键声音路径
keyREffect:true,//是否开启按键四射特效
keyREffectTimes:3//按键特效速度,越小越快
相关插件-丰富的输入,快捷键

EmojiOne表情符号所见即所得的文本编辑器

emojionearea.js是一款可集成EmojiOne表情符号的所见即所得的jQuery文本编辑器插件。emojionearea.js允许你将任何的HTML元素转换为WYSIWYG文本编辑器,并且它能够在编辑器中使用Emojione图标。
  丰富的输入
 6417  48

jQuery在线做试卷并查看答案

jQuery在线试卷,提交后查看答案、解析。题型包括 1单选2多选3判断4填空5问答8论述题6完型填空7阅读理解
  丰富的输入
 1698  17

jqueryemoji表情插件

jQuery-emoji 让文本框或可编辑div具备插入表情功能。 Let textarea or editable div has ability to insert emoji.
  丰富的输入
 28367  123

jquery标记编辑器插件Tag Editor

Tag Editor是一个功能强大的和轻量级jQuery标记编辑器插件。
  丰富的输入
 21510  61

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币

    havefun 0
    2017/10/9 17:22:08
    输入字母的时候  渲染的太乱了    回复
    ____骄傲的猫` 0
    2017/9/13 23:51:10
    路灯下dē男孩ル 0
    2017/9/13 17:10:58
    建议添加大小写与lock灯的指示 回复
    nta.kim 0
    2017/9/13 8:33:49
    蛮有意思的哈,请问这是如何监听只能使用英文输入呢
        kmh02280
        2017/9/13 21:31:44

        看能不能获取e.keyCode,不是英文输入的被输入法阻拦了,拿不到

    回复
取消回复