xWin之JS版(2-26更新)

2016-02-19 10:59 18 1 收藏

今天图老师小编要向大家分享个xWin之JS版(2-26更新)教程，过程简单易学，相信聪明的你一定能轻松get！

【 tulaoshi.com - Web开发】

俺最近似乎在反反复复的折腾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修改了窗口最小化时的位置问题

来源:http://www.tulaoshi.com/n/20160219/1596297.html

看过《xWin之JS版(2-26更新)》的人还看了以下文章更多>>

类之Prototype.js学习

标签： Web开发

Prototype.js作为javascript的成功的开源框架，封装了很多好用的功能，虽然官方没提供什么文档，不过在google上一搜，好多相关的文档，不过在学习使用的过程中还是碰到了一些问题，希望熟悉的朋友能多加指点，对于prototype.js学习我关注这么几点，同时针对每点也讲讲学习的结果和碰到的问题，^_^ 1、类的创建 ...

新闻更新系统(2)

标签： ASP

更新新闻作者：米仙圣人功能：在滚动文本框中添加一定的文本格式，来自动的更新数据库。方法：数据库名称News.mdb 1：AddNews.asp。 Dim DBStr DBStr="" DBStr=Request.F...

PBlog2 公用JS代码

标签： Web开发

代码如下： //PBlog2 公用JS代码 //Author:PuterJam //查找网页内宽度太大的图片进行缩放以及PNG纠正 function ReImgSize(){ for (i=0;idocument.images.length;i++) { if (document.all){ if (document.images[i].width500) { document.images[i].width="500" document.images[i].outerHTML='a href="'+document.images[...

《NBA 2K16》V1.02版更新内容详细解析

《NBA 2K16》V1.02版更新内容详细解析《NBA 2K16》更新了v1.02版，修复了哪些内容呢？下面带来玩家分享的《NBA 2K16》V1.02版更新内容详细解析，一起来看看吧。补丁更新V2的笔记主要解决了一些严重的bug全文如下在NBA 2k16补丁更新V2已经批准了索尼和刚刚发布的PlayStation 4游戏机在美国和欧洲。它仍在批准微软，希望它将在未...

《闪之轨迹2》四更新角色VS后日谈最终BOSS视频

标签：游戏动漫

《闪之轨迹2》四更新角色VS后日谈最终BOSS视频《闪之轨迹2》四更新角色VS后日谈最终BOSS 《英雄传说闪之轨迹2》OP配信 CD专辑优惠售卖中日本Falcom于即日起至12月9日期间，在日本亚马逊展开了《英雄传说闪之轨迹2》的主题曲《閃光の行方-Openingsize-》的免费配信（点击进入），玩家可以再亚马逊页面免...

查看更多精彩>>