小弟刚学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'
});
};