提示框组件
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:editor 阅读 356
抱着学习的态度,头一次封装的提示框组件,走过路过的看官,有力的出力。主要是用来代替alertconfrim。当然不能和其他比,学习,练习,样式有些丑....../**Msg有三个参数msg,obj,

抱着学习的态度,头一次封装的提示框组件,走过路过的看官,有力的出力。

主要是用来代替alert confrim。当然不能和其他比,学习,练习,样式有些丑......

  /*   *Msg 有三个参数 msg,obj,ev   msg 是弹出窗体要提示的消息   obj 是 隐藏消息框要处理的元素   ev 事件 主要用于阻止浏览器默认事件( 获取事件 ev || event)     */  (function(window,undefined){      var _$ = window.$,      document = window.document;        var $= function(id){          return "string" == typeof id ? document.getElementById(id) : id;      },      createObj= function(obj){          return document.createElement(obj);      },      isIE6= function(){         return (navigator.userAgent.indexOf('MSIE 6.') >= 0);      },      maskBox= function(){//遮罩层          var mask=createObj('div'), e=document.body, h=(e.scrollHeight+60),          s={              backgroundColor:'#000',              width:'100%',              height:h+'px',              position:'absolute',              left:'0',              top:'0',              opacity:'0.5',              filter:'alpha(opacity=50)'          };          for(var k in s){              mask.style[k]=s[k];          }          e.appendChild(mask);          return mask;      },      iframe= function(){//IE6          var ifr=createObj('iframe'),e=document.body,          w = e.scrollWidth,          h = e.scrollHeight,          s={              backgroundColor:'#000',              width:w+'px',              height:h+'px',              position:'absolute',              left:'0',              top:'0',              filter:'alpha(opacity=0)'          };          for(var k in s){              ifr.style[k]=s[k];          }          e.appendChild(ifr);          return ifr;      };  /* Msg 正式开始 */      var Msg=function(msg,obj,ev){          this.msg=msg;          this.obj=obj;          this.ev=ev;            !this.ev ? this.show():this.ask();//没有ev参数时,执行show()        };      Msg.prototype={          show:function(){              if(!this.msg) return;              var mask=maskBox(), wrap=this.wrapBox(), _self=this,o=this.obj;                if(!!isIE6()){                  var ifr=iframe();              }                $('msgbtn').onclick=function(){                   _self.remove(mask,wrap,ifr);                   _self.handle();              }          },          ask:function(){              if(!this.msg || !this.obj) return;//没有obj的情况下确保浏览器执行默认行为(跳转||提交);              var mask=maskBox(), wrap=this.wrapBox('Y'), _self=this;              this.stopDefault();                if(!!isIE6()){                  var ifr=iframe();              }                $('okbtn').onclick=function(){                   _self.remove(mask,wrap,ifr);                   _self.handle();              }              $('nobtn').onclick=function(){                   _self.remove(mask,wrap,ifr);              }          },          handle:function(){//a跳转, 表单提交,其余focus;              if(!this.obj || !this.obj.nodeName) return;                var n=this.obj.nodeName.toLowerCase();              switch(n){                  case 'a':                      window.location.href=this.obj.href;                      break;                  case 'input':                      this.obj.focus();                      break;                  case 'form':                      this.obj.submit();                      break;                  default:                      break;              }          },          stopDefault:function(){              var e= this.ev || event;              if ( e && e.preventDefault ){                  e.preventDefault();              }else{                  window.event.returnValue = false;              }          },          wrapBox:function(y){//消息内容层              var wrap=createObj('div'), e=document.body, html=[], s1='',              otop= (e.scrollTop||document.documentElement.scrollTop)+document.documentElement.clientHeight/2,              oleft= (e.scrollLeft||document.documentElement.scrollLeft)+document.documentElement.clientWidth/2,              s={                  backgroundColor:'#b4cad0',                  width:'280px',                  position:'absolute',                  left:(oleft-150)+'px',                  top:otop+'px',                  padding:'10px'              };              for(var k in s){                  wrap.style[k]=s[k];              }                s1='display:block;border:1px solid #a8d7e3;background:#ddf1f7 url(msgshow/pop.png) 0 -24px repeat-x;color:#38647e;width:80px;cursor:pointer';              html.push('<div style="background:#fff;color:#4b4b4b;font-size:14px;line-height:150%;padding:10px;text-align:center">');              html.push('<b style="display:block;background:url(msgshow/pop.png) 0 0 no-repeat;width:21px;height:18px;position:absolute;left:25px;top:30px;"></b>');              html.push('<b id="msg" style="display:block;border-bottom:1px dashed #ccc;padding:10px 0 10px 35px;text-align:left">'+ this.msg +'</b>');              if(!y){                  html.push('<b id="msgbtn" style="margin:15px auto 0;'+s1+'">确定</b></div>');              }else{                  html.push('<span style="display:block;margin:15px auto 0;width:190px;height:25px;"><b id="okbtn" style="margin-right:20px;float:left;'+s1+'">确定</b>');                  html.push('<b id="nobtn" style="float:left;'+s1+'">取消</b></span></div>');              }              wrap.innerHTML=html.join('');                e.appendChild(wrap);              return wrap;          },          remove:function(){              for(var i=0,l=arguments.length;i<l;i++){//for in  arguments IE6 没有反应??                  var o=arguments[i];                  if(o) document.body.removeChild(o);              }          }      };        _Msg = window.Msg;      window.Msg= Msg;  })(window);

 

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2