打印

[原创]Javascript DOM 编程实例讲解--仿LightBox效果提示框（2008-4-5更新）

本主题由 caiying2007 于 2008-4-4 07:43 设置高亮

shiky

中级会员

帖子: 95
体力: 208
威望: 0
当前: 浙江金华
离线: 21 天

发短消息

61^# 大中小发表于 2008-4-17 09:50

请问LZ我调用一个xml文档，这个xml文档是动态生成的。当条件为真的时候父节点是<imgsrc></imgsrc>当条件为假的时候父节点为<message></message>我该怎么判断这个父节点是<imgsrc></imgsrc>还是<message></message>？我用<element>.getElementsByTagName("message").hasChildnodes() 提示错误，找到属性或方法。用<element>.getElementsByTagName("message")始终得到一个object对像，不管节点存不存在。
请问有什么好的办法可以判断这个xml文档的父节点是哪个？

就这样了

TOP

lxydyx

新手上路

帖子: 14
体力: 34
威望: 0
离线: 8 天

发短消息

62^# 大中小发表于 2008-4-17 11:38

zhichi 支持

TOP

yaohaixiao [楼主]

银牌会员

帖子: 696
体力: 1318
威望: 15
当前: 上海徐汇
离线: 3 天

63^# 大中小发表于 2008-4-18 13:06

:D

THX

海啸的地盘，有空来看看

TOP

treadwind

初级会员

帖子: 60
体力: 140
威望: 0
离线: 38 天

发短消息

64^# 大中小发表于 2008-4-18 13:47

严重支持，顶起来。蓝色里面的东西果然都是经典啊。

TOP

yaohaixiao [楼主]

银牌会员

帖子: 696
体力: 1318
威望: 15
当前: 上海徐汇
离线: 3 天

65^# 大中小发表于 2008-4-18 20:24

呵呵

谢谢了！！！

海啸的地盘，有空来看看

TOP

foxbaty

初级会员

帖子: 91
体力: 182
威望: 0
当前: 北京海淀区

专长 网页设计,前端制作,PHP

66^# 大中小发表于 2008-4-21 16:43

不错~~ 楼主顶一个标记慢慢看~~~

TOP

yaohaixiao [楼主]

银牌会员

帖子: 696
体力: 1318
威望: 15
当前: 上海徐汇
离线: 3 天

67^# 大中小发表于 2008-4-21 17:12

回复 foxbaty 在 66# 的帖子

谢谢支持了

我会更加努力工作的。

海啸的地盘，有空来看看

TOP

Lion5859

高级会员

帖子: 252
体力: 546
威望: 0
当前: 广东东莞
离线: 5 天

发短消息

68^# 大中小发表于 2008-4-21 23:46

不知道楼主有没有发现这样一个问题：在你那个实际运用的例子里，当点击“投票”出现遮罩层后，如果不点击确定而是拖动滚动条的话，那个浮动层会跟着滚动条一起滚动，无法始终定位在屏幕中间！这个能不能改进下？
另外不知道能不能再实现这样一个效果，点击导出浮动层后不点击”确定“按钮，而是浮动层外的任何一个地方就能退出遮罩效果而且不提交数据，也就是相当于”取消“？

[ 本帖最后由 Lion5859 于 2008-4-21 23:48 编辑 ]

TOP

wish630

初级会员

帖子: 58
体力: 144
威望: 0
离线: 4 天

发短消息

69^# 大中小发表于 2008-4-22 16:58

楼主太棒了！学到了好多东西啊，讲的也很详细，简直就像是白白的捡到一本好书的感觉，收藏了可以做资料反复阅读查询。感谢楼主！

TOP

weila2zong

落叶的影子
初级会员

帖子: 46
体力: 103
威望: 0
当前: 河南郑州

专长 网页设计,前端制作,网站运营

70^# 大中小发表于 2008-4-22 17:03

这样的效果，那次同事推荐了一个网站，觉得太棒了，写的很好，而且代码简洁，还有很多种功能组合在一起，个人感觉很棒，发来大家分享一下，http://www.malsup.com/jquery/

TOP

michaelzhouh

银牌会员

帖子: 518
体力: 1237
威望: 0

发短消息

71^# 大中小发表于 2008-4-22 17:12

小东东一个，自己要写也就十多分钟搞定。。。。。。。

TOP

yaohaixiao [楼主]

银牌会员

帖子: 696
体力: 1318
威望: 15
当前: 上海徐汇
离线: 3 天

72^# 大中小发表于 2008-4-23 13:12

今天准备回上海了

今天是在北京出差的最后一天了．

海啸的地盘，有空来看看

TOP

icedblog

冰雪黑鹰
初级会员

帖子: 153
体力: 160
威望: 0
当前: 北京海淀区
离线: 9 天

专长 前端制作,策划,网站运营

73^# 大中小发表于 2008-4-23 14:15

yaohaixiao大哥的技术挺好的，待人也很随和，亲身接受过指导。

本帖收藏，学习。

TOP

adonis2008

熊猫酒仙
中级会员

帖子: 91
体力: 265
威望: 0
当前: 四川成都
离线: 1 天

专长 网页设计,前端制作,.NET

74^# 大中小发表于 2008-4-24 13:47

非常感谢经典论坛 yaohaixiao 的关于DOM精彩讲解，看了这篇文章让我对apendChild(),setAttribute(),getAttribute(),createElement()等方法有了更进一步的认识，还有对浏览器的判断(还是很喜欢document.all的，哈哈)，还有骆驼华的写法一下拨开了我对js创建和设置css属性的迷雾，呵呵以前还真的是去查css参数对于js的写法的，收益非浅，再次感谢，支持你出更精彩的文章.

.

TOP

yaohaixiao [楼主]

银牌会员

帖子: 696
体力: 1318
威望: 15
当前: 上海徐汇
离线: 3 天

75^# 大中小发表于 2008-4-24 14:37

回复 Lion5859 在 68# 的帖子

这写效果我不是不能做,只是我这篇文章是用来讲解方法和原理的，所以你现在可以自己想想怎么解决着.另外我这个程序更新了下，现在是提示框显示在你当前屏幕的中央，还有这个是可以拖动的层,我就想在做那个滚动条移动仍然居中的效果了.

海啸的地盘，有空来看看

TOP

yaohaixiao [楼主]

银牌会员

帖子: 696
体力: 1318
威望: 15
当前: 上海徐汇
离线: 3 天

76^# 大中小发表于 2008-4-24 14:39

回复 icedblog 在 73# 的帖子

指导谈不上，就是跟你分享下我的一些经验，大家相互学习,一起提高啊.

海啸的地盘，有空来看看

TOP

yaohaixiao [楼主]

银牌会员

帖子: 696
体力: 1318
威望: 15
当前: 上海徐汇
离线: 3 天

77^# 大中小发表于 2008-4-24 14:40

回复 adonis2008 在 74# 的帖子

能够对你的有帮助就是我写文章的目的和动力，有时间一定会写更多东西的.谢谢支持了!!

对了，今天回到上海了,呵呵!

[ 本帖最后由 yaohaixiao 于 2008-4-24 15:00 编辑 ]

海啸的地盘，有空来看看

TOP

sxczwg

新手上路

帖子: 3
体力: 12
威望: 0
当前: 山西长治
离线: 10 天

78^# 大中小发表于 2008-4-24 15:47

http://czwanggang.blog.sohu.com/

Lz的东西经常关注，博客上的东西也不非常不错的

TOP

sxczwg

新手上路

帖子: 3
体力: 12
威望: 0
当前: 山西长治
离线: 10 天

79^# 大中小发表于 2008-4-24 15:48

http://czwanggang.blog.sohu.com/

LZ转了你几个博贴 ~~~

TOP

yaohaixiao [楼主]

银牌会员

帖子: 696
体力: 1318
威望: 15
当前: 上海徐汇
离线: 3 天

80^# 大中小发表于 2008-4-27 12:49

回复 sxczwg 在 79# 的帖子

知道了，告诉我一声就好,呵呵!!!

海啸的地盘，有空来看看

TOP

xiongzhixian

初级会员

帖子: 38
体力: 93
威望: 0
离线: 21 天

发短消息

81^# 大中小发表于 2008-4-28 08:55

楼主yaohaixiao，非常感谢你的文章，写的非常好，我自己也照着尝试做了一个，拖动代码我自己写的很简单，但问题就来了，当鼠标释放的时候，还在动，而且拖动也非常不正常，FF也没效果，不知道问题出在哪里，谢谢指点迷津

<head>
<title></title>
<script type=text/javascript>
        function AlterBox()
{
        this.oBtnShow=null;
        this.oShadow=null;      //遮照层
        this.oAlterWindow=null; //提示框层
        this.oDragHandle=null;  //提示框拖动栏
        this.oBtnEnter=null;    //提示框确定按钮
        this.oBtnClose=null;    //提示框关闭按钮        
        this.strMessage=null;   //提示框内容
}
AlterBox.mozilla=navigator.product=="Gecko";
AlterBox.msie=/msie/i.test(navigator.userAgent);
AlterBox.$=function(objId)
{
        return document.getElementById(id);
};
AlterBox.prototype.createBox=function(boxtype,imgtype,title,mst,msg)
{
        var _this=this;
        var shadow=document.createElement("div");
        shadow.setAttribute("id","shadow");
        shadow.style.height=document.body.offsetHeight+"px";
        //创建提示框节点
        var obj=document.createElement("div");
        obj.setAttribute("id","window");
        obj.style.zIndex="999";
        //创建提示标题栏节点
        var divTitle=document.createElement("div");
        divTitle.setAttribute("id","win-title");
        //创建标题节点
        var IMG=document.createElement("img");
        IMG.setAttribute("src","win.gif");
        //IMG.setAttribute("alt","window-Icon");
        var H2=document.createElement("h2");
        var textTitle=document.createTextNode(title);
        H2.appendChild(IMG);
        H2.appendChild(textTitle);
        //创建关闭按钮节点
        var closeBar=document.createElement("div");
        closeBar.setAttribute("id","closebar");
        var A=document.createElement("a");
        A.setAttribute("id","btnclose");
        A.setAttribute("title","关闭窗口");
        closeBar.appendChild(A);
        //创建右圆角图片框
        var titleRight=document.createElement("div");
        titleRight.setAttribute("id","title-right");
        
        divTitle.appendChild(H2);
        divTitle.appendChild(closeBar);
        divTitle.appendChild(titleRight);
        
        var divContainer=document.createElement("div");
        divContainer.setAttribute("id","win-contain");
        var cntLeft=document.createElement("div");
        cntLeft.setAttribute("id","msg-leftbar");
        var MSG=document.createElement("div");
        MSG.setAttribute("id","msg");
        var INFO=document.createElement("div");
        INFO.setAttribute("id","info");
        if(imgtype=='1')
        {
                INFO.style.backgroundImage='url(icon-warning.gif)';
        }
        else if(imgtype=='2')
        {
                INFO.style.backgroundImage='url(icon-info.gif)';
        }
        else if(imgtype=='3')
        {
                INFO.style.backgroundImage='url(icon-question.gif)';
        }
        else if(imgtype=='4')
        {
                INFO.style.backgroundImage='url(icon-error.gif)';
        }
        var H3=document.createElement("h3");
        H3.innerHTML=mst;
        var P=document.createElement("p");
        P.innerHTML=msg;
        INFO.appendChild(H3);
        INFO.appendChild(P);
        var Btns=document.createElement("div");
        Btns.setAttribute("id","btndiv");
        var btnEnter=document.createElement("a");
        btnEnter.setAttribute("id","btn");
        btnEnter.setAttribute("href","#");
        var txtEnter=document.createTextNode("");
        btnEnter.appendChild(txtEnter);
        Btns.appendChild(btnEnter);
        MSG.appendChild(INFO);
        MSG.appendChild(Btns);
        var cntRight=document.createElement("div");
        cntRight.setAttribute("id","msg-rightbar");
        
        divContainer.appendChild(cntLeft);
        divContainer.appendChild(MSG);
        divContainer.appendChild(cntRight);
        
        var divBottom=document.createElement("div");
        divBottom.setAttribute("id","win-bottom");
        var btLeft=document.createElement("div");
        btLeft.setAttribute("id","win-bot-left");
        var btRight=document.createElement("div");
        btRight.setAttribute("id","win-bot-right");
        
        divBottom.appendChild(btLeft);
        divBottom.appendChild(btRight);
        
        document.body.appendChild(shadow);
        obj.appendChild(divTitle);
        obj.appendChild(divContainer);
        obj.appendChild(divBottom);
        document.body.appendChild(obj);
        
        _this.oAlterWindow=obj;
        _this.oDragHandle=divTitle;
        _this.oShadow=shadow;
        _this.oBtnEnter=btnEnter;
        _this.oBtnClose=A;
        
        _this.oBtnEnter.onclick=function()
        {_this.closeDiv(this);};
        _this.oBtnClose.onclick=function()
        {_this.closeDiv2(this);};
        
        _this.dragDiv(_this.oDragHandle,_this.oAlterWindow);
};
AlterBox.prototype.closeDiv=function(btn)
{
        var winobj=btn.parentNode.parentNode.parentNode.parentNode;
        document.body.removeChild(winobj);
};
AlterBox.prototype.closeDiv2=function(btn)
{
        var winobj=btn.parentNode.parentNode.parentNode;
        document.body.removeChild(winobj);
};
AlterBox.prototype.dragDiv=function(divTitle,alterWindow)
{
        drag.init(divTitle);
};
var alertbox=new AlterBox();
////////////////////////////////////////////////////////////////////////////////
function Drag()
{
        this.iDiffX = 0;
        this.iDiffY = 0;
        this.oTitle=null;
        this.oWindow=null;
}
Drag.prototype.init=function(divTitle)
{
        var _this=this;
        _this.oTitle=divTitle;
        if(!_this.oTitle){return false;}
        _this.oTitle.setAttribute("title","拖动");
        _this.oTitle.style.cursor="move";
        _this.oTitle.onmousedown=function(e)
        {
                _this.handleMouseDown(e,this);
        };
};
Drag.prototype.handleMouseDown=function(e,divTitle)
{
        var _this=this;
        var oEvent=e?e:window.event;
        var oTitle=divTitle;
        var oWindow=oTitle.parentNode;        
        var iDiffX = oEvent.clientX - oWindow.offsetLeft;
    var iDiffY = oEvent.clientY - oWindow.offsetTop;
        EventUtil.addEventHandler(oTitle, "mousemove", function(){_this.handleMouseMove(e,divTitle,iDiffX,iDiffY);});
    EventUtil.addEventHandler(oTitle, "mouseup", function(){_this.handleMouseUp(e,divTitle);});
};
Drag.prototype.handleMouseMove=function(e,divTitle,iDiffX,iDiffY)
{
        var oEvent=e?e:window.event;
        var oTitle=divTitle;
        var oWindow=oTitle.parentNode;
        oWindow.style.left=oEvent.clientX-iDiffX;
        oWindow.style.top=oEvent.clientY-iDiffY;
};
Drag.prototype.handleMouseUp=function(e,divTitle)
{
        var _this=this;
        var oEvent=e?e:window.event;
        var oTitle=divTitle;
        EventUtil.removeEventHandler(oTitle, "mousemove", function(){_this.handleMouseMove(e,divTitle,iDiffX,iDiffY);});
    EventUtil.removeEventHandler(oTitle, "mouseup", function(){_this.handleMouseUp(e,divTitle);});
};
var drag=new Drag();
////////////////////////////////////////////////////////////////////////////////
var EventUtil = new Object();
EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
    if (oTarget.addEventListener) {
        oTarget.addEventListener(sEventType, fnHandler, false);
    } else if (oTarget.attachEvent) {
        oTarget.attachEvent("on" + sEventType, fnHandler);
    } else {
        oTarget["on" + sEventType] = fnHandler;
    }
};
        
EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler) {
    if (oTarget.removeEventListener) {
        oTarget.removeEventListener(sEventType, fnHandler, false);
    } else if (oTarget.detachEvent) {
        oTarget.detachEvent("on" + sEventType, fnHandler);
    } else { 
        oTarget["on" + sEventType] = null;
    }
};
</script>
<style type="text/css">
*{margin:0;padding:0;font-size:12px;}
#window{position:absolute;left:20%;top:50%;width:400px;height:180px;}
#win-title{margin:0 auto;width:394px;padding-left:6px;color:#15428b;background:url(left-corners.png) no-repeat 0 0;height:24px;}
#win-title h2{float:left;width:373px;height:16px;overflow:hidden;padding:4px 0;background:url(top-bottom.png) 0 0 repeat-x;line-height:19px;}
#win-title h2 img{float:left;width:16px;height:16px;margin:0 5px 0 3px;vertical-align:middle;}
#closebar{float:left;width:15px;height:16px;background:url(top-bottom.png) 0 0 repeat-x;overflow:hidden;padding:4px 0;}
#closebar a{width:15px;height:15px;background:url(close.gif) 0 0 no-repeat;display:block;}
#title-right{float:right;height:24px;width:6px;overflow:hidden;background:url(right-corners.png) no-repeat;}
#win-contain{width:400px;height:130px;overflow:hidden;}
#msg-leftbar{float:left;width:6px;height:130px;background:url(left-right.png) 0 0 repeat-y;}
#msg{float:left;width:386px;height:128px;border:1px solid #84A0C4;background:#DFE8F6;color:#15428b;}
#msg-rightbar{float:right;width:6px;height:130px;background:url(left-right.png) -6px 0 repeat-y;}
#info{margin:0 auto;width:294px;height:58px;padding:20px 10px 10px 82px;background:#DFE8F6 25px 23px no-repeat;text-align:left;overflow:hidden;}
#info h3{height:12px;overflow:hidden;letter-spacing:1px;padding-bottom:5px;}
#info p{line-height:150%;padding-right:25px;text-align:left;}
#btndiv{margin:0 auto;width:230px;height:22px;text-align:center;}
#btndiv a{margin:0 auto;width:68px;height:20px;overflow:hidden;display:block;background-image:url(btnEnter-normal.gif);}
#btndiv a:hover{background-image:url(btnEnter-hover.gif);}
#win-bottom{height:6px;width:400px;margin:0 auto;overflow:hidden;background:url(top-bottom.png) 0 -294px repeat-x;}
#win-bot-left{float:left;width:6px;height:6px;overflow:hidden;background:url(left-corners.png) 0 -294px no-repeat;}
#win-bot-right{float:right;width:6px;height:6px;overflow:hidden;background:url(right-corners.png) 0 -294px no-repeat;}
</style>
</head>
<body>
<input type="button" id="btnshow" onclick="alertbox.createBox(0,1,'错误提示','问题是什么','问题问题问题');" value="确定" />
<input type="button" id="btnshow" onclick="alertbox.createBox(0,1,'提示','','');" value="确定" />
<script type=text/javascript>
</script>
</body>

提示：您可以先修改部分代码再运行

[ 本帖最后由 xiongzhixian 于 2008-4-28 08:57 编辑 ]

TOP

yaohaixiao [楼主]

银牌会员

帖子: 696
体力: 1318
威望: 15
当前: 上海徐汇
离线: 3 天

82^# 大中小发表于 2008-5-5 13:13

呵呵，我看看!

今天又开始上班了,现在在帮一个朋友.呵呵,有一个多星期没有上网了。

海啸的地盘，有空来看看

TOP

jun708

林士杰
中级会员

帖子: 570
体力: 271
威望: 0
当前: 广东珠海
离线: 1 天

专长 网页设计,PHP,系统分析

83^# 大中小发表于 2008-5-5 14:37

这个好像我这样水平的好难懂的

林士杰-

TOP

yaohaixiao [楼主]

银牌会员

帖子: 696
体力: 1318
威望: 15
当前: 上海徐汇
离线: 3 天

84^# 大中小发表于 2008-5-14 10:34

回复 jun708 在 83# 的帖子

慢慢看，慢慢学啊,看我说的那些知识点,有什么不清楚的，就看书啊

海啸的地盘，有空来看看

TOP

wuxiaowei

新手上路

帖子: 26
体力: 32
威望: 0
当前: 河北秦皇岛
离线: 2 天

发短消息

85^# 大中小发表于 2008-5-14 15:46

回复 yaohaixiao 在 2# 的帖子

兄弟
能不能把你的DOM查看工具也放到上面啊？我找了很久都没下到合适的！谢谢！！！

TOP

eays

银牌会员

帖子: 527
体力: 1915
威望: 1
当前: 广东佛山
离线: 2 天

专长 PHP,JAVA,MySQL

86^# 大中小发表于 2008-5-15 08:37

太多错字了.javascript 代码写错太多

百度封站了...http://www.n-studio.com.cn

TOP

yaohaixiao [楼主]

银牌会员

帖子: 696
体力: 1318
威望: 15
当前: 上海徐汇
离线: 3 天

87^# 大中小发表于 2008-5-18 12:02

回复 eays 在 86# 的帖子

海啸的地盘，有空来看看

TOP

guduhun

中级会员

帖子: 132
体力: 288
威望: 0
离线: 14 天

发短消息

88^# 大中小发表于 2008-5-18 16:42

收藏先！！

好好学习！

TOP

gongzhw

淘折网
中级会员

帖子: 270
体力: 414
威望: 0
离线: 13 天

89^# 大中小发表于 2008-5-19 09:59

顶你了！辛苦了！！！！！！！！！！！

http://www.allss.com.cn

TOP

lxydyx

新手上路

帖子: 14
体力: 34
威望: 0
离线: 8 天

发短消息

90^# 大中小发表于 2008-5-20 16:53

好多的代码啊，看的都头疼

TOP