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及更高版本