简单数字键盘

阅读更多

好久没有写博客了，最近有个需求关于数字键盘的，找了下网上的感觉有点重，太复杂！自己随手写了个符合自己需求的比较简单的，分享一下！希望大家指正

number.spiner.js

/**
 * 公共js方法
 */
;(function(win){
	var NumberSpiner={
		init:function(obj,type){
			
			var that=this;
			var status=obj.getAttribute("data-status");
			that.load(obj,type);
			if(status==1){
				return;
			}
//			obj.onfoucs=function(){
//			};
//			obj.onblur=function(){
//				var number_spinner=document.getElementById("number_spinner");
//				number_spinner.style.display="none";
//			};
		},
		load:function(obj,type){
			var that=this;
			var $obj=$(obj);
			that.currentObj=$obj;
			var $number_spinner=$("#number_spinner");
			if($number_spinner&&$number_spinner.length>0){
				$number_spinner.show();
//				return;
			}else{
				var div=$("
");
				div.attr("id","number_spinner");
				div.attr("class","number-spinner");
				var tempArr=['
'];			
				tempArr.push('
7
');
				tempArr.push('
8
');
				tempArr.push('
9
');
				tempArr.push('
4
');
				tempArr.push('
5
');
				tempArr.push('
6
');
				tempArr.push('
1
');
				tempArr.push('
2
');
				tempArr.push('
3
');
				tempArr.push('
0
');
				tempArr.push('
.
删除
');
				tempArr.push('
');
				div.html(tempArr.join(""));
				$(document.body).append(div);
				$number_spinner=$("#number_spinner");
				$number_spinner.on("click",".number",function(){
					var $this=$(this);
					var data_code=$this.attr("data-value");
					$obj=that.currentObj;
					var val=$obj.val();
					if(data_code){
						switch(data_code){
							case "del":
								var len=val.length;
								if(len==0){
									val="";
								}else{
									val=val.substring(0,len-1);
								}
								$obj.val(val).trigger('input');
								break;
							case ".":
							case "9":
							case "8":
							case "7":
							case "6":
							case "5":
							case "4":
							case "3":
							case "2":
							case "1":
							default:
								val+=data_code;
								$obj.val(val).trigger('input');
								break;
						}
					}
				});
				
				$(document).bind("click",function(e){
					var obj=e.target;
					var $obj=$(obj);
					if(obj.tagName.toUpperCase()=="INPUT"||$obj.hasClass("number")){
						return;
					}else{
						$number_spinner=$("#number_spinner");
						$number_spinner.hide();
					}
				});
			}
//			obj.setAttribute("data-status",1);\
			var w_width=$(window).width(),w_height=$(window).height();
			var offset=getAbsPoint(obj);
			var offset_top=offset.top;
			var offset_left=offset.left;
			var obj_height=$obj.outerHeight();
			var obj_width=$obj.width();
			var _h=$number_spinner.height();
			var _w=$number_spinner.width();
			var top=offset_top;
			var left=offset_left;
			if((offset_top+_h+obj_height)>w_height||type=="top"){
				top=offset_top-_h-2;
			}else{
				top=offset_top+obj_height+2;
			}
			if((offset_left+_w)>w_width){
				left=offset_left-_w;
			}else{
				left=offset_left;
			}
			$number_spinner.css({"top":top,"left":left});
		}
	};
	function getAbsPoint(e){     
		var   x   =   e.offsetLeft,   y   =   e.offsetTop;
		while(e=e.offsetParent){   
			x   +=   e.offsetLeft;
			y   +=   e.offsetTop;
		}
		console.log("x:"+x+","+"y:"+y);
		return {left:x,top:y};
	}  
	win['Team777NumberSpiner']=NumberSpiner;
})(window);

 基本css样式：

less版

.number-spinner{
	.posa;
	z-index:3;
//	.p(3px);
	.number-box{
		.p(2px);
		.bc(@white);
		.oh;
		li{
			.w(33.3%);
			.fl;
			cursor:pointer;
//			.h(45);
			.lh(45);
			.number{
				.m(2px);
				.yellow-style;
				.tc;
			}
		}
	}
}

 css版

.number-spinner {
  position: absolute;
  z-index: 3;
}
.number-spinner .number-box {
  padding: 2px;
  background-color: #ffffff;
  overflow: hidden;
}
.number-spinner .number-box li {
  width: 33.3%;
  float: left;
  cursor: pointer;
  line-height: 45px;
}
.number-spinner .number-box li .number {
  margin: 2px;
  background: #FDA24D;
  /* 一些不支持背景渐变的浏览器 */
  background: -moz-linear-gradient(top, #fda24d, #fdda6f);
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fda24d), to(#fdda6f));
  background: -o-linear-gradient(top, #fda24d, #fdda6f);
  border-radius: 5px;
  text-align: center;
}

 

引用处理

由于是用angularjs处理  

 

$scope.orderManager.getNumber=function($event,type){	
     Team777NumberSpiner.init($event.target,type);
};