一步步教你实现弹出窗口（第1部分）

最新推荐文章于 2022-06-28 16:30:25 发布

cheng5128

最新推荐文章于 2022-06-28 16:30:25 发布

阅读量866

点赞数

文章标签： function dialog constructor javascript ie div

本文链接：https://blog.csdn.net/cheng5128/article/details/4680349

版权

在蓝色理想看到一个漂亮的弹出层，不过看不惯其代码，决定自己重写一个。漂亮是有代价，它用了许多图片，而且那是半透明图片，这在IE6中就遇到麻烦，需要动用IE的DXImageTransform.Microsoft.AlphaImageLoader来实现fixbug！对于我而言，图片根本是没有必要，因为我掌握非常先进的动态生成图片（位图）的技术，这样就可以大大减少请求数与图片对服务器的压力。但是，该死的IE6不支持这种技术，因此我还是需要一些图片。至于半透明与圆角与阴影，我是利用vml与canvas与CSS3高级特征来实现。好了，开场白就此打住，我们开始吧。

通常而言，弹出窗口都是居中对齐的，因此我们需要获取浏览器可视区的大小。这里有一个函数，可以帮我们迅速取得结果。


 var getBrowserWindowSize = function(){
      var de = document.documentElement;
      return {
        'width':(
        window.innerWidth
          || (de && de.clientWidth )
          || document.body.clientWidth),
        'height':(
        window.innerHeight
          || (de && de.clientHeight )
          || document.body.clientHeight)
      }
    }

要创建一个弹出窗口，我们需要一些参数，具体可以参考这里。但作为起步，我们不需要面面俱到，现在只要title，width与height这三个就算了。以下是其主体框架：


  var Dialog = function(){
    var options = arguments[0] || {};
    this.title = options.title || "新窗口",
    this.width = options.width || 400,
    this.height = options.height || 300,
    this.contain = document.createElement("div"),
    this.id = "id" + (( new Date() * Math.random()) >> 0);
    this.init();
  }
  Dialog.prototype = {
    constructor: Dialog,
    init: function() {
      //*****************
    }
  }

UI控件就难免涉及动态设置样式的问题，通常人们都是这样做：


 el.style.cssText = "******************"

换言之，就是使用内联样式。但这样做有两个缺点：1，不能使用伪类；2，相同样式容易重复定义。我的一个脚本虽然也用到cssText，但生成的是内部样式，完美地避免了这两个问题。我早期的UI控件都是利用它来设置样式。不过，如你们所见，它的体积比较庞大，而且一下子设置所有样式，需要对UI有够全面的了解，在迭代开发中，恐怕没有人敢保证他现在写的样式就是最后确定用的样式。因此，我又开发另一套动态设置样式规则的方法。IE有一个很好用的方法，createStyleSheet，能生成一个样式表对象。不过有个缺陷，就是一个页面只能使用31次，再多就只能求助于document.createElement("style")。IE的样式表对象有两个重要的方法，分别为addRule与removeRule 。我是不推荐用removeRule方法，同理，任何移除节点的方法能不用就不要用。因为IE7中，引入新的DOM元素的回收机制：在离开页面时回收DOM树上的所有元素。换言之，如果所有元素（无论动态创建的还是原来的），只要关闭引页面时，它们都在DOM树上，就不会泄漏，否则肯定泄漏。你不要以为当时移除节点后，IE7会即时回收它，对不起，它很懒，因此内存会一直飙升，直到关闭时才得以喘息。回归正传，标准浏览器肯定没有这些方法，对应方法都是非常不好用，因此我们让它们拥有这种IE风格的方法即可。


if(typeof document.createStyleSheet === 'undefined') {
    document.createStyleSheet = (function() {
      function createStyleSheet() {
        var element = document.createElement('style');
        element.type = 'text/css';
        document.getElementsByTagName('head')[0].appendChild(element);
        var sheet = document.styleSheets[document.styleSheets.length - 1];
        if(typeof sheet.addRule === 'undefined')
          sheet.addRule = function(selectorText, cssText, index) {
            if(typeof index === 'undefined')
              index = this.cssRules.length;
            this.insertRule(selectorText + ' {' + cssText + '}', index);
          };
        return sheet;
      }
      return createStyleSheet;
    })();
  }

然后我们用createStyleSheet创建一个样式表对象，并把作为Dialog的静态属性，目的让所有Dialog对象都共享这个对象，因为在IE中，这方法在一个页面只能使用31次，能省就省啊！


      if(!!Dialog.sheet){
        Dialog.sheet.addRule(selector,declaration);
      }else{
        Dialog.sheet = document.createStyleSheet();
        Dialog.sheet.addRule(selector,declaration);
      }

这有点像单例模式，但上面的写法只能保证创建一个样式表对象，不能防止两个完全一样的样式规则对象的创建。有关样式规则对象等概念，请参考我另一篇博文《再谈动态添加样式规则》。

<!doctype html>
<title>javascript线性渐变 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="样式规则 by 司徒正美" />
<meta name="description" content="样式规则 by 司徒正美" />

<div id="parent"></div><strong id="child" >样式规则</strong>
<p>https://developer.mozilla.org/cn/Canvas_tutorial</p>
<p>http://www.btinternet.com/~st_rise/main/mainfram.htm?../webplus/vml/vfill.htm</p>

在IE8开发人员工具下，我们可以看到一些样式规则完全一样。我的设想是选择器部分可以重复，但其内容不能重复。因此我们需要设置一个容器来保存与管理这些样式规则。

初步开发了这样一个小东西，类似java的集合，但去掉无关的功能：


  var memory = function(){
    var keys = [],values = [],size = 0;
    return {
      get : function(k){
        var results = [];
        for(var i=0,l=keys.length;i<l;i++){
          if(keys[i] == k){
            results.push(values[i])
          }
        }
        return results;
      },
      exists:function(k,v){
        var vs = this.get(k);
        for(var i=0,l=vs.length;i<l;i++){
          if(vs[i] == v){
            return true;
          }
        }
        return false;
      },
      set : function(k,v){
        keys.push(k);
        values.push(v);
        size++;
      },
      length :function(){
        return size;
      }
    }
  }

<!doctype html>
<title>javascript弹出窗口 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript弹出窗口 by 司徒正美" />
<meta name="description" content="javascript弹出窗口 by 司徒正美" />

window.onload = function(){
    var m = memory();
    m.set(1,"4");
    m.set("rrr","34");
    m.set("rrr","334");
    alert(m.get("rrr"))
    alert(m.exists("rrr","34"))
  }

</script>
<h2 style="text-align:center">javascript弹出窗口 by 司徒正美</h2>

我们把它整合到Dialog类中，这样就可以防止冗余重复的CSS代码生成了！

<p>https://developer.mozilla.org/cn/Canvas_tutorial</p>
<p>http://www.btinternet.com/~st_rise/main/mainfram.htm?../webplus/vml/vfill.htm</p>

至此，Dialog类的辅助方法就准备得差不多了，下一部分将正式进行开发。

cheng5128

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
一步步教你实现弹出窗口（第1部分）

在蓝色理想看到一个漂亮的弹出层，不过看不惯其代码，决定自己重写一个。漂亮是有代价，它用了许多图片，而且那是半透明图片，这在IE6中就遇到麻烦，需要动用IE的DXImageTransform.Microsoft.AlphaImageLoader来实现fixbug！对于我而言，图片根本是没有必要，因为我掌握非常先进的动态生成图片（位图）的技术，这样就可以大大减少请求数与图片对服务器的压力。但是
复制链接

扫一扫