myQuery--面向对象设计
最近考虑对于自己的query进行面向对象的写法，参考了很多治疗，也想了很多，当然这面向对象写着十分恶心，所以更新速度会慢，先mark下
才发现更新的好慢啊，没事，慢慢来嘛！
添加第一个面向对象写的玩意
js拖动界面元素--首先你需要对要拖动的那个元素设position：absolute
1 function Drag(id){ 2 //这里的this是new出来的Drag对象实例,注意这里的this需要指出来 3 //alert(this)-->object object 4 var _this=this; 5 //添加属性 6 this.disX=0; 7 this.disY=0; 8 this.oDiv=document.getElementById(id); 9 //当这个当前对象鼠标按下的时候调用的是new出来的Drag对象的方法,不是当前div的方法， 10 // 所以需要把this提前保存下 11 this.oDiv.onmousedown=function(){ 12 //alert(this)-->object HTMLdivElement 是this.oDov(div)本身 13 _this.StartDrag(); 14 } 15 } 16 Drag.prototype={ 17 //添加原型方法 18 StartDrag:function(event){ 19 //alert(this)-->object object 20 var _this=this; 21 var event=event ||window.event; 22 this.disX=event.clientX-this.oDiv.offsetLeft; 23 this.disY=event.clientY-this.oDiv.offsetTop; 24 document.onmousemove=function(){ 25 //alert(this)-->object HTMLdivElement 是this.oDov(div)本身 26 _this.StartMove(); 27 } 28 document.onmouseup=function(){ 29 _this.EndMove(); 30 } 31 }, 32 StartMove:function(event){ 33 var event=event || window.event; 34 //this.l=event.clientX-this.offsetLeft; 35 //this.t=event.clientY-this.offsetTop; 36 this.oDiv.style.left=event.clientX-this.disX+'px'; 37 this.oDiv.style.top=event.clientY-this.disY+'px'; 38 }, 39 EndMove:function(){ 40 document.onmousemove=null; 41 document.onmousedown=null; 42 }, 43 Limite:function(){ 44 45 } 46 }
js拖动界面元素2--附加方法
1 function Drag(id,options){ 2 //添加属性 3 this.disX=0; 4 this.disY=0; 5 var _this=this;//----->他拖拽的是一个对象 6 this.Drag=document.getElementById(id); 7 this.SetOptions(options); 8 this.handler=this.options.handler; 9 this.lockX=this.options.lockX; 10 this.lockY=this.options.lockY; 11 this.limit=this.options.limit; 12 //console.log(this.handler); -->oSpan 13 14 this.handler.onmousedown=function(){ 15 _this.StartDrag(); 16 } 17 18 } 19 Drag.prototype= { 20 //添加原型方法 21 SetOptions: function ( options ) { 22 this.options = { 23 handler: this.Drag, 24 limit: true, //锁定范围 25 lock: false, //锁定位置 26 lockX: false, //锁定水平位置 27 lockY: false, //锁定垂直位置 28 maxContainer: document.documentElement || document.body //指定限制容器 29 }; 30 //遍历json然后返回出去 31 for ( var i in options ) this.options[i] = options[i] 32 }, 33 StartDrag: function ( event ) { 34 //alert(this)-->object object 35 this.Drag.onselectstart=function(){ 36 return false; 37 } 38 this.handler.innerHTML='oh yeah'; 39 this.css(this.handler,{background:'#eee',color: '#000'}); 40 var _this = this; 41 var event = event || window.event; 42 this.disX = event.clientX - this.Drag.offsetLeft; 43 this.disY = event.clientY - this.Drag.offsetTop; 44 document.onmousemove=function(){ 45 _this.StartMove(); 46 } 47 document.onmouseup=function(){ 48 _this.EndMove(); 49 } 50 }, 51 StartMove: function( event){ 52 var event= event || window.event; 53 //this.l=event.clientX-this.offsetLeft; 54 //this.t=event.clientY-this.offsetTop; 55 var l= event.clientX - this.disX; 56 var t = event.clientY - this.disY; 57 if ( this.lock ) { 58 return; 59 } 60 if ( this.limit ) { 61 if ( l < 0 ) { 62 l = 0; 63 } 64 else if ( l > document.documentElement.clientWidth - this.Drag.offsetWidth ) { 65 l = document.documentElement.clientWidth - this.Drag.offsetWidth; 66 } 67 if ( t < 0 ) { 68 t = 0; 69 } 70 else if ( t > document.documentElement.clientHeight - this.Drag.offsetHeight ) { 71 t = document.documentElement.clientHeight - this.Drag.offsetHeight; 72 } 73 } 74 this.Drag.value='yeah'; 75 this.lockX || (this.Drag.style.left = l + 'px'); 76 this.lockY || (this.Drag.style.top = t + 'px'); 77 }, 78 EndMove: function () { 79 document.onmousemove = null; 80 this.css(this.handler,{background:'#00F',color: '#fff'}); 81 this.handler.innerHTML='Drag Me'; 82 }, 83 //添加事件绑定 84 addHandler: function ( obj, type, handler ) { 85 if ( obj.addEventListener ) { 86 obj.addEventListener ( type, handler, false ); 87 } else if ( obj.attachEvent ) { 88 obj.attachEvent ( "on" + type, handler ); 89 } else { 90 obj["on" + type] = handler; 91 } 92 }, 93 //删除绑定事件 94 removeHandler: function ( oElement, sEventType, fnHandler ) { 95 return oElement.removeEventListener ? oElement.removeEventListener ( sEventType, fnHandler, false ) : oElement.detachEvent ( "on" + sEventType, fnHandler ) 96 }, 97 //绑定事件到对象 98 bind: function ( object, fnHandler ) { 99 return function () { 100 return fnHandler.apply ( object, arguments ) 101 } 102 }, 103 css: function(obj,json) { 104 for ( var attr in json ) { 105 obj.style[attr] = json[attr]; 106 } 107 } 108 }
帮群里解决了关于这个的问题，顺便封装到了jQuery下
1 $.fn.extend({ 2 drag:function(){ 3 var disx = 0; 4 var disy = 0; 5 var This = this; 6 $(this).css({background:'pink',width:'50px',height:'50px',position:'absolute'}) 7 this.mousedown(function(ev){ 8 disx = ev.pageX - $(this).offset().left; 9 disy = ev.pageY - $(this).offset().top; 10 $(document).mousemove(function(ev){ 11 This.css({left:ev.pageX - disx,top:ev.pageY - disy}); 12 }); 13 $(document).mouseup(function(){ 14 $(this).off(); 15 }); 16 return false; 17 }) 18 } 19 })
自定义ALERT和CONFIREM--不完善版本，偷懒，所以需要引入jQuery
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 /*微博数字字体 8 font-family:Constantia,Georgia; 9 */ 10 *{margin: 0;padding: 0;font-family:"microsoft yahei";} 11 12 /*遮罩区域*/ 13 .CUSTROM-mask-whole{height: 100%;width: 100%;z-index: 9999;background: #000;position: fixed;top: 0;left: 0;opacity: 0.3;display: none;} 14 15 /*共同区域开始*/ 16 17 /*ALERT和CONFIRM共同大小和居中*/ 18 .CUSTROM-common{height:200px;width: 300px;position: fixed;left: 50%;top: 50%;z-index: 10000;text-align: center; 19 /*固定定位实现居中*/ 20 margin-top:-100px ;/*自身高度的一半*/ 21 margin-left:-150px;/*自身宽度的一半*/ 22 } 23 24 /*ALERT和CONFIRM共同的文字区域和控制区域*/ 25 .CUSTROM-common-content{height: 160px;width: 100%;background:#ffffff;line-height: 160px;} 26 .CUSTROM-common-control{width: 100%;height: 40px;text-align: center;line-height: 40px;} 27 .CUSTROM-common-control:after{content: '';display: block;clear: both;font-size: 0;width: 0;height: 0;visibility: hidden;} 28 29 /*ALERT和CONFIRM共同的a 属性*/ 30 .CUSTROM-common-control a{display: block;transition: 0.2s all ease-in-out 0s;background: #555;font-size: 18px;color: #fff; 31 text-decoration: none;letter-spacing: 2px;} 32 33 /*ALERT和CONFIRM共同的a:hover效果*/ 34 .CUSTROM-common-control a:hover{color: #02B2FF;background: #444;} 35 36 /*共同区域结束*/ 37 38 39 /*单独的区域*/ 40 .CUSTROM-control-alert{width: 100%;} 41 42 .CUSTROM-control-confirm-cancel{width: 49%;float: left;} 43 .CUSTROM-control-confirm-border{width: 2%;height: 100%;float: left;background: #5CA149;} 44 .CUSTROM-control-confirm-sure{width: 49%;float: left;} 45 46 /*控制ALERT和CONFIRM区域*/ 47 .CUSTROM-ALERT{display: none;} 48 .CUSTROM-CONFIRM{display: none;} 49 50 51 </style> 52 </head> 53 <body> 54 55 <a href="javascript:alert('This is alert')">显示ALERT浮层</a> 56 <a href="javascript:confirm('是否要关掉自定义控件？',function(flag){if(flag){alert('你点击了true');}else{alert('你点击了false')}})">显示CONFIRM浮层</a> 57 58 </body> 59 <script src="jquery-1.9.1.min.js"></script> 60 <script> 61 (function (window,jQuery) { 62 //设置弹出框的样式 63 var HTMLS={ 64 tipsStart:'<!--customer ALERT && CONFIRM start-->', 65 mask:'<div class="CUSTROM-mask-whole"></div>', 66 alert:'<div class="CUSTROM-common CUSTROM-ALERT"><div class="CUSTROM-common-content CUSTROM-common-content-alert"></div><div class="CUSTROM-common-control"><a href="javascript:;" class="CUSTROM-control-alert">确定</a> </div> </div>', 67 confirm:'<div class="CUSTROM-common CUSTROM-CONFIRM"><div class="CUSTROM-common-content CUSTROM-common-content-confirm">true</div><div class="CUSTROM-common-control"><a href="javascript:;" class="CUSTROM-control-confirm-cancel">取消</a><span class="CUSTROM-control-confirm-border"></span><a href="javascript:;" class="CUSTROM-control-confirm-sure">确定</a> </div> </div>', 68 tipsEnd:'<!--customer ALERT && CONFIRM end-->' 69 }; 70 //WinPop对象 71 function WinPop(){ 72 var config={}; 73 this.set=function(n,v){ 74 config[n]=v; 75 }; 76 this.get= function (n) { 77 return config[n] 78 }; 79 this.init(); 80 } 81 WinPop.prototype= { 82 init: function () { 83 this.createDom(); 84 this.bindEvent(); 85 }, 86 createDom: function () { 87 var body=jQuery('body'); 88 for(var i in HTMLS){ 89 body.append(HTMLS[i]) 90 } 91 }, 92 bindEvent: function () { 93 var body=jQuery('body'); 94 var _this=this; 95 96 //ALERT 确定 97 body.on('click','.CUSTROM-control-alert', function (e) { 98 _this.hideDom('.CUSTROM-mask-whole'); 99 jQuery(this).parent().parent().hide(); 100 }); 101 102 //CONFIRM 取消 103 body.on('click','.CUSTROM-control-confirm-cancel', function (e) { 104 var callBack=_this.get('confirmCallBack') 105 callBack && callBack(false); 106 }); 107 108 //CONFIRM 确定 109 body.on('click','.CUSTROM-control-confirm-sure', function (e) { 110 var callBack=_this.get('confirmCallBack') 111 callBack && callBack(true); 112 }); 113 114 //键盘 115 body.on("keyup", function(e) { 116 var keyCode= e.keyCode; 117 if(keyCode===27){ 118 jQuery('.CUSTROM-mask-whole').hide(); 119 jQuery('.CUSTROM-common').fadeOut(); 120 } 121 }) 122 }, 123 alert: function (str) { 124 var str= typeof str === 'string'? str : str.toString(); 125 this.hideDom('.CUSTROM-CONFIRM'); 126 jQuery('.CUSTROM-common-content-alert').text(str); 127 this.showDom('.CUSTROM-mask-whole','.CUSTROM-ALERT'); 128 }, 129 confirm: function (str,callBack) { 130 var str= typeof str === 'string'? str : str.toString(); 131 this.hideDom('.CUSTROM-ALERT'); 132 jQuery('.CUSTROM-common-content-confirm').text(str); 133 this.showDom('.CUSTROM-mask-whole','.CUSTROM-CONFIRM'); 134 this.set('confirmCallBack',(callBack || function() {})); 135 }, 136 showDom: function () { 137 for(var m=0;m<arguments.length;m++){ 138 jQuery(arguments[m]).slideDown(); 139 } 140 }, 141 hideDom: function () { 142 for(var m=0;m<arguments.length;m++){ 143 jQuery(arguments[m]).slideUp(); 144 } 145 }, 146 destroyDom: function () { 147 } 148 }; 149 var obj=new WinPop(); 150 window.alert= function (str) { 151 //obj.alert.call(this,str); 这样的话作用域变成了window 152 obj.alert.call(obj,str); 153 } 154 window.confirm= function (str,callBack) { 155 obj.confirm.call(obj,str,callBack); 156 } 157 })(window,jQuery); 158 </script> 159 </html>
