Javascript 模拟windows多窗口
web开发中经常需要用用js来模拟 windows的窗口，所以就开发了一个XWindows的javascript类。
demo演示效果如下：
用mootools做为基础类库。本来打算把状态控制改写成状态模式，不过暂时没有兴趣了:)
源代码贴点：
XWindowStatus
=
new
Class(
{ //status's manager 
isMax : false, isMin : false, isNormal: false, father : null, 
initialize : function(father){
initialize : this.father = father;
}, setMax : function(){ this.isMin = false; this.isNormal = false; this.isMax = true; this.setIconState(); }, setMin : function(){ this.isMin = true; this.isNormal = false; this.isMax = false; this.setIconState(); }, setNormal: function(){ this.isMin = false; this.isNormal =true; this.isMax = false; this.setIconState(); }, setIconState: function(){ //reset this.father.iconMax.className = 'icon_max'; this.father.iconMin.className = 'icon_min'; //set switch (true) { case this.isMin: this.father.iconMin.className = 'icon_revert'; break; case this.isMax: this.father.iconMax.className = 'icon_revert'; break; } }
}
);
XWindow
=
new
Class(
{ containerId : null, //container id container : null, //container div /*controls*/ windowBody : null, //body div windowFooter : null, //footer div windowTitle : null, //title div windowTitleSpan : null, //title text span contentBody : null, //content div contentIframe: null, //iframe iconClose : null, // close icon iconMin : null, // minize icon iconMax : null, // to max icon /*end of controls*/ mover : null, //object of Drag.Move resizer : null, //object of Drag.Base backup : null, //type Object for backup data such as this.backup.xx = xx; status : null, //type WindowStatus initialize : function (elementId) { this.container = $(elementId); this.containerId = elementId; this.initCtrl(); this.initEvent(); this.initMisc(); this.mover = new Drag.Move(this.container,{handle:this.windowTitle}); this.resizer = new Drag.Base(this.container, { handle : this.windowBody, modifiers : {x:'width', y:'height'}, onDrag : this.adjustSize.bind(this) }); }, initCtrl : function(){ this.windowBody = this.getChild('window_body'); this.windowTitle = this.getChild('window_title'); this.windowFooter = this.getChild('window_footer'); this.contentBody = this.getChild('content_body'); this.contentIframe= this.getChild('app_iframe','iframe'); this.iconMax = this.getChild('icon_max','em'); this.iconMin = this.getChild('icon_min','em'); this.iconClose = this.getChild('icon_close','em'); this.windowTitleSpan = this.getChild('title_span','span'); }, initEvent : function(){ this.windowTitle.addEvent('dblclick',this.toggleMax.bind(this)); this.iconMax.addEvent('click',this.toggleMax.bind(this)); this.iconMin.addEvent('click',this.toggleMin.bind(this)); this.iconClose.addEvent('click',this.close.bind(this)); }, initMisc : function(){ this.backup = new Object(); this.status = new XWindowStatus(this); //data for using next this.windowTitle.iHeight = this.windowTitle.getStyle('height').toInt();//it's constant when created this.windowFooter.iHeight = this.windowFooter.getStyle('height').toInt();//it's constant when created }, getChild : function(className,tagName){ tagName = tagName || 'div'; var selector = '#' + this.containerId + ' ' + tagName + '.' + className; return $$(selector)[0]; }, adjustSize : function () { //just need to resize height, width don't need, because set width 100% can manage it var h = this.container.getStyle('height').toInt(); var nHeight = h - this.windowTitle.iHeight - this.windowFooter.iHeight; if(nHeight < 12 ) nHeight = 12; //prevent less than 0 this.contentBody.setStyle('height',nHeight - 12); this.contentIframe.setStyle('height',nHeight - 12); }, resizeTo : function (width,height){ this.container.setStyle('width' ,width.toInt()); this.container.setStyle('height',height.toInt()); this.adjustSize(); this.fireEvent('resize',[width,height]); }, moveTo : function (x,y){ this.container.setStyle('left',x); this.container.setStyle('top',y); this.fireEvent('move',[x,y]); }, normal : function (){ // back to last state var state = this.getLastState(); this.moveTo(state.x,state.y); this.resizeTo(state.w,state.h); this.status.setNormal(this); this.fireEvent('normal'); }, max : function(){ this.trackState(); this.resizeTo(window.getWidth(), window.getHeight()); this.moveTo(0,0); this.status.setMax(this); this.fireEvent('max'); }, min : function(){ this.trackState(); var ih = this.windowTitle.iHeight + this.windowFooter.iHeight + 3; this.resizeTo(200,ih); this.moveTo(0,window.getHeight()-ih); this.status.setMin(this); this.fireEvent('min'); }, close : function() { this.hide(); this.fireEvent('close'); }, toggleMin : function(){ (this.status.isMin ? this.normal : this.min).apply(this); }, toggleMax : function(){ (this.status.isMax ? this.normal : this.max).apply(this); }, trackState : function() { // private record last state of window if(this.status.isMax || this.status.isMin) return; // if max or min don't need to record pos or size this.backup.last_pos = this.getPosition(); this.backup.last_size = this.getSize(); }, getLastState: function() { //get last state of window var p = this.backup.last_pos; var s = this.backup.last_size; return {'x':p.x,'y':p.y,'w':s.x,'h':s.y}; }, hide : function(){ this.container.style.display = 'none'; this.fireEvent('hide'); }, show : function(){ this.container.style.display = ''; this.fireEvent('show'); }, getPosition : function() { return this.container.getPosition(); }, getSize : function() { return this.container.getSize()['size']; }, setTitle : function(txt){ this.windowTitleSpan.innerHTML = txt; } }
).extend(
new
Events);
demo和源代码下载
（一个免费的网络文件存储，链接无效请联系本人）