【图】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

下面是演示版：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>xWin HTC Demo</title> <style type="text/css"> body { width:100%; height:100%; margin:0px; padding:0px; overflow:auto; } .xWin { position:absolute; cursor:default; border-width:2px; border-style:outset; padding:0px; font-size:12px; overflow:hidden; display:block; } .xWin .xWinSetting { display:none; } .xWin .xTitle { color:#FFFFFF; height:20px; display:block; } .xWin .xTitle input { background-color:transparent; color:#FFFFFF; border-width:0px; border-style:solid; height:20px; width:16px; line-height:20px; font-family:webdings; font-size:10px; margin:0px; padding:0px; text-align:center; float:right; display:block; } .xWin .xTitle .xWinTitleCloseButton {  } .xWin .xTitle .xWinTitleMaxButton {  } .xWin .xTitle .xWinTitleMinButton {  } .xWin .xTitle .xWinTitleContent { color:#FFFFFF; font-size:12px; height:18px; line-height:20px; margin:0px; padding-left:3px; float:left; display:block; overflow:hidden; white-space:nowrap; text-align:left; cursor:default; } .xWin .xWinBody { margin:0px; background-color:#FFFFFF; color:#000000; padding:3px; font-size:12px; overflow:auto; position:relative; display:block; } .xShadow { position:absolute; display:block; background-Color:#000000; color:#FFFFFF; } </style>  </head> <body>  width="400" height="400" top="300" left="100" 我就是传说中那个超长的窗口标题我就是传说 width="100" top="20" left="20" 中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长  的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题 我就是传说中那个超长的width="100" top="40" left="40"  中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长  窗口标题我就是传说中那 个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那 个超长的窗口标题我就是传说中那个超长的窗口标题 c 12345width="200" top="270" left="140" 我是窗口2 我是窗口2 我是窗口2 我是窗口2 更换标题 我是窗口2 我是窗口2 我是窗口2 我是窗口2  win1 win2 win3 win4  </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

xWin由三个文件组成：
页面文件：

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
JS:

//<![CDATA[ //********************/ //  x 系列之 xWin //  作者：Hutia //  未经同意不得转载或用于商业用途 //********************/ /* 说明：   x系列是Hutia开发的系列JS代码，配合相应的css后可以实现快速的自定义标签   目前x系列支持的浏览器类型为：IE5.5, FF1.5   xWin的标签为 width="200" top="270" left="140"   content 支持属性： 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("<style>@import url("+xWinCssFilePath+");</style>"); //**检测浏览器种类***** 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<this.minW?this.minW:w; var h=h<this.minH?this.minH:h;  this.style.width=w+"px"; this.style.height=h+"px"; this.oTitle.style.width=parseInt(this.clientWidth)+"px"; var wTC=this.clientWidth; for(var i=0;i<this.oTitle.childNodes.length;i++){ if(this.oTitle.childNodes[i]!=this.oTitleContent){wTC-=this.oTitle.childNodes[i].offsetWidth;} } wTC-=8; this.oTitleContent.style.width=(wTC<1?1:wTC)+"px";  var wC=this.clientHeight-this.oTitle.offsetHeight-6; this.oContent.style.height=(wC<1?1:wC)+"px"; this.oContent.style.width=parseInt(this.clientWidth-6)+"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"; sha.style.width = parseInt(win.style.width)+"px"; sha.style.height = parseInt(win.style.height)+"px";  this._winRect.w=w; this._winRect.h=h; } function _xWin_method_SetContent(v){ if(this.oContent){ if(v==null||v==undefined||v==""){this._body=this.oContent.innerHTML="";return(this.oContent);} if(typeof(v)=="string"){ this._body=this.oContent.innerHTML=v; return(this.oContent); }else{ try{   this.oContent.innerHTML="";   this._body=this.oContent.appendChild(v);   return(this.oContent); }catch(e){   throw(e); } } }else{ this._body=v; return(null); } } function _xWin_method_SetTitle(strT){ this._title=strT==null?this._title:strT; if(this.oTitleContent){ setInnerText(this.oTitleContent,this._title); } } function _xWin_method_ShowHide(dis){ var bdisplay = (dis==null)?((this.style.display=="none")?"":"none"):dis; this.style.display = bdisplay; this.nextSibling.style.display = bdisplay; if(bdisplay=="none"){ if(this._windowState=="minimize"){ this.parentNode.minimizedWindows[this.minIndex]=null; this.minIndex=null; } }else{ if(this._windowState=="minimize"){ this.Min(); } } } //**通用函数区*** function getRealLeft(o){ var l=o.offsetLeft-o.scrollLeft; while(o=o.offsetParent){ l+=o.offsetLeft-o.scrollLeft; } return(l); } function getRealTop(o){ var t=o.offsetTop-o.scrollTop; while(o=o.offsetParent){ t+=o.offsetTop-o.scrollTop; } return(t); } function setInnerText(obj,text){ switch(BROWSERNAME){ case "ns": obj.textContent=text; break; case "ie": default: obj.innerText=text; } } function getElementByClassName(obj,className){ for(var i=0;i<obj.childNodes.length;i++){ if(obj.childNodes[i].className==className)return(obj.childNodes[i]); } return(null); } function getParentRect(obj){ var re=new Object(); if(obj.parentNode!=document.body){ re.mw=Math.max(obj.parentNode.scrollWidth,obj.parentNode.clientWidth); re.mh=Math.max(obj.parentNode.scrollHeight,obj.parentNode.clientHeight); }else{ re.mw=Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth); re.mh=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight); } return(re); } //]]>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
CSS:

body { width:100%; height:100%; margin:0px; padding:0px; overflow:auto; } .xWin { position:absolute; cursor:default; border-width:2px; border-style:outset; padding:0px; font-size:12px; overflow:hidden; display:block; } .xWin .xWinSetting { display:none; } .xWin .xTitle { color:#FFFFFF; height:20px; display:block; } .xWin .xTitle input { background-color:transparent; color:#FFFFFF; border-width:0px; border-style:solid; height:20px; width:16px; line-height:20px; font-family:webdings; font-size:10px; margin:0px; padding:0px; text-align:center; float:right; display:block; } .xWin .xTitle .xWinTitleCloseButton {  } .xWin .xTitle .xWinTitleMaxButton {  } .xWin .xTitle .xWinTitleMinButton {  } .xWin .xTitle .xWinTitleContent { color:#FFFFFF; font-size:12px; height:18px; line-height:20px; margin:0px; padding-left:3px; float:left; display:block; overflow:hidden; white-space:nowrap; text-align:left; cursor:default; } .xWin .xWinBody { margin:0px; background-color:#FFFFFF; color:#000000; padding:3px; font-size:12px; overflow:auto; position:relative; display:block; } .xShadow { position:absolute; display:block; background-Color:#000000; color:#FFFFFF; }

[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修改了窗口最小化时的位置问题

热门搜索

xWin之JS版(2-26更新)

猜你喜欢

xWin之JS版(2-26更新)

xWin之JS版

s8lol主宰符文怎么配

JS教程:学习笔记之JS类

用js实现CSS圆角生成更新

lol偷钱流符文搭配推荐

Js之软键盘实现(js源码)

JS技巧之showModelessDialog()使用详解

lolAD刺客新符文搭配推荐

如何给随机数加密

欢度春节必备应用推荐