xWin之JS版(2-26更新)
作者:
xWin之JS版(2-26更新)
俺最近似乎在反反复复的折腾xWin。。。。希望版主不要打我.......
之所以又开一帖是因为上一贴的侧重点在htc上,俺现在决定抛弃这个很有前途的东西,把侧重点放到兼容性上,开发一个x系列. So 大家把那个HTC的忘记了吧........
目前的代码兼容IE6.0 & FF 1.5 (因为俺以前一直都是IE Only, 所以转头研究兼容性实在是水平有限,目前的代码在FF上还是有许多Bug.....伤心啊)
构思中的x系列都是采用JS, 在JS中导入相应的css, 使用的时候还是一样简便: 一个<script src="...">后就可以直接使用了
--------------------------更新分割线--------------------------
bound0大哥说得对啊,兼容性真的能把人折腾死.........
目前代码应该没什么bug了,兼容IE6.0 & FF 1.5, 通过xHTML 的Transitional验证 和 CSS 验证
为了能通过验证,只好再次改变使用的方式,改为用DIV实现,方法:
<div class="xWin">
<span class="xWinSetting"> width="200" top="270" left="140" title="我就是传说中那个超长的窗口标题"</span>
content
</div>
下面是演示版:
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
xWin由三个文件组成:
页面文件:
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
JS:
支持属性: int left, int top, int width, int height 支持方法: Close(), Destroy(), Max([bolean Variable]), Min([bolean Variable]), MoveTo(int x, int y), ResizeTo(int x, int y), SetContent(string Variable | htmlObject Variable) SetTitle(string Variable), ShowHide() */ //**载入CSS***** var xWinCssFilePath="sp\/css\/xwin.css"; document.write(""); //**检测浏览器种类***** var BROWSERNAME=""; switch(navigator.appName.toLowerCase()){ case "netscape": BROWSERNAME="ns"; break; case "microsoft internet explorer": default: BROWSERNAME="ie"; break; } //**设置初始化变量****** switch(BROWSERNAME){ case "ns": window.addEventListener("load",_xWin_init,false); break; case "ie": default: window.attachEvent("onload",_xWin_init); } //**设置全局定时器****** if(typeof(__xSeriaTimer__)=="undefined"){ var __xSeriaTimer__={ events:new Array(), objs:new Array(), handle:null, exec:function(){ for(var i=0;i<__xSeriaTimer__.events.length;i++){ try{ with(__xSeriaTimer__.objs[i]){ eval(__xSeriaTimer__.events[i]); } }catch(e){} } }, pop:function(i){ __xSeriaTimer__.events[i]=null; __xSeriaTimer__.objs[i]=null; }, push:function(strV,obj){ for(var i=0;i<__xSeriaTimer__.events.length;i++){ if(__xSeriaTimer__.events[i]==null){ __xSeriaTimer__.events[i]=strV; __xSeriaTimer__.objs[i]=obj; return(i); } } __xSeriaTimer__.events[i]=strV; __xSeriaTimer__.objs[i]=obj; return(i); }, start:function(){ __xSeriaTimer__.stop(); __xSeriaTimer__.handle=setInterval(__xSeriaTimer__.exec,30); }, stop:function(){ clearInterval(__xSeriaTimer__.handle); } }; __xSeriaTimer__.start(); } //**初始化函数****** function _xWin_init(){ var allTheWindows=document.getElementsByTagName("div"); for(var i=0;igetParentRect(this).mh){
this.MoveTo(w*(i%n),mh-t*h-200);
mh=getParentRect(this).mh;
this.MoveTo(w*(i%n),mh-t*h-1);
}
this.minIndex=i;
this.oTitleMButton.value = this.normalButton;
this.oTitleMaButton.value = this.maxButton;
this._windowState="minimize";
if(this.minTimeHandle==null){
this.minTimeHandle=__xSeriaTimer__.push("Min(true)",this);
this.scrollIntoView();
}
}
}
function _xWin_method_MoveTo(x,y){
var win = this.oTitle.parentNode;
var sha = win.nextSibling;
x=isNaN(x)?0:parseInt(x);
y=isNaN(y)?0:parseInt(y);
x=x<0?0:x;
y=y<0?0:y;
this.style.left=x+"px";
this.style.top=y+"px";
sha.style.left = parseInt(win.style.left) + ((this.moveable||this.resizable)?this.offx:0)+"px";
sha.style.top = parseInt(win.style.top) + ((this.moveable||this.resizable)?this.offy:0)+"px";
this._winRect.l=x;
this._winRect.t=y;
}
function _xWin_method_ResizeTo(w,h){
var win = this;
var sha = win.nextSibling;
var w=isNaN(w)?this.minW:parseInt(w);
var h=isNaN(h)?this.minH:parseInt(h);
var w=w
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
之所以又开一帖是因为上一贴的侧重点在htc上,俺现在决定抛弃这个很有前途的东西,把侧重点放到兼容性上,开发一个x系列. So 大家把那个HTC的忘记了吧........
目前的代码兼容IE6.0 & FF 1.5 (因为俺以前一直都是IE Only, 所以转头研究兼容性实在是水平有限,目前的代码在FF上还是有许多Bug.....伤心啊)
构思中的x系列都是采用JS, 在JS中导入相应的css, 使用的时候还是一样简便: 一个<script src="...">后就可以直接使用了
--------------------------更新分割线--------------------------
bound0大哥说得对啊,兼容性真的能把人折腾死.........
目前代码应该没什么bug了,兼容IE6.0 & FF 1.5, 通过xHTML 的Transitional验证 和 CSS 验证
为了能通过验证,只好再次改变使用的方式,改为用DIV实现,方法:
复制代码 代码如下:
<div class="xWin">
<span class="xWinSetting"> width="200" top="270" left="140" title="我就是传说中那个超长的窗口标题"</span>
content
</div>
下面是演示版:
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
xWin由三个文件组成:
页面文件:
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
JS:
支持属性: int left, int top, int width, int height 支持方法: Close(), Destroy(), Max([bolean Variable]), Min([bolean Variable]), MoveTo(int x, int y), ResizeTo(int x, int y), SetContent(string Variable | htmlObject Variable) SetTitle(string Variable), ShowHide() */ //**载入CSS***** var xWinCssFilePath="sp\/css\/xwin.css"; document.write(""); //**检测浏览器种类***** var BROWSERNAME=""; switch(navigator.appName.toLowerCase()){ case "netscape": BROWSERNAME="ns"; break; case "microsoft internet explorer": default: BROWSERNAME="ie"; break; } //**设置初始化变量****** switch(BROWSERNAME){ case "ns": window.addEventListener("load",_xWin_init,false); break; case "ie": default: window.attachEvent("onload",_xWin_init); } //**设置全局定时器****** if(typeof(__xSeriaTimer__)=="undefined"){ var __xSeriaTimer__={ events:new Array(), objs:new Array(), handle:null, exec:function(){ for(var i=0;i<__xSeriaTimer__.events.length;i++){ try{ with(__xSeriaTimer__.objs[i]){ eval(__xSeriaTimer__.events[i]); } }catch(e){} } }, pop:function(i){ __xSeriaTimer__.events[i]=null; __xSeriaTimer__.objs[i]=null; }, push:function(strV,obj){ for(var i=0;i<__xSeriaTimer__.events.length;i++){ if(__xSeriaTimer__.events[i]==null){ __xSeriaTimer__.events[i]=strV; __xSeriaTimer__.objs[i]=obj; return(i); } } __xSeriaTimer__.events[i]=strV; __xSeriaTimer__.objs[i]=obj; return(i); }, start:function(){ __xSeriaTimer__.stop(); __xSeriaTimer__.handle=setInterval(__xSeriaTimer__.exec,30); }, stop:function(){ clearInterval(__xSeriaTimer__.handle); } }; __xSeriaTimer__.start(); } //**初始化函数****** function _xWin_init(){ var allTheWindows=document.getElementsByTagName("div"); for(var i=0;i
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
CSS:
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
这个破东西终于可以算是告一段落了,俺在兼容性方面也学到了不少,哈哈哈
发现bug欢迎回帖告诉我,请多多指教
ps:
加上那个DOCTYPE和不加的区别真大啊,通过了验证好高兴啊呵呵
补充说明:
1. 可以通过在CSS中自定义背景图片的方式来更改xWin的外观效果. 预留了.xWinTitleCloseButton, .xWinTitleMinButton, .xWinTitleMaxButton 用于自定义按钮图片
2. 页面初始化用的是window的attachEvent/addEventListener, 如果页面xWin脚本后有重定义window.onload=xxx可能造成无法初始化。建议所有需要初始化的脚本都采用attachEvent/addEventListener避免冲突
3.目前较HTC版的改进:
3.1兼容了FF 1.5
3.2修改了窗口最大化时的滚动条问题
3.3修改了窗口最小化时的位置问题