superKeyboard
概述
superKeyboard 插件提供了键盘类似布局，所有按钮都可以自己定义内容，颜色，无论是需要车牌输入法，数字输入法（数字键盘），字 母输入法，计算器等都是可以实现的，键盘里面按键内容任意自定义，superKeyBoard更加自由，更加灵活，并且由于安全需要，插件还 增加了顺序打乱的功能。
场景示例：当前需要一款车牌键盘，那么我们需要的有，26个字母键盘+省市简称键盘+数字键盘，很明显如果使用自带的原生键盘在用户 体验方面是很不友好的，如果想提升用户体验，那么就可以使用superKeyBoard，只需要定义3个函数，分别定义自己的需要的参数，在回 调函数里面判断text的值分别调用不同的函数进行键盘切换即可。
open
打开插件。
open({params} , callback(ret, err))
params
rect：
- 类型： JSON 对象
- 默认值：见内部字段
- 描述：插件的位置及尺寸
- 内部字段：
{
x: 0, //（必须）数字类型；插件左上角的 x 坐标，如果 x + 面板最终的宽度 > 屏幕宽度，那么 x 会被自动更改为：屏幕宽度 - 面板最终的宽度
y: 0, //（必须）数字类型；插件左上角的 y 坐标，/如果 y + 面板最终的高度 > 屏幕高度，那么 y 会被自动更改为：屏幕高度 - 面板最终的高度
w: 300, //（必须）数字类型；插件的宽度
}
keys：
- 类型： JSON数组
- 默认值：无
- 描述： （必须项）数组形式，根据传入的数组长度进行行和列的排列，具体使用见示例代码
disorder：
- 类型： 布尔
- 默认值：false
- 描述： 排列顺序是否打乱，如打乱可以增加安全性
padding：
- 类型： 数字
- 默认值：10
- 描述： 插件的边距，上下左右边距都是一样的
bgColor：
- 类型： 字符串
- 默认值：#EBEBEB
- 描述： 插件背景颜色，支持 rgb，#，如rgb(255,240,245)或者#FFF0F5
btnBg：
- 类型： 字符串
- 默认值：#FFFFFF
- 描述： 按钮背景颜色，支持 rgb，#，如rgb(255,240,245)或者#FFF0F5
btnRadius：
- 类型： 数字
- 默认值：5
- 描述： 按钮圆角值
btnTextColor：
- 类型： 字符串
- 默认值：#000000
- 描述： 按钮字体颜色，支持 rgb，#，如rgb(255,240,245)或者#FFF0F5
btnTextSize：
- 类型： 数字
- 默认值：16
- 描述： 按钮字体大小
btnBorderColor：
- 类型： 字符串
- 默认值：#CCCCCC
- 描述： 按钮边框颜色，支持 rgb，#，如rgb(255,240,245)或者#FFF0F5
btnBorderWeight：
- 类型： 数字
- 默认值：2
- 描述： 按钮边框宽度
btnBgPressed：
- 类型： 字符串
- 默认值：#4F94CD
- 描述： 按钮点击状态时颜色，支持 rgb，#，如rgb(255,240,245)或者#FFF0F5
btnTextColorPressed：
- 类型： 字符串
- 默认值：#FFFFFF
- 描述： 按钮点击状态时字体颜色，支持 rgb，#，如rgb(255,240,245)或者#FFF0F5
buttonSpace：
- 类型： 数字
- 默认值：5
- 描述： 按钮之间左右间隔
rowSpace：
- 类型： 数字
- 默认值：5
- 描述： 每行上之间上下间隔
heightRatio：
- 类型： 双精度浮点型
- 默认值：1.0
- 描述： 按钮高与宽的比例，如宽为20，那么高是宽的0.8，则高为16，使用中请按照当时情况进行比例调整
fixedOn：
- 类型： 字符串类型
- 默认值：（可选项）插件视图添加到指定 frame 的名字（只指 frame，传 window 无效）
- 描述： 插件依附于当前 window
fixed：
- 类型： 布尔
- 默认值：true
- 描述： 是否将插件视图固定到窗口上，不跟随窗口上下滚动，可为空
callback(ret, err)
ret：
- 类型：JSON对象
- 内部字段：
{
result:'ok' //描述执行结果，ok表示执行成功
text:'w' //表示点击按钮的值
}
err：
- 类型：JSON对象
- 内部字段：
{
msg:'' //错误信息描述
}
示例代码
var toNumText="";//声明全局变量，控制返回按钮开启什么键盘
//小写键盘
function fnLowerKeyBoard() {
var demo = api.require('superKeyboard');
demo.open({
rect: {
x: 2000,
y:2000,
w: api.winWidth
},
keys: [
["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
["a","s", "d", "f", "g", "h", "j", "k", "l"],
["数字","大写","z","x", "c", "v", "b", "n", "m", "←","清空"]
],
disorder:false,
padding:15,
bgColor:"#EBEBEB",
btnBg:"#FFFFFF",
btnRadius:10,
btnTextColor:"#000000",
btnTextSize:11,
btnBorderColor:"#CCCCCC",
btnBorderWeight:2,
btnBgPressed:"#4F94CD",
btnTextColorPressed:"#FFFFFF",
buttonSpace:10,
rowSpace:20,
heightRatio:1.3,
fixedOn: api.frameName,
fixed: true
}, function (ret, err) {
if (err){
alert(JSON.stringify(err));
}
else {
if(ret.text){
if(ret.text=="大写"){
fnUpperKeyBoard();
}
else if(ret.text=="数字"){
toNumText="小写";
fnNumberKeyboard();
}
else{
alert(JSON.stringify(ret));
}
}
}
});
}
//大写键盘
function fnUpperKeyBoard(){
var demo = api.require('superKeyboard');
demo.open({
rect: {
x: 2000,
y:2000,
w: api.winWidth
},
keys: [
["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
["A","S", "D", "F", "G", "H", "J", "K", "L"],
["数字","小写","Z","X", "C", "V", "B", "N", "M", "←","清空"]
],
disorder:false,
padding:15,
bgColor:"#EBEBEB",
btnBg:"#FFFFFF",
btnRadius:10,
btnTextColor:"#000000",
btnTextSize:11,
btnBorderColor:"#CCCCCC",
btnBorderWeight:2,
btnBgPressed:"#4F94CD",
btnTextColorPressed:"#FFFFFF",
buttonSpace:10,
rowSpace:20,
heightRatio:1.3,
fixedOn: api.frameName,
fixed: true
}, function (ret, err) {
if (err){
alert(JSON.stringify(err));
}
else {
if(ret.text){
if(ret.text=="小写"){
fnLowerKeyBoard();
}
else if(ret.text=="数字"){
toNumText="大写";
fnNumberKeyboard();
}
else
{
alert(JSON.stringify(ret));
}
}
}
});
}
//数字键盘
function fnNumberKeyboard(){
var demo = api.require('superKeyboard');
demo.open({
rect: {
x: 2000,
y:2000,
w: api.winWidth
},
keys: [
["1","2","3","←"],
["4","5","6","空格"],
["7","8","9","清空"],
["返回","0",".","+"]
],
disorder:false,
padding:15,
bgColor:"#EBEBEB",
btnBg:"#FFFFFF",
btnRadius:10,
btnTextColor:"#000000",
btnTextSize:14,
btnBorderColor:"#CCCCCC",
btnBorderWeight:2,
btnBgPressed:"#4F94CD",
btnTextColorPressed:"#FFFFFF",
buttonSpace:10,
rowSpace:20,
heightRatio:0.5,
fixedOn: api.frameName,
fixed: true
}, function (ret, err) {
if (err){
alert(JSON.stringify(err));
}
else {
if(ret.text){
if(ret.text=="返回"){
if(toNumText=="小写"){
fnLowerKeyBoard();
}
else if(toNumText=="大写"){
fnUpperKeyBoard();
}
else{
alert(JSON.stringify(ret));
}
}
}
}
});
}
可用性
Android系统
可提供的1.0.0及更高版本
close
close(callback(ret, err))
关闭键盘。
callback(ret, err)
ret：
- 类型：JSON对象数组
- 内部字段：
{
result:'ok' //描述执行结果，ok表示执行成功
}
err：
- 类型：JSON对象
- 内部字段：
{
msg:'' //错误信息描述
}
示例代码
var module = api.require('superKeyboard');
module.close(function(ret,err){
if (err){
alert(JSON.stringify(err));
}
else {
alert(JSON.stringify(ret));
}
});
可用性
Android系统
可提供的1.0.0及更高版本
getHeight
getHeight(callback(ret, err))
获取插件高度。
callback(ret, err)
ret：
- 类型：JSON对象
- 内部字段：
{
result:'ok' //描述执行结果，ok表示执行成功
height:100 //插件实际高度
}
err：
- 类型：JSON对象
- 内部字段：
{
msg:'' //错误信息描述
}
示例代码
var module = api.require('superKeyboard');
module.getHeight(function(ret,err){
if (err){
alert(JSON.stringify(err));
}
else {
alert(JSON.stringify(ret));
}
});
可用性
Android系统
可提供的1.0.0及更高版本
getWidth
getWidth(callback(ret, err))
获取插件宽度。
callback(ret, err)
ret：
- 类型：JSON对象
- 内部字段：
{
result:'ok' //描述执行结果，ok表示执行成功
width:100 //插件实际宽度
}
err：
- 类型：JSON对象
- 内部字段：
{
msg:'' //错误信息描述
}
示例代码
var module = api.require('superKeyboard');
module.getWidth(function(ret,err)
{
if (err){
alert(JSON.stringify(err));
}
else{
alert(JSON.stringify(ret));
}
});
可用性
Android系统
可提供的1.0.0及更高版本