站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题xWin之JS版

xWin之JS版

摘要: xWin之JS版
<tr> <td>

目前代码应该没什么bug了,兼容IE6.0 & FF 1.5, 通过xHTML 的Transitional验证和 CSS 验证。

为了能通过验证,只好再次改变使用的方式,改为用DIV实现,方法:


width="200" top="270" left="140" title="我就是传说中那个超长的窗口标题"
content

运行代码框

<textarea class=fm id=code rows=12 cols=78> html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> xWin HTC Demo <script type="text/javascript"> //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(""); //**检测浏览器种类***** 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;i width="400" height="400" top="300" left="100" title="我就是传说中那个超长的窗口标题" 我就是传说中那个超长的窗口标题我就是传说
width="100" top="20" left="20" title="我就是传说中那个超长的窗口标题" 中那个超长的窗口标题我就是传说中那个超
长的窗口标题我就是传说中那个超长
的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题 我就是传说中那个超长的
width="100" top="40" left="40" title="我就是传说中那个超长的窗口标题" 中那个超长的窗口标题我就是传说中那个超
长的窗口标题我就是传说中那个超长
窗口标题我就是传说中那 个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那 个超长的窗口标题我就是传说中那个超长的窗口标题 c
12345
width="200" top="270" left="140" title="我就是传说中那个超长的窗口标题" 我是窗口2
我是窗口2
我是窗口2
我是窗口2
更换标题 我是窗口2
我是窗口2
我是窗口2
我是窗口2
win1 win2 win3 win4
</body> </textarea>

<input style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code')" type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code) type=button value=另存代码> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

xWin由三个文件组成:

页面文件:

代码拷贝框
<textarea class=codeTextarea style="WIDTH: 519px; HEIGHT: 297px" rows=17 cols=72> html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> xWin HTC Demo <script type="text/javascript" src="sp/js/xwin.js"></script> </head> <body>

width="400" height="400" top="300" left="100" title="我就是传说中那个超长的窗口标题" 我就是传说中那个超长的窗口标题我就是传说
width="100" top="20" left="20" title="我就是传说中那个超长的窗口标题" 中那个超长的窗口标题我就是传说中那个超
长的窗口标题我就是传说中那个超长
的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题 我就是传说中那个超长的
width="100" top="40" left="40" title="我就是传说中那个超长的窗口标题" 中那个超长的窗口标题我就是传说中那个超
长的窗口标题我就是传说中那个超长
窗口标题我就是传说中那 个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那 个超长的窗口标题我就是传说中那个超长的窗口标题 c
12345
width="200" top="270" left="140" title="我就是传说中那个超长的窗口标题" 我是窗口2
我是窗口2
我是窗口2
我是窗口2
更换标题 我是窗口2
我是窗口2
我是窗口2
我是窗口2
win1 win2 win3 win4
</body> </textarea>
[Ctrl+A 全部选择 然后拷贝]

JS:

代码拷贝框
<textarea class=codeTextarea style="WIDTH: 516px; HEIGHT: 343px" rows=20 cols=72>// width="200" top="270" left="140" title="我就是传说中那个超长的窗口标题" 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(""); //**检测浏览器种类***** 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;i[Ctrl+A 全部选择 然后拷贝]

CSS:

代码拷贝框
<textarea class=codeTextarea style="WIDTH: 520px; HEIGHT: 326px" rows=15 cols=72>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; }</textarea>
[Ctrl+A 全部选择 然后拷贝]

ps: 加上那个DOCTYPE和不加的区别真大啊,通过了验证好高兴啊呵呵

</td> </tr> </table>
↑返回目录
前一篇: COOL而实用的动态效果
后一篇: JavaScript版幻灯片效果