读书人

求大神加诠释.

发布时间: 2012-06-28 15:20:04 作者: rapoo

求大神加注释..

小弟刚学JS
在弄一个弹窗层的代码
在网上找到了一个挺好的效果..
就是有些复杂看不懂啊
求加注释。解释每个函数干什么用的
(越详细越好啊..)^_^

代码在 弹出层


小弟分不多了..努力弄分中..
结果发到这个邮箱里吧

[解决办法]

JScript code
/** * 当id是字符串的时候,根据ID获取指定的元素。否则直接返回id */function $(id){    return typeof id === "string" ? document.getElementById(id) : id;}/** *根据父元素以及指定的节点名称获取节点集合(这里是元素标签的名称) *oParent:指定父元素,如果未指定,默认为document,oParent || document "或(||)":意思是前面如果不存在或者省略了,则取后面的document, *elem:节点的名称,比如div,span,p等 * 返回元素集合 * 比如:$$($('aaa'),'span');获取id为aaa下面的span元素集合 */function $$(oParent, elem){    return (oParent || document).getElementsByTagName(elem);}/** * 根据父元素以及指定的类名获取节点集合(注意这里是class的名称) * oParent 父元素,这里调用了上面的方法,其余解释同上 */function $$$(oParent, sClass){    var aElem = $$(oParent, '*');    var aClass = [];    var i = 0;    for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);    return aClass;}/** * 这里其实就是调用这个Alert类的initialize方法,Alert是一个对象,javascript里面,函数也是对象 * 在prototype里面有的,apply是借用某个方法的意思, * 也就是说直接执行某个方法,前面是指定当前上下文对象,这里就是本对象,arguments是参数 */function Alert(){    this.initialize.apply(this, arguments);}/** * 这里是对象的拷贝而已,将一个对象复制给另一个对象而已,跟jquery版本的extend类似,jquery复杂的多 * 简单点说就是吧source对象里面的属性直接复制给destination对象 * destination:是目标对象 * source:源对象 *  */Object.extend = function(destination, source){    for (var property in source) {        destination[property] = source[property];    }    return destination;};/** * 这个就是Alert对象了,里面有initialize方法,自己看吧。其余的应该不要解释了。 */Alert.prototype = {    //初始化    initialize : function(obj, frame, onEnd){        if($(obj)){            var _this = this;            this.obj = $(obj);            this.frame = frame;            this.oEve(onEnd);            this.oTitle = this.onEnd.title;            this.oContent = this.onEnd.content;            this.iWidth = this.onEnd.width;            this.iHeight = this.onEnd.height;            this.iTop = this.onEnd.top;            this.iLeft = this.onEnd.left;            this.iFixed = this.onEnd.fixed;            this.iClose = this.onEnd.close;            this.obj.onclick = function(){_this.create(),_this.backg();};            window.onresize = function(){_this.backg();};        }    },    //创建对话框的一些基本元素    create : function(){        //csdn内容限制长度,内容我删除了,你自己对着看...    },    oEve: function(onEnd){        this.onEnd = {};        Object.extend(this.onEnd, onEnd || {});    },    //赋值内容,就是对话框里面的内容    content : function(){        this.conent = $$$(this.tit, 'alert_con')[0];        this.conent == undefined ? this.con.innerHTML = this.oContent : this.conent.innerHTML = this.oContent;        this.oButton = $$(this.tit, 'button');        var i = 0;        var _this = this;        for(i=0;i<this.oButton.length;i++)this.oButton[i].onclick = function(){_this.em.onclick()};    },    //计算宽度    width : function(){            },    //计算对话框高度    height : function(){        if(this.iHeight != ""){            this.oFrame.style.height = parseInt(this.iHeight) +'px';            this.oFrame.style.marginTop = -parseInt(this.iHeight) / 2 +'px';            this.oCon.style.height = parseInt(this.iHeight) - 10 +'px';            this.oAlert_con.style.height = parseInt(this.iHeight) - 40 +'px';        }    },    //计算对话框距离顶部的距离,居中    top : function(){        if(this.iTop != "")this.oFrame.style.top = parseInt(this.iTop) +'px',this.oFrame.style.marginTop = 0;    },    //计算对话框距离左边的距离,居中    left : function(){        if(this.iLeft != "")this.oFrame.style.left = parseInt(this.iLeft) +'px',this.oFrame.style.marginLeft = 0;    },    backg : function(){        this.oScrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;        this.oScrollWidth = document.documentElement.scrollWidth || document.body.scrollWidth;        this.oBackg.style.width = document.documentElement.clientWidth + (this.oScrollWidth - document.documentElement.clientWidth) +'px'        this.oBackg.style.height = document.documentElement.clientHeight + (this.oScrollHeight - document.documentElement.clientHeight) +'px'    },    fixed : function(){        if(this.iFixed == "fixed"){//固定对话框,需要考虑IE6的固定,因为不兼容fixed            var _this = this;            this.oFrame.style.position = 'fixed';            this.oAlert_tit.style.cursor = 'move';            this.oAlert_tit.onmousedown = function(e){                var _thisE = this;                this.oEvent = e || event;                this.X = this.oEvent.clientX - _this.oFrame.offsetLeft;                this.Y = this.oEvent.clientY - _this.oFrame.offsetTop;                document.onmousemove = function(e){                    this.oEvent = e || event;                    this.L = this.oEvent.clientX - _thisE.X;                    this.T = this.oEvent.clientY - _thisE.Y;                    if(this.L < 0){                        this.L = 0;                    }else if(this.L > document.documentElement.clientWidth - _this.oFrame.offsetWidth){                        this.L = document.documentElement.clientWidth - _this.oFrame.offsetWidth                    }                    if(this.T < 0){                        this.T = 0;                    }else if(this.T > document.documentElement.clientHeight - _this.oFrame.offsetHeight){                        this.T = document.documentElement.clientHeight - _this.oFrame.offsetHeight;                    }                    _this.oFrame.style.left = this.L + 'px';                    _this.oFrame.style.top = this.T + 'px';                    _this.oFrame.style.margin = 0;                    return false;                }                document.onmouseup = function(){                    document.onmouseup = null;                    document.onmousemove = null;                };                return false;                            };            if(this.oFrame){                if(!-[1,] && !window.XMLHttpRequest){    //这里是修复IE6固定问题,因为fixed在IE6无法固定的                    document.documentElement.style.textOverflow = "ellipsis";                    this.oFrame.style.position = "absolute";                    this.oFrame.style.setExpression("top", "eval(documentElement.scrollTop + " + this.oFrame.offsetTop + ') + "px"');                }            }        }    },    //对话框关闭操作    close : function(){            },    //获取某个元素的css样式    getStyle : function(obj, attr)    {        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr];    },    //拖动    sMove : function(obj, json, onEnd){            },    //拖动    dMove : function(obj, json, onEnd){            }};//元素加载完成之后,new 一个Alert对象window.onload = function(){    new Alert('but', 'box', {        title : '提示内容',        content : '<div class="size">确定不在关注新浪微博?</div><div class="but"><button class="button">确定</button><button class="button">取消</button></div>',        width : '',        height : '',        top : '',        left : '',        fixed : '',        close : 'close'    });}; 

读书人网 >JavaScript

热点推荐