分享自己写的两个控件，适用于用html + js开发App
入职一个月了，当初去面试Java的，结果公司急缺前端，被安排去做html + js开发App了。刚开始的时候js在写一个表单都要看好多参考文档的水平，经过一个月的努力，公司的前端App代码基本都是我在维护了。
分享两个自己写的控件，如果你也正用html + js开发App，也许用的上。这两个控件的产生都有一个故事。第一个是SwitchButton，效果就是可以滑动来选择“Yes/No”的滑动按钮，可以在Kundo UI中找到，但是它的不兼容iScroll，简单的说来就是Kundo的SwithcButton滑动的时候，iScroll也会滑动。刚进公司，一点都不懂js就开始着手开发这个控件，其实总监也想看看我的水平，他给我三天的时间让我去做，走前还丢下一句，我觉得你五天都做不出来，结果我花了两天时间就做出来了，做出来的同时也对js有了基本的了解。第二个控件是一个数字键盘，开发这个的时候要为我们的App做一个类似iPhone密码锁的功能，最开始的设计是用单纯的输入框调出系统键盘，可以输入任意的字符，结果用户反馈说把密码设置太复杂老忘记，最后参照iPhone的密码锁，只能输入4个数字，并且实现和它差不多的效果。单纯在iPhone下调出数字键盘不用麻烦到自己写一个数字键盘控件，但是我们做的App是跨平台的，希望在网页、Android和iPhone下实现同一个效果，觉得不调出系统的键盘，而采用自己的键盘控件。
下面是我们的应用对这两个控件使用截图，（图1、图2红色箭头所指的是SwitchButton，图3是密码锁的应用场景）：
图1
图2
图3
下面是SwitchButton的js代码和css，依赖jQuery。css1的效果是方的（ios4的效果），css2是圆的（ios5的效果）：
js
View Code
(function() { var vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' : (/firefox/i).test(navigator.userAgent) ? 'Moz' : (/trident/i) .test(navigator.userAgent) ? 'ms' : 'opera' in window ? 'O' : '', isTouchPad = (/hp-tablet/gi).test(navigator.appVersion), hasTouch = 'ontouchstart' in window&& !isTouchPad, // Events RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize', START_EV = hasTouch ? 'touchstart' : 'mousedown', MOVE_EV = hasTouch ? 'touchmove' : 'mousemove', END_EV = hasTouch ? 'touchend' : 'mouseup', CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup', WHEEL_EV = vendor == 'Moz' ? 'DOMMouseScroll' : 'mousewheel', // Helpers trnXOpen = 'translateX' + '(', trnClose = ')', html = '<span class="mySwitchButton" style="float:none;padding-right:0px;"><span ' + 'class="mySwitchButton-wrapper" style="float:none;padding-right:0px;"><span class="mySwitchButton-background" ' + 'style="margin-left: -96px; -webkit-transition: none;float:none;padding-right:0px;"></span></span><span ' + 'class="mySwitchButton-container" style="float:none;padding-right:0px;"><span class="mySwitchButton-handle" ' + 'style="-webkit-transform: translateX(0px); -webkit-transition: none; float:none;padding-right:0px;"><span ' + 'class="mySwitchButton-label-on" style="float:none;padding-right:0px;">未还</span><span ' + 'class="mySwitchButton-label-off" style="float:none;padding-right:0px;">已还</span></span></span></span>'; // 构造函数 // 游标在左边是关闭 mySwitchButton = function(el, options) { var that = this; var doc = document; that.wrapper = doc.getElementById(el); if(that.wrapper == null || typeof that.wrapper == "undefined"){ return; } that.wrapper.innerHTML = html; that.css = { mySwitchButton_width : 0, mySwitchButton_wrapper_width : 0, mySwitchButton_background_width : 0, mySwitchButton_container_witch : 0, mySwitchButton_handle_width : 0, mySwitchButton_uncheck_handle_translateX : 0, mySwitchButton_check_handle_translateX : 0, mySwitchButton_uncheck_background_marginLeft : 0, mySwitchButton_check_background_marginLeft : 0, }; that.css.mySwitchButton_width = $("#" + el + " .mySwitchButton").css("width"); that.css.mySwitchButton_wrapper_width = $("#" + el + " .mySwitchButton .mySwitchButton-wrapper").css("width"); that.css.mySwitchButton_background_width = $("#" + el + " .mySwitchButton .mySwitchButton-wrapper .mySwitchButton-background").css("width"); that.css.mySwitchButton_container_witch = $("#" + el + " .mySwitchButton .mySwitchButton-container").css("width"); that.css.mySwitchButton_handle_width = $("#" + el + " .mySwitchButton .mySwitchButton-container .mySwitchButton-handle").css("width"); that.css.mySwitchButton_check_handle_translateX = parseInt(that.css.mySwitchButton_container_witch.replace("px", "")) - parseInt(that.css.mySwitchButton_handle_width.replace("px", "")) + "px"; that.css.mySwitchButton_check_background_marginLeft = "0px"; that.css.mySwitchButton_uncheck_handle_translateX = "0px"; that.css.mySwitchButton_uncheck_background_marginLeft = "-" + that.css.mySwitchButton_check_handle_translateX; that.options = { laberOn : "On", laberOff : "Off", check : false, checkFunction : null, uncheckFunction : null }; that.translateX = "0px"; that.eventStatus = { isTouchStarted : false, startX : 0, startY : 0, oldX : 0, oldY : 0, isMove : false }; for ( var i in options) { that.options[i] = options[i]; } var setLaber = function() { $("#" + el + " .mySwitchButton-label-on").html(that.options.laberOn); $("#" + el + " .mySwitchButton-label-off").html(that.options.laberOff); }; var init = function() { setLaber(); initCSS(); that._bind($("#" + el + " .mySwitchButton"), START_EV, onStartHandler); that._bind($("#" + el + " .mySwitchButton"), MOVE_EV, onMoveHandler); that._bind($("#" + el + " .mySwitchButton"), END_EV, onEndHandler); $("#" + el + " .mySwitchButton").bind("mouseleave", onEndHandler); }; var onStartHandler = function(e){ //alert("start"); that.eventStatus.isTouchStarted = true; var point = that.MousePoint(e); that.eventStatus.startX = point.x; that.eventStatus.startY = point.y; that.eventStatus.oldX = point.x; that.eventStatus.oldY = point.y; return false; }; var onMoveHandler = function(e){ //没有点击的滑动 if(!that.eventStatus.isTouchStarted){ return; } var point = that.MousePoint(e); //移动的距离 var disX = point.x - that.eventStatus.oldX ; //更新事件最后坐标 that.eventStatus.oldX = point.x; that.eventStatus.oldY = point.y; that.eventStatus.isMove = true; var oldLeft = $("#" + el + " .mySwitchButton-background").css("margin-left"); var oldLeftInt = parseInt(oldLeft); var newLeft = oldLeftInt + disX; var newTranslateX = (parseInt(that.translateX.replace("px", "")) + disX) + "px"; that.translateX = newTranslateX; $("#" + el + " .mySwitchButton-background").css("margin-left", newLeft + "px"); $("#" + el + " .mySwitchButton-handle").css('-' + vendor + '-Transform', trnXOpen + that.translateX + trnClose); return false; }; var onEndHandler = function(e){ //事件从控件外启动 if(!that.eventStatus.isTouchStarted){ return; } //只是单击 if(!that.eventStatus.isMove){ if(that.options.check){ toUncheck(); } else{ toCheck(); } } //移动结束 else{ disX = that.eventStatus.oldX - that.eventStatus.startX; halfWidth = parseInt(that.css.mySwitchButton_width.replace("px", "")) / 4; //向右移动了1/4距离以上 if(disX > 0 && disX > halfWidth){ toCheck(); } //向左移动了1/4距离以上 else if(disX < 0 && Math.abs(disX) > halfWidth){ toUncheck(); } } initCSS(); initEventStatus(); return false; }; var initEventStatus = function(){ that.eventStatus.isTouchStarted = false; that.eventStatus.startX = 0; that.eventStatus.startY = 0; that.eventStatus.oldX = 0; that.eventStatus.oldY = 0; that.eventStatus.isMove = false; }; var toCheck = function(){ $("#" + el + " .mySwitchButton-background").css("margin-left", that.css.mySwitchButton_check_background_marginLeft); $("#" + el + " .mySwitchButton-handle").css('-' + vendor + '-Transform', trnXOpen + that.css.mySwitchButton_check_handle_translateX + trnClose); that.translateX = that.css.mySwitchButton_check_handle_translateX; if(that.options.check == false){ if(typeof that.options.uncheckFunction == "function"){ that.options.checkFunction(); } } that.options.check = true; }; var toUncheck = function(){ $("#" + el + " .mySwitchButton-background").css("margin-left", that.css.mySwitchButton_uncheck_background_marginLeft); $("#" + el + " .mySwitchButton-handle").css('-' + vendor + '-Transform', trnXOpen + that.css.mySwitchButton_uncheck_handle_translateX + trnClose); that.translateX = that.css.mySwitchButton_uncheck_handle_translateX; if(that.options.check == true){ if(typeof that.options.uncheckFunction == "function"){ that.options.uncheckFunction(); } } that.options.check = false; }; var initCSS = function(){ if(that.options.check){ toCheck(); } else{ toUncheck(); } }; init(); }; mySwitchButton.prototype = { _bind : function(obj, event, fn) { switch (event.toLowerCase()) { case RESIZE_EV: obj.unbind(RESIZE_EV).bind(RESIZE_EV, fn); break; case START_EV: obj.unbind(START_EV).bind(START_EV, fn); break; case MOVE_EV: obj.unbind(MOVE_EV).bind(MOVE_EV, fn); break; case END_EV: obj.unbind(END_EV).bind(END_EV, fn); break; case CANCEL_EV: obj.unbind(CANCEL_EV).bind(CANCEL_EV, fn); break; case WHEEL_EV: obj.unbind(WHEEL_EV).bind(WHEEL_EV, fn); break; } }, MousePoint: function(ev){ var x = y = 0; if (!ev) ev = window.event; var touch = ev.originalEvent; if (!touch) return null; if (touch.touches) { x = touch.touches[0].clientX; y = touch.touches[0].clientY; } else if (ev.pageX || ev.pageY) { x = ev.pageX; y = ev.pageY; } else if (ev.clientX || ev.clientY) { x = ev.clientX; y = ev.clientY; } return { 'x': x, 'y': y }; } }; window.mySwitchButton = mySwitchButton; })();
css1
View Code
.mySwitchButton { font: bold .9em HelveticaNeue, sans-serif; font-size: .9rem; text-align: left; font-size: 1em; font-size: 1rem; display: inline-block; width: 6em; width: 6rem; height: 1.75em; height: 1.75rem; line-height: 1.9em; line-height: 1.9rem; position: relative; overflow: hidden; font-family: HelveticaNeue, Arial, sans-serif; -webkit-transform: translatez(0) } .mySwitchButton-wrapper { display: block; height: 100%; width: 100%; overflow: hidden; border-radius: 6px } .mySwitchButton-background{ display: block; margin: 0 1px 1px -5em; height: 100%; width: 200%; background: linear-gradient(top, #dbdbdb, #eee 50%) 6em 0 no-repeat #3074e7; background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #dbdbdb), color-stop(0.5, #eee) ) 6em 0 no-repeat #3074e7; background: -moz-linear-gradient(top, #dbdbdb, #eee 50%) 6em 0 no-repeat #3074e7; background: -ms-linear-gradient(top, #dbdbdb, #eee 50%) 6em 0 no-repeat #3074e7; background: -o-linear-gradient(top, #dbdbdb, #eee 50%) 6em 0 no-repeat #3074e7 } .mySwitchButton-background:after { content: "\a0"; display: inline-block; margin: 0; width: 100%; height: 55%; line-height: 100%; vertical-align: bottom; background: linear-gradient(top, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0.4) ); background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, rgba(255, 255, 255, 0.14) ), color-stop(1, rgba(255, 255, 255, 0.4) ) ); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0.4) ); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0.4) ); background: -o-linear-gradient(top, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0.4) ) } .mySwitchButton-container { top: 0; left: 0; position: absolute; display: block; height: 100%; width: 100%; overflow: hidden; background: transparent; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; border: 1px solid #999; box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.3); background: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) ); -webkit-box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.3) } .mySwitchButton-handle { top: 0; left: 0; width: 2em; width: 2rem; height: 100%; display: inline-block; margin: -1px 0 0 -1px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5); margin: -1px 1px 0 -1px; border: 1px solid #969696; background: linear-gradient(top, #fff, #d7d7d7 5%, #fff); background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #fff), color-stop(0.05, #d7d7d7), color-stop(1, #fff) ); background: -moz-linear-gradient(top, #fff, #d7d7d7 5%, #fff); background: -ms-linear-gradient(top, #fff, #d7d7d7 5%, #fff); background: -o-linear-gradient(top, #fff, #d7d7d7 5%, #fff) } .mySwitchButton-label-on,.mySwitchButton-label-off { display: block; width: 200%; text-align: center; position: absolute } .mySwitchButton-label-off { left: 2em; color: #7f7f7f } .mySwitchButton-label-on { left: -4em; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); color: #fff }
css2
View Code
.mySwitchButton { font: bold .9em HelveticaNeue, sans-serif; font-size: .9rem; text-align: left; font-size: 1em; font-size: 1rem; display: inline-block; width: 6em; width: 6rem; height: 1.75em; height: 1.75rem; line-height: 1.9em; line-height: 1.9rem; position: relative; overflow: hidden; font-family: HelveticaNeue, Arial, sans-serif; -webkit-transform: translatez(0); width: 4.6rem; height: 1.6rem; line-height: 1.65rem; overflow: hidden; } .mySwitchButton-wrapper { display: block; height: 100%; width: 100%; overflow: hidden; border-radius: 6px; border-radius: 1rem; -moz-border-radius: 1rem; -webkit-border-radius: 1rem; } .mySwitchButton-background{ display: block; margin: 0 1px 1px -5em; height: 100%; width: 200%; background: linear-gradient(top, #dbdbdb, #eee 50%) 4em 0 no-repeat #3074e7; background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #dbdbdb), color-stop(0.5, #eee) ) 4em 0 no-repeat #3074e7; background: -moz-linear-gradient(top, #dbdbdb, #eee 50%) 4em 0 no-repeat #3074e7; background: -ms-linear-gradient(top, #dbdbdb, #eee 50%) 4em 0 no-repeat #3074e7; background: -o-linear-gradient(top, #dbdbdb, #eee 50%) 4em 0 no-repeat #3074e7 } .mySwitchButton-background:after { content: "\a0"; display: inline-block; margin: 0; width: 100%; height: 55%; line-height: 100%; vertical-align: bottom; background: linear-gradient(top, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0.4) ); background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, rgba(255, 255, 255, 0.14) ), color-stop(1, rgba(255, 255, 255, 0.4) ) ); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0.4) ); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0.4) ); background: -o-linear-gradient(top, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0.4) ) } .mySwitchButton-container { top: 0; left: 0; position: absolute; display: block; height: 100%; width: 100%; overflow: hidden; background: transparent; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; border: 1px solid #999; box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.3); background: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) ); -webkit-box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.3); border-radius: 1rem; -moz-border-radius: 1rem; -webkit-border-radius: 1rem; } .mySwitchButton-handle { top: 0; left: 0; width: 1.5em; width: 1.5rem; height: 100%; display: inline-block; margin: -1px 0 0 -1px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5); margin: -1px 1px 0 -1px; border: 1px solid #969696; background: linear-gradient(top, #fff, #d7d7d7 5%, #fff); background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #fff), color-stop(0.05, #d7d7d7), color-stop(1, #fff) ); background: -moz-linear-gradient(top, #fff, #d7d7d7 5%, #fff); background: -ms-linear-gradient(top, #fff, #d7d7d7 5%, #fff); background: -o-linear-gradient(top, #fff, #d7d7d7 5%, #fff); border-radius: 1rem; -moz-border-radius: 1rem; -webkit-border-radius: 1rem; } .mySwitchButton-label-on,.mySwitchButton-label-off { display: block; width: 200%; text-align: center; position: absolute; font-size: 0.9rem; line-height: 1.6rem; } .mySwitchButton-label-off { left: 1.4rem; color: #7f7f7f } .mySwitchButton-label-on { left: -2.9em; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); color: #fff }
调用的时候为SwitchButton指定一个ID，并用div标签。构造函数有两个参数，id, options。
其中id是必须，是父div的id。
options可选，是SwitchButton的一些参数：
laberOn是选中的文本(String)，默认为On；
laberOff是不选中的文本(String)，默认为Off；
check是初始状态是否选中(boolean)，默认为false；
checkFunction是选中后调用的函数(function)，默认为null，
uncheckFunction是不选中后调用的函数(function)，默认为null。
可以选择性的为options赋值，没有赋值的参数将用默认的。调用实例：
html：
<div id="test"></div>
js：
$(document).ready(function() { new mySwitchButton("test", { laberOn : "开启", laberOff : "关闭", check : false, checkFunction : checkFunction, uncheckFunction : uncheckFunction }); function checkFunction() { alert("选中了该选项！"); } ; function uncheckFunction() { alert("取消了该选项"); } ; });
2012年7月24日晚，贴上键盘代码
键盘代码：
js：
View Code
(function() { var html = '<div class="keyboard" name="keyboard"><ul><li key="1">1</li><li key="2">2</li><li key="3">3</li><li key="4">4</li><li key="5">5</li><li key="6">6</li><li key="7">7</li><li key="8">8</li><li key="9">9</li><li key="help">?忘记</li><li key="0">0</li><li key="del"></li><div style="clear:both"></div></ul></div>'; var delHtml = '<div name="delWrapper" style="position:relative">' + '<div name="triangle" style="border-bottom: 10px solid transparent;border-top: 10px solid transparent;border-right: 10px solid white;width: 0px;position: relative;top: 15px;"></div>' + '<div name="rectangle" style="width: 30px;height: 20px;position: relative;top: -5px;color: black;background: white;text-align: center;line-height: 20px;">✕</div>' + '</div>'; var isTouchPad = (/hp-tablet/gi).test(navigator.appVersion); var hasTouch = 'ontouchstart' in window&& !isTouchPad; var START_EV = hasTouch ? 'touchstart' : 'mousedown'; var END_EV = hasTouch ? 'touchend' : 'mouseup'; var myKeyBoard = function(parent, keyDownFunction, options) { var that = this; that.options = { helpKeyText : '', enable : true, keyHeight : '48px', fontSize : '20px', }; for ( var i in options) { that.options[i] = options[i]; } var parentJqueryObj = $('#' + parent); parentJqueryObj.append(html); var keyBoardJqueryObj = parentJqueryObj.find('div[name=keyboard]'); var keyJqueryObj = keyBoardJqueryObj.find('ul li'); var delJqueryObj = keyBoardJqueryObj.find('ul li[key=del]'); delJqueryObj.append(delHtml); var helpJqeuryObj = keyBoardJqueryObj.find('ul li[key=help]'); that.keyBoard = keyBoardJqueryObj; that.helpKey = helpJqeuryObj; var parentWidth = parentJqueryObj.width(); var keyWidth = parseInt(parentWidth) / 3 - 2; //除以3减去边框的像素 var keyHeight = that.options.keyHeight; keyJqueryObj.width(keyWidth); keyJqueryObj.height(keyHeight); keyJqueryObj.css('line-height', keyHeight); keyJqueryObj.css('font-size', that.options.fontSize); helpJqeuryObj.css('font-size', '18px'); var delTriangleLeft = keyWidth / 2 - 20; var delRectangleLeft = keyWidth / 2 - 20 + 10; delJqueryObj.find('div[name=triangle]').css('left', delTriangleLeft + "px"); delJqueryObj.find('div[name=rectangle]').css( 'left', delRectangleLeft + "px"); helpJqeuryObj.html(that.options.helpKeyText); keyJqueryObj.bind(START_EV, function(ev) { $(this).addClass('keyboardClick'); var that = this; setTimeout(function(){$(that).removeClass('keyboardClick');}, 500); }); keyJqueryObj.bind(END_EV, function(ev) { if (keyDownFunction == null || typeof keyDownFunction == 'undefined') { return; } if(that.options.enable){ var key = $(this).attr("key"); keyDownFunction(key); } }); }; myKeyBoard.prototype.enable = function(){ this.options.enable = true; }; myKeyBoard.prototype.disable = function(){ this.options.enable = false; }; myKeyBoard.prototype.remove = function(){ this.keyBoard.remove(); }; myKeyBoard.prototype.changeHelpKeyText = function(text){ if(text != null && typeof text != 'undefined'){ this.helpKey.html(text); } }; window.myKeyBoard = myKeyBoard; })();
css：
View Code
.keyboard { height: 100%; width: 100%; font-family: helvetica} .keyboard ul, .keyboard li { margin: 0px; padding: 0px; list-style-position: inside; list-style-image: none; list-style-type: none; } .keyboard li { background: -webkit-gradient(linear, left top, left bottom, from(#303030), to(#000));background:-moz-linear-gradient(top, #303030, #000); border: 1px solid #000; box-shadow: 0 1px 0 0 #000 inset; color: white; display: inline-block; font-size: 20px; text-decoration: none; text-shadow: 0 1px 0 #FFF; display: block; clear: none; float: left; text-align: center;margin: 0px; padding: 0px; } .keyboard li:hover {cursor: pointer; } .keyboard li.keyboardClick {background: -webkit-gradient(linear, left top, left bottom, from(#4070C0), to(#30428A)); background:-moz-linear-gradient(top, #4070C0, #30428A)} .keyboard ul { display: inline; margin-right: auto; margin-left: auto; }
调用时为数字键盘的父div指定一个id和宽（这两个是必须的，建议布局参照实例），构造方法有三个参数 id，keyDownFunction， options。
id为必须，是父div的id。
keyDownFunction是单击键盘的键所触发的事件，function。回调函数，建议的写法是 :
function(key){
//key是所单击键的值，0~9，第四行第一列为help，第三列为del
if(key == null || typeof key == 'undefined'){
return;
}
if(key != 'del' || key != 'help'){
//点击0-9时
}
else if(key == 'del'){
}
else if(key == 'help'){
}
}
options是可选，指定数字键盘的一些初始化属性，其中：
helpKeyText是帮助键的文本（第四行第一列的键），String，默认为'';
enable是点击键盘是否出发事件，boolean，默认是true;
keyHeight是键盘的键的高（不建议改变），默认是48px，加上边框一个键一共高50px。（早上还是40px的，被公司做产品的责令改了）；
fontSize是键盘的键文本的字体大小，这里好像设置了也不能改变，也不建议重新赋值，默认即可。
构造函数返回的引用能使用enable，disable，remove，changeHelpKeyText四个函数。看着名字应该就知道意思了，不做解释。
键盘使用demo：
html（按照建议，只要指定宽就好）：
<div id="keyboard" style="width:400px"> </div> <hr /> <input type="button" value="开启" onclick="keyBoard.enable();" /> <input type="button" value="关闭" onclick="keyBoard.disable();" /> <input type="button" value="移除" onclick="keyBoard.remove();" />
js：
$(document).ready(function(){ var keyBoard = new myKeyBoard('keyboard' , keyDownFunction,{enable:false, helpKeyText: "帮助"}); window.keyBoard = keyBoard; }); var keyDownFunction = function(key){ alert(key); };
截图：
键盘的代码忘记在公司了。。。下次回来写。网页上的js代码是压缩过的。
我们公司做App叫的“51信用卡管家”，主要功能是信用卡的管理。大家可以去 http://www.51zhangdan.com/ 体验网页版。可以用QQ号登录，即使没有账单信息，在“更多”和“密码锁定”模块里也可以看到这两个控件的使用。
在iPhone的App Store的免费理财里找到我们的项目，叫“51信用卡账单”。
Android版正在优化，如果是高配 + 4.0系统可以去下载体验一下，不然体验会有点差。我现在努力的目标是让我们的App能在低配的Android上流畅的运行。
如果对项目有好的建议或者希望和我交流的朋友请给我发送电子邮件, [email protected]。