用javascript面向对象的方式制作弹出层
来源:互联网 发布:dronedeploy航测软件 编辑:程序博客网 时间:2024/06/05 16:38
由于本人以前是.net程序员,所以即使现在在做前端,也习惯于用面向对象的方式编写js脚本,我想如果你以前也是或者现在还是名第三代程序员的话,应该对此并不陌生。
说到js的面向对象,就不得不提到prototype这个js内置属性了(注意:这里的prototype可不是prototype.js),它的作用就是可以动态的向一个对象(object)添加某种属性。我现在要做的就是尽可能的让代码达到公用,像继承啦之类的。好了,这些就不多说了,对prototype不了解的可以搜索下相关内容。
今天要做的是点击一个html元素让其弹出一个友好的对话框来,首先要明确两点,一点是我可能会大量的用到这种方式,甚至不希望出现系统的alert或confirm,第二点就是弹出的内容尽量的可以多种化,甚至可以自定义。明确这两点后,我们就可以写js代码了,都是些很初级的东西,如果你要鄙视的话就尽情的鄙视我吧!^.^
function objDIV() {
this.bgdiv ;
this.infodiv ;
}
首先,我们希望弹出一个遮罩层,我给它命名openBackDiv();
txbdiv.bgdiv = document.createElement("div");
txbdiv.bgdiv.setAttribute("id", "overDiv");
txbdiv.bgdiv.innerHTML = "<iframe frameborder=/"no/" class=/"overPanel/" id=/"ifrover/"></iframe>";
}
再者,把它添加到刚刚定义的对象的prototype里去(openBG()):
openBackDiv(this);
document.body.appendChild(this.bgdiv);
this.bgdiv.style.display = "block";
this.bgdiv.style.width = document.documentElement.clientWidth + "px";
this.bgdiv.style.height = document.documentElement.scrollHeight + "px";
}
再就是添加弹出信息层的方法,和上面一样做就行了。所以才说这个是很基础的东西,好像确实没啥好说的,直接上代码吧!
这是一个正在加载的弹出层,有点粗糙. function openLoadDiv(txbdiv) {
txbdiv.infodiv = document.createElement("div");
txbdiv.infodiv.setAttribute("id", "div_info");
txbdiv.infodiv.innerHTML = "<div style=/" line-height:1.5;background:url(../images/tips-top-bg.gif) repeat-x; height:54px; text-align:center;/"><img border=/"0/" src=/"../images/xtts.gif/" /></div><div style='padding:20px; font-size:14px; color:#b44201;'><div style='width:100px; float:left;margin:60px 0 0 60px; height:80px;'><img src='/images/business/loading.gif' width='100px' height='100' border='0'/></div><div style='float:left; width:250px;margin:90px 0 0 20px;'><p>请稍等,正在处理中...</p></div></div></div>";
document.body.appendChild(txbdiv.infodiv);
txbdiv.infodiv.style.width = "550px";
txbdiv.infodiv.style.height = "270px";
txbdiv.infodiv.style.fontSize = "14px";
txbdiv.infodiv.style.position = "absolute";
txbdiv.infodiv.style.background = "#fff";
txbdiv.infodiv.style.zIndex = "9999";
centerobject();//居中的方法
}
objDIV.prototype.openLoading = function() { this.openBG(); openLoadDiv(this); }
做完这些后一个简单的弹出加载层就完成了.是不是有点成就感了,那么接着完成其他的工作吧!既然都弹出了,总得在某个时刻把它们移掉吧,下面就是移除这些层的方法。
if (this.bgdiv || document.getElementById("overDiv")) {
if (this.bgdiv) {
document.body.removeChild(this.bgdiv);
} else {
document.body.removeChild(document.getElementById("overDiv"));
}
}
}
objDIV.prototype.removeInfo = function() {
this.removeBG();
if (this.infodiv) {
document.body.removeChild(this.infodiv);
} else {
document.body.removeChild(document.getElementById("div_info"));
}
}
如果想弹出不同层信息的话,就可以添加不同的prototype属性
- 用javascript面向对象的方式制作弹出层
- JS 弹出隐藏层 (面向对象的思想)
- 用面向对象的方式封装javascript代码
- 用面向对象的编程方式写JavaScript
- 制作漂亮的弹出层
- 弹出层效果的制作
- JavaScript面向对象的几种方式
- 面向对象的JavaScript 六 ---- javascript 继承方式总结
- Javascript弹出层的效果
- JavaScript弹出层的使用
- JavaScript对象之面向对象的三种继承方式
- javascript面向对象编程方式
- JavaScript 面向对象编写方式
- 用javascript 面向对象制作坦克大战(二)
- 用CS2制作面向对象的小游戏
- VS2010下一个简单弹出层的制作
- JavaScript面向对象的继承机制实现方式
- JavaScript面向对象-基于函数伪造的方式实现继承
- 用于控制二级菜单展开/折叠的函数
- Http协议详解
- C#变量
- C#常用数据类型
- Android 数据存储总结
- 用javascript面向对象的方式制作弹出层
- C#的整数类型
- C#实数类型
- 关于window.event.srcElement (触发事件的对象)
- 使用SharedObject缓存游戏框架到本地和版本更新的demo
- C#字符类型
- NSString,NSScanner,NSData,NSAttributedString
- VB6 禁止浏览器下载图片,脚本,视频,音乐及ActvieX等.
- C#布尔类型