javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 >

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:

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