xWin之JS版(2-26更新)第1/2页

190 阅读 0 评论 126 点赞

我是靠谱客的博主欢喜小土豆，最近开发中收集的这篇文章主要介绍xWin之JS版(2-26更新)第1/2页，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

俺最近似乎在反反复复的折腾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>

<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需刷新才能执行]

12下一页阅读全文