shade.0.2.js
上传用户:cdpainuo
上传日期:2022-07-12
资源大小:5257k
文件大小:4k
源码类别:

Jsp/Servlet

开发平台:

Java

  1. //得到浏览器显示的屏幕高度
  2. document.getViewportHeight = function(){
  3. if (window.innerHeight!=window.undefined) return window.innerHeight;
  4. if (document.compatMode=='CSS1Compat') return document.documentElement.clientHeight;
  5. if (document.body) return document.body.clientHeight; 
  6. return window.undefined; 
  7. }
  8. //得到浏览器显示的屏幕宽度
  9. document.getViewportWidth = function(){
  10. if (window.innerWidth!=window.undefined) return window.innerWidth; 
  11. if (document.compatMode=='CSS1Compat') return document.documentElement.clientWidth; 
  12. if (document.body) return document.body.clientWidth; 
  13. }
  14. /**
  15.  * 遮罩层,组件的显示及隐藏
  16.  */
  17. Shade = {
  18. mask:null,
  19. container:null,
  20. isIE6:null,
  21. init:function(){
  22. //判断浏览器是否是ie6或其以下版本
  23. var brsVersion = parseInt(window.navigator.appVersion.charAt(0), 10);
  24. if (brsVersion <= 6 && window.navigator.userAgent.indexOf("MSIE") > -1) {
  25. this.isIE6 =  true;
  26. }else{
  27. this.isIE6 = false;
  28. }
  29. //将遮罩层加入body
  30. var popmask = document.createElement('div');
  31. popmask.id = 'mask';
  32. document.body.appendChild(popmask);
  33. this.mask = document.getElementById("mask");
  34. //将组件边框加入body
  35. var popcont = document.createElement('div');
  36. popcont.id = 'popupContainer';
  37. popcont.innerHTML ="<div id='popupInner'>"+
  38. "<div id='popupTitleBar'>"+
  39. "<div id='popupTitle'></div>"+
  40. "<div id='popupControls'>"+
  41. "<img src='images/close.gif' onclick='Shade.hide();' id='popCloseBox' />"+
  42. "</div></div>"+
  43. "<div id='popupFrame'>dd</div>";
  44. document.body.appendChild(popcont);
  45. this.container = document.getElementById("popupContainer");
  46. },
  47. setMaskSize:function(){
  48. var theBody = document.body;
  49. var fullHeight = document.getViewportHeight();
  50. var fullWidth = document.getViewportWidth();
  51. // Determine what's bigger, scrollHeight or fullHeight / width
  52. if (fullHeight > theBody.scrollHeight) {
  53. this.popHeight = fullHeight;
  54. } else {
  55. this.popHeight = theBody.scrollHeight;
  56. }
  57. if (fullWidth > theBody.scrollWidth) {
  58. this.popWidth = fullWidth;
  59. } else {
  60. this.popWidth = theBody.scrollWidth;
  61. }
  62. this.mask.style.height = this.popHeight + "px";
  63. this.mask.style.width = this.popWidth + "px";
  64. },
  65. toCenter:function(conf){
  66. var s = this.container.style;
  67. s.left = (document.getViewportWidth()-conf.width)/2+"px";
  68. s.top = (document.getViewportHeight()-conf.height)/2+"px";
  69. },
  70. show:function(conf){
  71. //初始化
  72. this.init();
  73. //设置遮罩层的长度和宽度
  74. this.setMaskSize()
  75. //设置组件的标题
  76. document.getElementById('popupTitle').innerHTML = conf.title;
  77. //设置组件的长和宽
  78. this.container.style.width = conf.width+"px";
  79. this.container.style.height = conf.height+"px";
  80. var frame = document.getElementById('popupFrame');
  81. frame.style.width = (conf.width -4)+"px";
  82. frame.style.height = (conf.height -31)+"px";
  83. //将组件居中显示
  84. this.toCenter(conf);
  85. //设置组件内容
  86. frame.innerHTML = conf.templete;
  87. this.render(conf);
  88. this.enDrag();
  89. var Shade_this = this ; //传递this参数,到浏览器窗体改变事件
  90. Shade_this.conf = conf ;
  91. window.onresize = function(){
  92. if (Shade_this.container) {
  93. Shade_this.render(Shade_this.conf);
  94. }
  95. } ;
  96. },
  97. hide:function(){
  98. //删除遮罩层
  99. document.body.removeChild(this.mask);
  100. //删除组件层
  101. document.body.removeChild(this.container);
  102. },
  103. /*增加拖动功能*/
  104. enDrag: function(){
  105. var popupTitleBar = document.getElementById('popupTitleBar') ;
  106. popupTitleBar.style.cursor = "move" ;
  107. Drag.init(popupTitleBar,this.container);
  108. } ,
  109. render: function(conf){
  110. this.setMaskSize();
  111. this.toCenter(conf);
  112. }
  113. }