快捷導(dǎo)航

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

更新時間：2007年01月16日 00:00:00 作者：

俺最近似乎在反反復(fù)復(fù)的折騰xWin。。。。希望版主不要打我.......

之所以又開一帖是因為上一貼的側(cè)重點在htc上，俺現(xiàn)在決定拋棄這個很有前途的東西，把側(cè)重點放到兼容性上，開發(fā)一個x系列. So 大家把那個HTC的忘記了吧........

目前的代碼兼容IE6.0 & FF 1.5 (因為俺以前一直都是IE Only, 所以轉(zhuǎn)頭研究兼容性實在是水平有限，目前的代碼在FF上還是有許多Bug.....傷心啊)

構(gòu)思中的x系列都是采用JS, 在JS中導(dǎo)入相應(yīng)的css, 使用的時候還是一樣簡便：一個<script src="...">后就可以直接使用了

--------------------------更新分割線--------------------------
bound0大哥說得對啊，兼容性真的能把人折騰死.........

目前代碼應(yīng)該沒什么bug了，兼容IE6.0 & FF 1.5, 通過xHTML 的Transitional驗證和 CSS 驗證

為了能通過驗證，只好再次改變使用的方式，改為用DIV實現(xiàn)，方法：

復(fù)制代碼代碼如下:

<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   id="vvxyksv9kd"   class="xWin" id="win1" >     <span id="vvxyksv9kd"    class="xWinSetting">width="400" height="400" top="300" left="100" title="我就是傳說中那個超長的窗口標題"</span>     我就是傳說中那個超長的窗口標題我就是傳說     <div   id="vvxyksv9kd"   class="xWin" id="win30" >         <span id="vvxyksv9kd"    class="xWinSetting"> width="100" top="20" left="20" title="我就是傳說中那個超長的窗口標題"</span>         中那個超長的窗口標題我就是傳說中那個超長的窗口標題我就是傳說中那個超長     </div>     的窗口標題我就是傳說中那個超長的窗口標題我就是傳說中那個超長的窗口標題我就是傳說中那個超長的窗口標題     我就是傳說中那個超長的     <div   id="vvxyksv9kd"   class="xWin" id="win31" >         <span id="vvxyksv9kd"    class="xWinSetting">width="100" top="40" left="40" title="我就是傳說中那個超長的窗口標題" </span>         中那個超長的窗口標題我就是傳說中那個超長的窗口標題我就是傳說中那個超長     </div>     窗口標題我就是傳說中那     個超長的窗口標題我就是傳說中那個超長的窗口標題我就是傳說中那個超長的窗口標題我就是傳說中那     個超長的窗口標題我就是傳說中那個超長的窗口標題     c     12345 </div> <div   id="vvxyksv9kd"   class="xWin" id="win2">     <span id="vvxyksv9kd"    class="xWinSetting"> width="200" top="270" left="140" title="我就是傳說中那個超長的窗口標題"</span>     我是窗口2     我是窗口2     我是窗口2     我是窗口2     <a href="javascript:void(0);">更換標題</a>     我是窗口2     我是窗口2     我是窗口2     我是窗口2 </div> <a href="javascript:win1.ShowHide('');void(0);">win1</a> <a href="javascript:win2.ShowHide('');void(0);">win2</a> <a href="javascript:document.getElementById('win3').ShowHide('');void(0);">win3</a> <a href="javascript:document.getElementById('win4').ShowHide('');void(0);">win4</a> <div   class="vvxyksv9kd"   id="ssss"></div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

12 下一頁閱讀全文