jQuery Keyboard

基本用法：

	</>code 



	





	
	

		<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>
	




	

打开键盘关闭键盘

参数：

基本参数：

头部栏：

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

	</>code 



	
	

		// 使用文字：
	

	

		heads: [ \'取消\', \'设置\', \'完成\' ],
	

	

		// 使用HTML：
	

	

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

	

		// 只要取消：
	

	

		heads: [ \'取消\'],
	

	

		// 不要取消和设置：
	

	

		heads: [ \'\', \'\', \'完成\' ],
	

	

		
	

键盘栏：

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

	</>code 



	
	

		// 使用文字：
	

	

		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,
	

	

		} ],
	

	

		
	

以下是对复杂情况使用场景中，字段的解释：

方法：

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

show：

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

hide/close：

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

完整使用：

	</>code 



	
	

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

嵌套页面使用。