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秒后显示）