WEB全功能拖拉窗口效果

///<reference path="../myJSFrame.js" /> /* * Version : 0.1.0.0 * Author : ghostslave * Email : ghostslave@163.com * Home : http://www.aibaob.cn */ function GS(){}; GS.version="1.0.0"; GS.Controls={ CreateTree:function() { var tree=document.createElement("div"); GS._method.Tree.apply(tree); return tree; } }; GS.Forms={ _currentForm:null, //当前document中获得交点的Form窗体 _container:{_lastDepth:1000,_formCount:0,_minBar:null}, CreateForm:function() //实始属必{title:} { var initParam={title:"未命名窗体",iconSrc:"../javascript/GSjs/img/frm-def-icon.bmp",minWidth:150,maxWidth:1000,minHeight:150,maxHeight:600,btnMin:true,btnMax:true,btnClose:true} for(key in arguments[0])initParam[key]=arguments[0][key]; var frm=$(document.createElement("div")); frm.className="frmBox"; frm.title=initParam.title; frm.setStyle("z-index:"+GS.Forms._container._lastDepth); GS.Forms._container._lastDepth++; frm.setAttribute("anchor","left,top,right,bottom"); var sb=new StringBuffer(); sb.append("<div class='head'>"); sb.append(" <div class='lt'>"); sb.append(" <img class='icon' src='"+initParam.iconSrc+"' alt='' />"); sb.append(" <span class='title'>"+initParam.title+"</span>"); sb.append(" </div>"); sb.append(" <div class='rt'>"); if(initParam.btnMin) sb.append(" <span class='btnMin btn' title='最小化' flag='___btnMin'></span>"); if(initParam.btnMax) sb.append(" <span class='btnMax btn' title='最大化' flag='___btnMax'></span>"); if(initParam.btnClose) sb.append(" <span class='btnClo btn'　title='关闭' flag='___btnClo'></span>"); sb.append(" </div>"); sb.append("</div>"); sb.append("<div anchor='top,left,right,bottom' class='border'></div>"); frm.innerHTML=sb.toString(); var content=$(document.createElement("div")); frm._content=content; content.setAttribute("anchor","left,top,right,bottom"); content.className="content"; frm.appendChild(content); if(GS.Forms._container._minBar==null) { var bar=document.createElement("div"); bar.style.cssText="position:fixed; left:0px; bottom:0px; width:100%; height:26px; overflow:hidden;" document.body.appendChild(bar); GS.Forms._container._minBar=bar; } document.body.appendChild(frm); frm.Drag=GS.Drag(frm); frm.Drag.minWidth=initParam.minWidth; frm.Drag.maxWidth=initParam.maxWidth; frm.Drag.minHeight=initParam.minHeight; frm.Drag.maxHeight=initParam.maxHeight; GS._method.Form.apply(frm); //region 为创建的窗体添加默认事件 var m_state=[0,0]; var m_cache={width:parseInt(frm.getStyle("width")),height:parseInt(frm.getStyle("height")),top:parseInt(frm.getStyle("top")),left:parseInt(frm.getStyle("left"))}; var m_min=frm.subElem("span[flag=___btnMin]")[0]; 　var m_max=frm.subElem("span[flag=___btnMax]")[0]; var minORmaxORclo=function(btn) { switch(btn) { case "___btnMin": if(m_state[0]==0) { if(m_state[1]==0) { m_cache={width:parseInt(frm.getStyle("width")),height:parseInt(frm.getStyle("height")),top:parseInt(frm.getStyle("top")),left:parseInt(frm.getStyle("left"))}; }else{ m_max.className="btnMax btn"; m_max.title="最大化"; m_state[1]=0; } frm.setStyle("position:relative;float:left; margin-left:1px;width:150px;height:26px;top:0px;left:0px;"); frm.Drag.enable=false; GS.Forms._container._minBar.appendChild(frm); m_min.className="btnRev btn"; m_min.title="向上还原"; m_state[0]=1; }else{ frm.setStyle("position:absolute;"); frm.setRect(m_cache.width,m_cache.height,m_cache.left,m_cache.top); frm.Drag.enable=true; document.body.appendChild(frm); m_min.className="btnMin btn"; m_min.title="最小化"; m_state[0]=0; } break; case "___btnMax": if(m_state[1]==0) { if(m_state[0]==0){ m_cache={width:parseInt(frm.getStyle("width")),height:parseInt(frm.getStyle("height")),top:parseInt(frm.getStyle("top")),left:parseInt(frm.getStyle("left"))}; }else{ frm.setStyle("position:absolute;"); document.body.appendChild(frm); m_min.className="btnMin btn"; m_min.title="最小化"; m_state[0]=0; } var fW=GS.getClientRect().width-2; var fH=GS.getClientRect().height-28; frm.setRect(fW,fH,1,1); frm.Drag.enable=false; m_max.className="btnRev btn"; m_max.title="向下还原"; m_state[1]=1; }else{ frm.setRect(m_cache.width,m_cache.height,m_cache.left,m_cache.top); frm.Drag.enable=true; m_max.className="btnMax btn"; m_max.title="最大化"; m_state[1]=0; } break; case "___btnClo": with(GS.Forms._container) { if(m_state[0]==1){_minBar.removeChild(frm);return} document.body.removeChild(frm); } break; } } GS.addEvent(frm,"mouseover", function(){ with(GS.Forms) { if(_currentForm) { if(_currentForm.Drag._state==1)return ; _currentForm=frm; }else{ _currentForm=frm; } } } ); GS.addEvent(frm,"mousedown", function(ev){ with(GS.Forms){ if(_currentForm!=frm) _currentForm=frm; frm.setStyle("z-index:"+_container._lastDepth); _container._lastDepth++; _currentForm.Drag.doDown(ev); } } ) GS.addEvent(frm,"click", function(ev){ ev=ev||window.event; var trg=ev.target||ev.srcElement; minORmaxORclo(trg.getAttribute("flag")); } ); //end return frm; } } GS._method={ Form:function() { this.setIcon=function(iconUrl){this.subElem(".icon")[0].src=iconUrl;} this.setTitle=function(title){this.title=title;this.subElem(".title")[0].innerHTML=title;} this.setRect=function(W,H,L,T) { if(W&&H){ var mW=W-this.Drag._anchorNodes.cache.width; var mH=H-this.Drag._anchorNodes.cache.height; GS.Anchor.setAnchorNodes(this.