小弟刚学JS
在弄一个弹窗层的代码
在网上找到了一个挺好的效果..
就是有些复杂看不懂啊
求加注释。解释每个函数干什么用的
(越详细越好啊..)^_^代码在 弹出层
小弟分不多了..努力弄分中..
[[email protected]]结果发到这个邮箱里吧[/email]
解决方案 »
- 为什么我在表格的onclick不能跳转到相应的锚点呢
- Ext.toolBar 与 button 区别
- javascript如何传递参数到jsp页面
- 小问题,怎么样获得多行文本框内的文字已经有多少行了?
- MF与IE兼容性
- id.innerHTML="<script>alert('go')</script>"的实现方法?
- ????我想在文本框的内容改变后而又没有失去焦点的时时候执行一个方法怎么弄啊????
- 请问一下,这个页面在netscape中打开为什么不能实现单选
- 开启新窗口的新问题!(急!!!!!!!!)
- 我用windows.print()打印,能不让打印窗口显示出来而直接打印吗?
- 将50个随机数赋予数组,确保数组内的元素值不重复。
- 求助 javascript 与flash 交互问题
function $$(oParent, elem){...
function $$$(oParent, sClass){...
function Alert(){...
Object.extend = function(destination, source){...
Alert.prototype = {...
主要是这几个
/**
* 当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'
});
};