【免费】一个漂亮的窗口操作类_窗口软件资源-CSDN文库

共7个文件

gif：5个

html：1个

db：1个

JavaScript

HTML

5星 · 超过95%的资源需积分: 0 58 浏览量 2008-11-05 02:02:02 上传评论收藏 6KB RAR 举报

在IT行业中，窗口操作是构建用户界面（UI）的关键部分，尤其在JavaScript和HTML这样的Web开发技术中。标题“一个漂亮的窗口操作类”暗示我们将会讨论一个用于美化和管理Web页面窗口的JavaScript类。让我们深入了解一下这个“漂亮”的窗口操作类可能包含哪些功能和原理。 JavaScript作为一个客户端脚本语言，允许我们在用户的浏览器上动态地控制网页的行为。在HTML中，我们创建了静态的页面结构，而JavaScript则赋予这些结构生命，使它们能够响应用户的交互。窗口操作类通常会提供一套方法来处理窗口的各种行为，如打开新窗口、调整大小、移动位置、显示或隐藏元素等。描述中的“o(∩_∩)o...哈哈”表达了开发者对这个窗口操作类的满意和自豪，这可能意味着它不仅实现了基本功能，还注重用户体验和视觉效果，比如动画过渡、平滑滚动、响应式设计等。在JavaScript中，我们可以使用`window`对象来访问和操作浏览器窗口。例如，`window.open()`用于打开新的窗口或标签，`window.resizeTo()`和`window.moveTo()`可以改变窗口的大小和位置。然而，为了实现更高级的功能和定制化，一个窗口操作类可能会封装这些原生API，提供更加友好和易于使用的接口。在HTML方面，窗口操作类可能与DOM（Document Object Model）交互，用于查找、操作和修改页面上的元素。例如，通过`document.getElementById()`或`querySelector()`获取特定元素，然后使用`style`属性或CSS类来改变元素的样式，从而达到控制窗口外观的目的。此外，考虑到现代Web开发的趋势，这个窗口操作类可能采用了模块化设计，支持CommonJS或ES6的模块导入导出。它可能还包括事件监听器，如`addEventListener()`，以便响应用户的点击、滚动或其他交互，同时确保代码的可维护性和性能。为了进一步提高用户体验，窗口操作类可能还整合了触摸事件的支持，以适应移动设备。在响应式设计方面，它可能使用媒体查询(`matchMedia()`)来检测屏幕尺寸变化，并相应地调整窗口布局。从压缩包文件名称“EasyWindow”来看，这个库很可能旨在简化窗口管理的任务，提供一个易用的API，使得开发者能够快速集成并自定义窗口行为，而不必深陷于复杂的浏览器兼容性和性能优化问题。这个“漂亮的窗口操作类”是一个结合了JavaScript和HTML技术，专注于提升用户界面美观度和交互性的工具。它可能包括了窗口操作的各种功能，如打开、关闭、移动、调整大小，以及优化用户体验的特性，如动画效果、响应式设计和事件处理。对于开发者来说，这样的工具可以极大地提高开发效率和应用质量。

资源推荐

资源详情

资源评论

收起资源包目录

.rar （7个子文件）

EasyWindow

EasyWindow.html 8KB

images

hide.gif 140B

gray.gif 585B

close.gif 80B

Thumbs.db 7KB

green.gif 1KB

show.gif 111B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>窗口类 </title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <script type="text/javascript"> /************************************************** * EasyWindow.js * 30.5.2008 ************************************************** * msn:danxinju@hotmail.com * author:xj.d **************************************************/ var EasyWindow = function(title/*标题*/ ,content/*显示内容*/ ,type/*类型*/ ,style/*窗口样式*/){ this.title = title; //标题 this.name = parseInt(Math.random()*100000); //窗口名称 this.style = style; //窗口样式 this.content = content; //显示内容 this.type = typeof type == "undefined"?"common" : type; //类型 this.height = ""; //窗口高度 this.width = "" //窗口宽度 this.init = function(){ //初始化窗口 //存储窗口字符串 var strInit = new EasyWindow.StringBuild(); strInit.push("<div style=\"width:350px;height:400px;position:absolute;border:1px solid #cccccc;"); strInit.push("font-family: 宋,sans-serif;font-size:12px;top:0px;left:0px;"); strInit.push("border-bottom:2px solid #E0E0E0;border-right:2px solid #E0E0E0;\" id=\""+ this.name +"\">"); strInit.push("<table style=\"width:100%;height:25px;cursor:move;background:url(images/green.gif);\" "); strInit.push("cellpadding=\"0\" cellspacing=\"0\">"); strInit.push("<tr>"); strInit.push("<td style=\"font-weight:bold;border-bottom:1px solid #cccccc;padding-left:3px;\">"+ this.title +"</td>"); strInit.push("<td style=\"width:38px;border-bottom:1px solid #cccccc;\">"); strInit.push("<a href=\"#\"><img src=\"images/hide.gif\" style=\"border:0;\" alt=\"隐藏\" /></a> "); strInit.push("<a href=\"#\"><img src=\"images/close.gif\" style=\"border:0;\" alt=\"关闭\" /></a>"); strInit.push("</td></tr></table>"); strInit.push("<div style=\"height:90%;padding:3px;overflow:auto;background:#ffffff;\"></div></div>"); //加载窗口 var divInit = document.createElement("div"); divInit.innerHTML = strInit.toString(); document.body.appendChild(divInit); //设置部件命令 this.setCss(); //设置窗口属性 this.startDrag(); //设置拖动 this.setContent(); //设置内容 this.setTop(); //设置窗口优先级 this.setCommond(); //设置关闭 EasyWindow.ArrayW.push(document.getElementById(this.name)); //存储窗口到数组 };this.init(); }; //存储窗口到数组 EasyWindow.ArrayW = new Array(); //字符串连接类 EasyWindow.StringBuild = function(){ this.arr = new Array(); this.push = function(str){ this.arr.push(str); }; this.toString = function(){ return this.arr.join(""); }; }; //拖动类 EasyWindow.Drag = function(o ,oRoot){ var _self = this; //拖动对象 this.obj = (typeof oRoot != "undefined") ?oRoot : o; this.relLeft = 0; //记录横坐标 this.relTop = 0; //记录纵坐标 o.onselectstart = function(){ return false; }; o.onmousedown = function(e){ //鼠标按下 e = _self.fixE(e); _self.relLeft = e.clientX - _self.fixU(_self.obj.style.left); _self.relTop = e.clientY - _self.fixU(_self.obj.style.top); document.onmousemove = function(e){ _self.drag(e); _self.obj.style.border = "1px dashed #000000"; _self.obj.style.filter = "alpha(opacity=30)"; _self.obj.style.opacity = "0.3"; }; document.onmouseup = function(){ _self.end(); _self.obj.style.border = "1px solid #cccccc"; _self.obj.style.borderBottom = "2px solid #E0E0E0"; _self.obj.style.borderRight = "2px solid #E0E0E0"; _self.obj.style.filter = "alpha(opacity=100)"; _self.obj.style.opacity = "1"; }; }; this.drag = function(e){ //拖动 e = this.fixE(e); var l = e.clientX - this.relLeft; var t = e.clientY - this.relTop; if (t < 0) { t = 0; //防止头部消失 } this.obj.style.left = l +"px"; this.obj.style.top = t +"px"; }; this.end = function(){ //结束拖动 document.onmousemove = null; document.onmouseup = null; }; this.fixE = function(e){ //修复事件 if (typeof e == "undefined") e = window.event; return e; }; this.fixU = function(u){ //处理px单位 return parseInt(u.split("p")[0]); }; }; //设置窗口属性 EasyWindow.prototype.setCss = function(){ //设定样式 var obj = document.getElementById(this.name); if(typeof this.style != "undefined") { if(typeof this.style.width != "undefined") obj.style.width = this.style.width; //设置宽度 if(typeof this.style.height != "undefined") obj.style.height = this.style.height; //设置高度 if(typeof this.style.top != "undefined") obj.style.top = this.style.top; //设置top if(typeof this.style.left != "undefined") obj.style.left = this.style.left; //设置left if(typeof this.style.background != "undefined") //设置背景 { obj.getElementsByTagName("table")[0].style.background = "url("+ this.style.background +")"; } } //存储宽高度 this.height = obj.style.height; this.width = obj.style.width; } //窗口拖动 EasyWindow.prototype.startDrag = function(){ var obj = document.getElementById(this.name); new EasyWindow.Drag(obj.childNodes[0] ,obj); }; //设置内容 EasyWindow.prototype.setContent = function(){ var obj = document.getElementById(this.name).childNodes[1]; if(this.type == "common") { obj.innerHTML = this.content; } else { var iframe = document.createElement("iframe"); iframe.width = "100%"; iframe.height = "100%"; iframe.frameBorder = 0; iframe.src = this.content; obj.appendChild(iframe); } }; //设定窗口优先级 EasyWindow.prototype.setTop = function(){ document.getElementById(this.name).onclick = document.getElementById(this.name).onmousedown = function(){ for(var i=0;i<EasyWindow.ArrayW.length;i++) { EasyWindow.ArrayW[i].style.zIndex = 1; } this.style.zIndex = 100; }; }; //设置关闭 EasyWindow.prototype.setCommond = function(){ var _self = this; //根对象 var obj = document.getElementById(this.name); //设置隐藏 obj.childNodes[0].getElementsByTagName("a")[0].onclick = function(){ if (obj.childNodes[1].style.display == "") { obj.style.height = "25px"; obj.style.width = "350px"; obj.childNodes[1].style.display = "none"; this.getElementsByTagName("img")[0].src = "images/show.gif"; } else { obj.style.height = _self.height; obj.style.width = _self.width; obj.childNodes[1].style.display = ""; this.getElementsByTagName("img")[0].src = "images/hide.gif"; } }; //设置关闭 obj.childNodes[0].getElementsByTagName("a")[1].onclick = function(){ obj.style.display = "none"; obj.removeNode(true); }; }; //获取值 EasyWindow.prototype.getValue = function(){ return this.content; }; //设置值 EasyWindow.prototype.setValue = function(Value){ this.content = Vlaue; this.setContent(); }; //加载实例 window.onload = function(){ example1 = new EasyWindow("测试窗口2" ,"这里是自定义:<br /><input type='text' />输入文字" ,"common") example2 = new EasyWindow("测试窗口1" ,"http://www.baidu.com" ,"url" ,{ left:"300px" ,top:"100px" ,width:"750px" ,height:"600px" ,background:"images/gray.gif" }); example3 = new EasyWindow("测试窗口3" ,"http://www.google.cn" ,"url" ,{ left:"400px" ,top:"200px" ,width:"750px" ,height:"600px" ,background:"images/green.gif" }); } </script> </head> <body> </body> </html>

评论收藏

内容反馈