入職一個月了，當初去面試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上流暢的運行。
如果對項目有好的建議或者希望和我交流的朋友請給我發送電子郵件, answer1991.chen@gmail.com。