基本用法
参数

基本参数

头部栏

键盘栏

方法

show

hide/close

完整使用
页面使用

jQuery Keyboard

基本用法:
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.keyboard.js"></script>			
<script type="text/javascript">	
	// 指定元素	
	var kb1 = $('#keyboard').keyboard(option);
	// 全局元素	
	var kb2 = $.keyboard(option);
</script>	

参数:

基本参数:

字段 类型 必须 默认值 说明
elem object N null 位置元素,使用$(xx).keyborad(o)时,默认元素为xx/HTML;否则为指定elem/HTML.
lineCn int N 3 键盘按钮一行显示几个,1-10之间
shade boolean/string N true 是否显示阴影,传入RGB可自定义阴影颜色和透明度。
shadeClose boolean N true 是否点击阴影关闭键盘,在shade开启时有效。
fixed boolean N true 是否绝对定位。
animate boolean N true 显示隐藏是否使用动画。
heads array N [] 不填或false,表示不显示头部栏;请查阅 《头部栏》 参数。
keys array Y ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', ''] 必填,键盘显示内容;请查阅 《键盘栏》 参数。
click method N
键盘被点击的回调,包含3个参数:type,index,elem.
type类型:0键盘栏,1头部栏
index下标:被点击是第几个,是数组下标
elem元素:被点击的按钮元素对象


头部栏:

头部栏分为左中右3大块,故为长度3的数组,如不需要某个位置的头部栏时,填空即可。如:['<button>取消</button>','', '完成'],还也可以加图标,但一般情况文字也能实现的,如:[ '取消', '设置', '完成' ]

// 使用文字:			
heads: [ '取消', '设置', '完成' ],

// 使用HTML:			
heads: ['<button>取消</button>','设置', '<i class="layui-icon layui-icon-ok"></i>'],

// 只要取消:			
heads: [ '取消'],

// 不要取消和设置:			
heads: [ '', '', '完成' ],
			


键盘栏:

键盘栏设置比较灵活,可以简单的[1,2,3,4,5,6],也可以横跨、纵跨几行几列。

// 使用文字:			
keys: ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'X', '0', '退格', '上一个', '下一个', '确定'],

// 使用HTML:			
keys: ['1', '2', '3', '4', '5', '6', '<button>清空</button>','<i class="layui-icon layui-icon-ok"></i>'],

// 复杂使用(横跨、纵跨):			
keys : [ '1', '2', '3', '4', '5', '6', '7', '8', '9', 'X', '0', {
    text : '退格',
    rowspan : 2,
    colspan : 1,
}, '上一页', '下一页', {
    text : '保存',
    colspan : 3,
} ],
			
以下是对复杂情况使用场景中,字段的解释:
字段 类型 必须 默认值 说明
text string Y 文本/HTML
colspan int N 1 横跨数
rowspan int N 1 纵跨数
方法:

在使用keyborad初始化后会返回一个对象,其中包含了几个方法:

show:

显示键盘,可用于input得到焦点事件中,触发显示键盘。


hide/close:

隐藏键盘,可用于点击键盘中的确认按钮后,触发隐藏键盘。


完整使用:
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.keyboard.js"></script>			
<script type="text/javascript">	
    var kb = $.keyboard({
        elem : 'HTML',
        lineCn : 3,
        shade : true,
        shadeClose : true,
        fixed : true,
        animate : true,
        heads: [ '取消', '设置', '完成' ],
        keys : [ '1', '2', '3', '4', '5', '6', '7', '8', '9', 'X', '0', {
            text : '退格',
            rowspan : 2,
            colspan : 1,
        }, '上一页', '下一页', {
            text : '保存',
            colspan : 3,
        } ],
        click : function(type, index, text) {
            console.log('被点击了:', type, index, text);
        }
    });
    
    kb.show();
    
    kb.hide();
</script>				
			

页面使用:

(演示中,3秒后隐藏,3秒后显示)

嵌套页面使用。