Showbo.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. var Showbo={author:'showbo',homepage:'http://www.code-design.cn'};
  2. //是否为ie浏览器
  3. Showbo.IsIE=!!document.all;
  4. //ie浏览器版本
  5. Showbo.IEVersion=(function(){if(!Showbo.IsIE)return -1;try{return parseFloat(/msie ([\d\.]+)/i.exec(navigator.userAgent)[1]);}catch(e){return -1;}})();
  6. //按id获取对象
  7. Showbo.$=function(Id,isFrame){var o;if("string"==typeof(Id))o= document.getElementById(Id);else if("object"==typeof(Id))o= Id;else return null;return isFrame?(Showbo.IsIE?frames[Id]:o.contentWindow):o;}
  8. //按标签名称获取对象
  9. //页面的高和宽******************************
  10. Showbo.isStrict=document.compatMode == "CSS1Compat";
  11. Showbo.BodyScale={x:0,y:0,tx:0,ty:0};//(x,y):当前的浏览器容器大小 (tx,ty):总的页面滚动宽度和高度
  12. Showbo.getClientHeight=function(){/*if(Showbo.IsIE)*/return Showbo.isStrict ? document.documentElement.clientHeight :document.body.clientHeight;/*else return self.innerHeight;*/}
  13. Showbo.getScrollHeight=function(){var h=!Showbo.isStrict?document.body.scrollHeight:document.documentElement.scrollHeight;return Math.max(h,this.getClientHeight());}
  14. Showbo.getHeight=function(full){return full?this.getScrollHeight():this.getClientHeight();}
  15. Showbo.getClientWidth=function(){/*if(Showbo.IsIE)*/return Showbo.isStrict?document.documentElement.clientWidth:document.body.clientWidth;/*else return self.innerWidth;*/}
  16. Showbo.getScrollWidth=function(){var w=!Showbo.isStrict?document.body.scrollWidth:document.documentElement.scrollWidth;return Math.max(w,this.getClientWidth());}
  17. Showbo.getWidth=function(full){return full?this.getScrollWidth():this.getClientWidth();}
  18. Showbo.initBodyScale=function(){Showbo.BodyScale.x=Showbo.getWidth(false);Showbo.BodyScale.y=Showbo.getHeight(false);Showbo.BodyScale.tx=Showbo.getWidth(true);Showbo.BodyScale.ty=Showbo.getHeight(true);}
  19. //页面的高和宽******************************
  20. Showbo.Msg={
  21. INFO:'info',
  22. ERROR:'error',
  23. WARNING:'warning',
  24. IsInit:false,
  25. timer:null,
  26. dvTitle:null,
  27. dvCT:null,
  28. dvBottom:null,
  29. dvBtns:null,
  30. lightBox:null,
  31. dvMsgBox:null,
  32. defaultWidth:300,
  33. moveProcessbar:function(){
  34. var o=Showbo.$('dvProcessbar'),w=o.style.width;
  35. if(w=='')w=20;
  36. else{
  37. w=parseInt(w)+20;
  38. if(w>100)w=0;
  39. }
  40. o.style.width=w+'%';
  41. },
  42. InitMsg:function(width){
  43. //ie下不按照添加事件的循序来执行,所以要注意在调用alert等方法时要检测是否已经初始化IsInit=true
  44. var ifStr='<iframe src="javascript:false" mce_src="javascript:false" style="position:absolute; visibility:inherit; top:0px;left:0px;width:100%; height:100%; z-index:-1;'
  45. +'filter=\'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)\';"></iframe>',
  46. html='<div class="top"><div class="right"><div class="title" id="dvMsgTitle"></div></div></div>'+
  47. '<div class="body"><div class="right"><div class="ct" id="dvMsgCT"></div></div></div>'+
  48. '<div class="bottom" id="dvMsgBottom"><div class="right"><div class="btn" id="dvMsgBtns"></div></div></div>';
  49. this.dvMsgBox=document.createElement("div");
  50. this.dvMsgBox.id="dvMsgBox";
  51. this.dvMsgBox.innerHTML+=html;
  52. document.body.appendChild(this.dvMsgBox);
  53. this.lightBox=document.createElement("div");
  54. this.lightBox.id="ShowBolightBox";
  55. document.body.appendChild(this.lightBox);
  56. if(Showbo.IsIE&&Showbo.IEVersion<7){//加iframe层修正ie6下无法遮盖住select的问题
  57. this.lightBox.innerHTML+=ifStr;
  58. this.dvMsgBox.innerHTML+=ifStr;
  59. }
  60. this.dvBottom=Showbo.$('dvMsgBottom');
  61. this.dvBtns=Showbo.$('dvMsgBtns');
  62. this.dvCT=Showbo.$('dvMsgCT');
  63. this.dvTitle=Showbo.$('dvMsgTitle');
  64. this.IsInit=true;
  65. },
  66. checkDOMLast:function(){//此方法非常关键,要不无法显示弹出窗口。两个对象dvMsgBox和lightBox必须处在body的最后两个节点内
  67. if(document.body.lastChild!=this.lightBox){
  68. document.body.appendChild(this.dvMsgBox);
  69. document.body.appendChild(this.lightBox);
  70. }
  71. },
  72. createBtn:function(p,v,fn){
  73. var btn=document.createElement("input");
  74. btn.type="button";
  75. btn.className='bttn';
  76. btn.value=v;
  77. btn.onmouseover=function(){this.className='btnfocus';}
  78. btn.onmouseout=function(){this.className='bttn';}
  79. btn.onclick=function(){
  80. Showbo.Msg.hide();
  81. if(fn)fn(p);
  82. }
  83. return btn;
  84. },
  85. alert:function(msg,fn){
  86. this.show({buttons:{yes:'确认'},msg:msg,fn:fn});
  87. },
  88. confirm:function(msg,fn){
  89. //fn为回调函数,参数和show方法的一致
  90. this.show({buttons:{yes:'确认',no:'取消'},msg:msg,title:'提示',fn:fn});
  91. },
  92. prompt:function(labelWord,defaultValue,txtId,fn){
  93. if(!labelWord)labelWord='请输入:';
  94. if(!defaultValue)defaultValue="";
  95. if(!txtId)txtId="msg_txtInput";
  96. this.show({title:'输入提示',msg:labelWord+'<input type="text" id="'+txtId+'" style="width:200px" value="'+defaultValue+'"/>',buttons:{yes:'确认',no:'取消'},fn:fn});
  97. },
  98. wait:function(msg,title){
  99. if(!msg)msg='正在处理..';
  100. this.show({title:title,msg:msg,wait:true});
  101. },
  102. show:function(cfg){
  103. //cfg:{title:'',msg:'',wait:true,icon:'默认为信息',buttons:{yes:'',no:''},fn:function(btn){回调函数,btn为点击的按钮,可以为yes,no},width:显示层的宽}
  104. //如果是等待则wait后面的配置不需要了。。
  105. if(!cfg)throw("没有指定配置文件!");
  106. //添加窗体大小改变监听
  107. if(Showbo.IsIE)window.attachEvent("onresize",this.onResize);
  108. else window.addEventListener("resize",this.onResize,false);
  109. if(!this.IsInit)this.InitMsg();//初始化dom对象
  110. else this.checkDOMLast();//检查是否在最后
  111. //检查是否要指定宽,默认为300
  112. if(cfg.width)this.defaultWidth=cfg.width;
  113. this.dvMsgBox.style.width=this.defaultWidth+'px';
  114. //可以直接使用show方法停止为进度条的窗口
  115. if(this.timer){clearInterval(this.timer);this.timer=null;}
  116. this.dvTitle.innerHTML='';
  117. if(cfg.title)this.dvTitle.innerHTML=cfg.title;
  118. this.dvCT.innerHTML='';
  119. if(cfg.wait){
  120. if(cfg.msg)this.dvCT.innerHTML=cfg.msg;
  121. this.dvCT.innerHTML+='<div class="pro"><div class="bg" id="dvProcessbar"></div></div>';
  122. this.dvBtns.innerHTML='';
  123. this.dvBottom.style.height='10px';
  124. this.timer=setInterval(function(){Showbo.Msg.moveProcessbar();},1000);
  125. }
  126. else{
  127. //if(!cfg.icon)cfg.icon=Showbo.Msg.INFO;
  128. if(!cfg.buttons||(!cfg.buttons.yes&&!cfg.buttons.no)){
  129. cfg.buttons={yes:'确定'};
  130. }
  131. if(cfg.icon)this.dvCT.innerHTML='<div class="icon '+cfg.icon+'"></div>';
  132. if(cfg.msg)this.dvCT.innerHTML+=cfg.msg+'<div class="clear"></div>';
  133. this.dvBottom.style.height='45px';
  134. this.dvBtns.innerHTML='<div class="height"></div>';
  135. if(cfg.buttons.yes){
  136. this.dvBtns.appendChild(this.createBtn('yes',cfg.buttons.yes,cfg.fn));
  137. if(cfg.buttons.no)this.dvBtns.appendChild(document.createTextNode(' '));
  138. }
  139. if(cfg.buttons.no)this.dvBtns.appendChild(this.createBtn('no',cfg.buttons.no,cfg.fn));
  140. }
  141. Showbo.initBodyScale();
  142. this.dvMsgBox.style.display='block';
  143. this.lightBox.style.display='block';
  144. this.onResize(false);
  145. },
  146. hide:function(){
  147. this.dvMsgBox.style.display='none';
  148. this.lightBox.style.display='none';
  149. if(this.timer){clearInterval(this.timer);this.timer=null;}
  150. if(Showbo.IsIE)window.detachEvent('onresize',this.onResize);
  151. else window.removeEventListener('resize',this.onResize,false);
  152. },
  153. onResize:function(isResize){
  154. if(isResize)Showbo.initBodyScale();
  155. Showbo.Msg.lightBox.style.width=Showbo.BodyScale.tx+'px';
  156. Showbo.Msg.lightBox.style.height=Showbo.BodyScale.ty+'px';Showbo.Msg.lightBox.style.zIndex=999;
  157. Showbo.Msg.dvMsgBox.style.top=240+'px';
  158. Showbo.Msg.dvMsgBox.style.left=Math.floor((Showbo.BodyScale.x-Showbo.Msg.dvMsgBox.offsetWidth)/2)+'px';Showbo.Msg.dvMsgBox.style.zIndex=9999;Showbo.Msg.dvMsgBox.style.position="fixed";
  159. }
  160. }