自己写遮盖的心得

japankn

浏览: 216183 次
性别:
来自: 广西

最近访客更多访客>>

airyoureyes

dongguangming88

z360901061

Sdky

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

CSS JavaScript Ajax Firefox HTML

近来项目中为了使用Ajax技术，需要一个友好的遮盖层效果的等待画面，本人比较懒，没有使用一些ajax框架，自己动手写了一个遮盖层。

其中遇到几个比较难搞定的问题：

1、select这个优先级比较高的页面控件

2、兼容Mozilla

3、消息框的自动居中（起码看起来比较舒服）

从网络上搜索了一堆解决办法，比较适用的有：

1、使用比select优先级更高的遮住他（还有一种是将它隐藏，不喜欢），我只用Iframe，效果不错！

2、兼容Mozilla主要是支持Mozilla的css样式（网上搜）

3、从网上摘抄了一段css代码（呵呵）

这样主要的问题解决了。

我的所有样式都写在了js中，这样免去了每个页面的导入css文件和创建占位的div。样例如下：

页面代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    //注意下面这句是针对Firefox的，如果不写要报错（也能运行）
    <meta http-equiv="Content-Type" content="application/vnd.mozilla.maybe.feed; charset=utf-8" />
    <title></title>
    <link href="02_.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="tool.js"></script>
    <script type="text/javascript" src="02_.js"></script>
</head>
<body>
<input type="button" value="显示" onclick="new MesDiv().dostart('标题内容','提示内容',true)">
<select>
    <option>select也能被盖住</option>
</select><br>
</body>
</html>

js代码

var bad,mes;
function MesDiv() {
    this.isIE = document.all ? true : false;
    this.init = function(title, content, bl) {
        if (!bad || !mes) {
            bad = this.baddingDiv();
            mes = this.mesDiv(title, content, bl);
            document.body.appendChild(bad);
            document.body.appendChild(mes);
        }
    }
    //底层，作为全屏的铺垫
    this.baddingDiv = function() {
        var d = createObject("div");
        var ifr = createObject("iframe");
        d.style.cssText = "position:absolute;width:100%;height:100%;" +
                          "background:#999999;left:0px;right:0px;top:0px;" +
                          "bottom:0px;-moz-opacity:0;filter:alpha(opacity = 0);" +
                          "z-index: 99;";
        ifr.style.cssText = "position:absolute;width:100%;height:100%;" +
                            "background:#CCCCCC;left:0px;right:0px;top:0px;" +
                            "bottom:0px;-moz-opacity:0;" +
                            "z-index: 96;";
        ifr.frameBorder = 0;
        d.appendChild(ifr);
        return d;
    }
    /*
    * 显示消息的层
    * title 标题内容
    * content 提示内容
    * bl是否有关闭事件及按钮，true为有
    */
    this.mesDiv = function(title, content, bl) {
        //消息框的外层
        var d1 = createObject("div");
        d1.style.cssText = "position: absolute;margin:-150px 0 0 -200px;z-index:100;" +
                           "top:50%;left:50%; width:400px;background-color: #FFFFFF;" +
                           "-moz-opacity:0.5;filter:alpha(opacity = 50);";
        //标题层
        var d2 = createObject("div");
        d2.style.cssText = "height:20px;padding-top:8px;background-color: #DDDDDD;";
        var d2_div1 = createObject("div");
        d2_div1.style.cssText = "float:left;width:290px;padding-left:20px;overflow:hidden;word-break:keep-all; text-overflow:ellipsis";
        d2_div1.appendChild(createText(title || "aaaaa"));
        d2.appendChild(d2_div1);
        if (bl || false) {
            var d2_div2 = createObject("div");
            d2_div2.style.cssText = "float:right;width:80px;text-align:right;padding-right:10px;";
            var d2_div2_span = createObject("span");
            d2_div2_span.onclick = function() {
                new MesDiv().showBackground(bad, 0,false);
    new MesDiv().showBackground(mes, 50,false);
            }
            d2_div2_span.innerHTML = "×"
            d2_div2.appendChild(d2_div2_span);
            d2.appendChild(d2_div2);
        }
        //内容层
        var d3 = createObject("div");
        d3.style.cssText = "border-top: #AAAAAA; border-top-style:solid;" +
                           "border-top-width:1px;height:100px;text-align:center;";
        var d3_div1 = createObject("div");
        d3_div1.style.cssText = "padding-top:20px;";
        var d3_div1_img = createObject("img");
        d3_div1_img.src = "warn.png";
        d3_div1_img.align = "absmiddle";
        d3_div1.appendChild(d3_div1_img);
        d3_div1.appendChild(createText(content || "bbbbbb"));
  d3.appendChild(d3_div1);
        if (!bl || false) {
            var d3_div2 = createObject("div");
            d3_div2.style.cssText = "padding-top:10px;";
            var d3_div2_img = createObject("img");
            d3_div2_img.src = "load.gif";
            d3_div2.appendChild(d3_div2_img);
            d3.appendChild(d3_div2);
        }
        d1.appendChild(d2);
        d1.appendChild(d3);
        return d1;
    }
    this.dostart = function(title, content, bl) {
        this.init(title, content, bl);
        bad.style.display = "block";
        mes.style.display = "block";
        this.showBackground(bad, 60,true);
        this.showBackground(mes, 100,true);
    }
    this.doend = function() {
        this.init();
        this.showBackground(bad, 0,false);
  this.showBackground(mes, 50,false);
    }
    //让背景渐渐变暗
    this.showBackground = function(obj, endInt,bl)
    {
        if (this.isIE)
        {
   if(bl){
    obj.filters.alpha.opacity += 2;
    if (obj.filters.alpha.opacity < endInt){
     setTimeout(function(){new MesDiv().showBackground(obj, endInt,bl)}, 5);
    }
   }else{
    obj.filters.alpha.opacity -= 2;
    if (obj.filters.alpha.opacity > endInt){
     setTimeout(function(){new MesDiv().showBackground(obj, endInt,bl)}, 5);
    }else{
     obj.style.display = "none";
    }
   }
        }
        else {
   if(bl){
    var al = parseFloat(obj.style.opacity);
    al += 0.02;
    obj.style.opacity = al;
    if (al < (endInt / 100)){
     setTimeout(function(){new MesDiv().showBackground(obj, endInt,bl)}, 5);
    }
   }else{
    var al = parseFloat(obj.style.opacity);
    al -= 0.02;
    obj.style.opacity = al;
    if (al > (endInt / 100)){
     setTimeout(function(){new MesDiv().showBackground(obj, endInt,bl)}, 5);
    }else{
     obj.style.display = "none";
    }
   }
        }
    }
}

其中有一些没能按照设想的那样写，主要还是javascript的水平不行，不过效果出来了！！希望以后可以写出更好的！！呵呵！！

分享到：

各数据库的加密函数 | oracle10g 安装中遇到网络配置需求为执行问 ...

2008-12-03 14:19
浏览 1217
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论