首页 > 代码库 > dialog 最大化、换肤、IE不兼容、只能横向居中
dialog 最大化、换肤、IE不兼容、只能横向居中
<!DOCTYPE html><html><head><meta charset="utf-8" /> <title>对话框</title> <script type="text/javascript" src="miniDrag.js"></script> <style type="text/css"> *{ margin:0; padding:0;} #dragBody{width: 400px;height: 350px; background: white; color: #333; position:relative;} #dragHandler{height: 40px; line-height: 40px; background: #E0E0E0; color: white; position: relative;} #hoverEff{width: 200px;height: 200px;border: 1px solid;} #dragclose { text-decoration: none; color: white; display: block; width: 40px; height: 40px; text-align: center; position: absolute; right: 0; top: 0; } #dragclose:hover { background: #f5f5f5; color: #333; } #dragmax { text-decoration: none; color: white; display: block; width: 40px; height: 40px; text-align: center; position: absolute; right: 0; top: 0; } #dragmax:hover { background: #f5f5f5; color: #333; } #dragcolor { text-decoration: none; color: white; display: block; width: 40px; height: 40px; text-align: center; position: absolute; right: 0; top: 0; } #dragcolor:hover { background: #f5f5f5; color: #333; } body { background: #F0F0F0; } a{ color:white;} #dragHandler a{ margin-right:20px; float:right;} #content{ padding-top:30px; margin:0 10px; color:black;} ul li{list-style-type:none;} </style> <script type="text/javascript"> window.onload=function(){ var dragBody = document.getElementById("dragBody"); var dragHandler = document.getElementById("dragHandler"); var dragclose = document.getElementById("dragclose"); dragBody.style.top = "200px"; dragBody.style.left = "0px"; dragBody.style.margin = "0 auto"; var drag_a = new miniDrag(); drag_a.handler = dragHandler; drag_a.dragBody = dragBody; drag_a.init(); loadXMLDoc(); } function btn_close(){ var window_dialog = document.getElementById("dragBody"); window_dialog.style.display = "none"; } var isMax = 0; function btn_max(){ var dlg_wrapper = document.getElementById("dragBody"); if(isMax == 0) { lastTop = dlg_wrapper.style.top; lastLeft = dlg_wrapper.style.left; dlg_wrapper.style.height="100%"; dlg_wrapper.style.width="100%"; dlg_wrapper.style.top="0px"; dlg_wrapper.style.left="0px"; btn_max.src = "images/arrow_in.png"; isMax = 1; } else { dlg_wrapper.style.top=lastTop; dlg_wrapper.style.left=lastLeft; dlg_wrapper.style.height="350px"; dlg_wrapper.style.width="400px"; btn_max.src = "images/max.jpg"; isMax = 0; }}var skinIndex = 1;var skinColor = ["green","blue","purple","grey","red"];function bnt_color(){ if(skinIndex == 5) skinIndex = 0; dragBody.style.color =skinColor[skinIndex]; dragBody.style.borderColor = skinColor[skinIndex]; skinIndex++;} </script></head><body><div id="dragBody"> <div id="dragHandler"> <a id="btn_close" href="#" onclick="btn_close(this);"><img src="images/close.gif"/></a> <a id="btn_max" href="#" onclick="btn_max(this);"><img src="images/arrow_out.png"/></a> <a id="btn_color" href="#" onclick="btn_color(this);"><img src="images/colorpicker.gif"/></a> </div> <div id="content"> </div> </div></body></html>
var miniDrag =function() { this.handler = null; this.dragBody = null; this.preventX = false; this.preventY = false; this.scopeX = false; this.scopeY = false; this.initmouseX = null; this.initmouseY = null; this.initX = null; this.initY = null;};miniDrag.prototype.init = function() { var _this = this, dragBody = this.dragBody, handler = this.handler; handler.onmousedown = function(e){ return _this.start(e)}; //闭包改变this指向 dragBody.onDragStart = new Function(); dragBody.onDragEnd = new Function(); dragBody.onDrag = new Function(); };miniDrag.prototype.start = function(e) { e = fixEvent(e); var _this = this, dragBody = this.dragBody, handler = this.handler; this.intmouseX = e.pageX, this.intmouseY = e.pageY; this.initY = parseInt(dragBody.style.top), this.initX = parseInt(dragBody.style.left); document.onmousemove = function(e){return _this.dragging(e)}; document.onmouseup = function(e){return _this.end(e)}; dragBody.onDragStart(this.initY,this.initX); return false; //重要，避免不同实例事件冲突};miniDrag.prototype.dragging = function(e) { e = fixEvent(e); var _this = this, dragBody = this.dragBody, handler = this.handler; if (document.all) { handler.setCapture(); } else { e.preventDefault(); } if(!_this.preventY) { var top = _this.initY + e.pageY - _this.intmouseY; if(top < parseInt(_this.scopeY[0])){top = _this.scopeY[0]}; if(top > parseInt(_this.scopeY[1])){top = _this.scopeY[1]}; dragBody.style.top = top + "px"; } if(!_this.preventX) { var left = this.initX + e.pageX - this.intmouseX; if(left < parseInt(_this.scopeX[0])){left = _this.scopeX[0]}; if(left > parseInt(_this.scopeX[1])){left = _this.scopeX[1]}; dragBody.style.left = left + "px"; } dragBody.onDrag(top,left); return false;};miniDrag.prototype.end = function() { var dragBody = this.dragBody; dragBody.onDragEnd(); if (document.all) { this.handler.releaseCapture() }; document.onmousemove = null; document.onmouseup = null;};var fixEvent = function(e) { var sl = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft), st = Math.max(document.documentElement.scrollTop, document.body.scrollTop); if (typeof e == "undefined") e = window.event; if (typeof e.pageX == "undefined") e.pageX = e.clientX + sl + document.body.clientLeft; if (typeof e.pageY == "undefined") e.pageY = e.clientY + st + document.body.clientTop; if (typeof e.layerX == "undefined") e.layerX = e.offsetX; if (typeof e.layerY == "undefined") e.layerY = e.offsetY; return e;};function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("content").innerHTML=xmlhttp.responseText; } }xmlhttp.open("GET","ajaxcontent.txt",true);xmlhttp.send();};
javascript里增加了loadXMLdoc函数，用来从服务器载入数据。
html里的bnt_color和bnt_max是用来换皮肤颜色和最大化的，但是皮肤颜色换不了，最大化也只能横向最大化，纵向没变化。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。