本文介绍xWin的JavaScript版本更新，重点解决IE6.0与Firefox 1.5的兼容性问题。通过采用DIV结构替代HTC，代码已通过XHTML Transitional和CSS验证。使用方法简便，仅需引入JS文件即可在页面中创建可配置的浮动窗口，适用于需要轻量级UI组件的Web开发场景。
xWin JS版开发背景与目标
近期我一直在反复调试xWin项目，希望社区成员能包容这段折腾过程。
新开此帖的原因在于，之前的讨论主要聚焦于HTC技术。现在决定放弃这一方向，转而专注于提升兼容性，致力于开发一套x系列组件。因此，请大家忽略之前的HTC相关内容。
当前代码已支持IE6.0和Firefox 1.5。由于作者此前主要使用IE浏览器，转向兼容性研究时确实感到力不从心，目前代码在Firefox中仍存在部分Bug，令人遗憾。
构思中的x系列组件均基于JavaScript实现。使用时只需在JS中导入相应的CSS，操作依然简便：引入一个<script src="...">标签后，即可直接使用。
兼容性更新与验证结果
--------------------------更新分割线--------------------------
正如bound0大哥所言，兼容性确实是一个让人头疼的问题。
目前代码已基本修复Bug，同时兼容IE6.0和Firefox 1.5，并通过了XHTML Transitional验证以及CSS验证。
为了满足验证要求，使用方式调整为通过DIV实现，具体方法如下：
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> <div class="xWin" id="win1" > <span class="xWinSetting">width="400" height="400" top="300" left="100" title="我就是传说中那个超长的窗口标题"</span> 我就是传说中那个超长的窗口标题我就是传说 <div class="xWin" id="win30" > <span class="xWinSetting"> width="100" top="20" left="20" title="我就是传说中那个超长的窗口标题"</span> 中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长 </div> 的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题 我就是传说中那个超长的 <div class="xWin" id="win31" > <span class="xWinSetting">width="100" top="40" left="40" title="我就是传说中那个超长的窗口标题" </span> 中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长 </div> 窗口标题我就是传说中那 个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那 个超长的窗口标题我就是传说中那个超长的窗口标题 c 12345 </div> <div class="xWin" id="win2"> <span class="xWinSetting"> width="200" top="270" left="140" title="我就是传说中那个超长的窗口标题"</span> 我是窗口2 我是窗口2 我是窗口2 我是窗口2 更换标题 我是窗口2 我是窗口2 我是窗口2 我是窗口2 </div> win1 win2 win3 win4 <div id="ssss"></div> </body> </html>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
1
2下一页阅读全文