页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

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

发布：dxy 字体：[增加减小] 类型：转载

xWin由三个文件组成：
页面文件：

点击运行可以看到效果:

<!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> 
<script type="text/javascript" src="sp/js/xwin.js"></script> 
</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
 
    <a href="javascript:void(0);">更换标题</a> 
    我是窗口2
 
    我是窗口2
 
    我是窗口2
 
    我是窗口2
 
</div>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

JS:

点击运行可以看到效果:

//<![CDATA[ 
//********************/ 
//  x 系列之 xWin 
//  作者：Hutia 
//  未经同意不得转载或用于商业用途 
//********************/

/* 
说明： 
  x系列是Hutia开发的系列JS代码，配合相应的css后可以实现快速的自定义标签 
  目前x系列支持的浏览器类型为：IE5.5, FF1.5

xWin的标签为 
      <div class="xwin"> 
          <span class="xWinSetting"> width="200" top="270" left="140" title="我就是传说中那个超长的窗口标题"</span> 
          content 
      </div> 
   
  支持属性： 
    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("<style>@import url("+xWinCssFilePath+");</style>");

//**检测浏览器种类***** 
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<allTheWindows.length;i++){ 
        if(allTheWindows[i].className=="xWin")_xWin_event_doInit(allTheWindows[i]); 
    } 
}

//**事件响应函数区******

function _xWin_event_doMDown(evt){ 
    var e=evt?evt:window.event; 
    var eSrc=e.srcElement?e.srcElement:e.target; 
    var leftButton=e.srcElement?e.button==1:e.button==0;

if(this.style.zIndex!=this.ownerDocument.index){//将窗口放到最前 
        this.ownerDocument.index+=2; 
        var idx = this.ownerDocument.index; 
        this.style.zIndex=idx; 
        this.nextSibling.style.zIndex=idx-1; 
    } 
    if(eSrc==this.oTitleContent&&leftButton&&this._windowState=="normal"){//如果开始拖动 
        //锁定标题栏; 
        document.captureEvents?document.captureEvents("mousemove",this.oTitle):this.oTitle.setCapture(); 
        //定义对象; 
        var win = this; 
        var sha = win.nextSibling; 
        //记录鼠标和层位置; 
        this.x0 = e.clientX; 
        this.y0 = e.clientY; 
        this.x1 = parseInt(win.style.left); 
        this.y1 = parseInt(win.style.top); 
        //改变风格; 
        this.oTitle.style.backgroundColor = this.hover; 
        win.style.borderColor = this.hover; 
        this.oTitle.nextSibling.style.color = this.hover; 
        sha.style.left = this.x1 + this.offx; 
        sha.style.top  = this.y1 + this.offy; 
        this.moveable = true; 
        return(true); 
    } 
    if(this.style.cursor!="default"&&this._windowState=="normal"){//开始改变大小 
        //锁定标题栏; 
        document.captureEvents?document.captureEvents("mousemove",this.oTitle):this.oTitle.setCapture(); 
        //定义对象; 
        var win = this; 
        var sha = win.nextSibling; 
        //记录鼠标位置和层位置和大小; 
        this.x0=e.clientX; 
        this.y0=e.clientY; 
        this.x1=parseInt(win.offsetLeft); 
        this.y1=parseInt(win.offsetTop); 
        this.w0=parseInt(win.offsetWidth); 
        this.h0=parseInt(win.offsetHeight); 
        //改变风格; 
        this.oTitle.style.backgroundColor = this.hover; 
        win.style.borderColor = this.hover; 
        this.oTitle.nextSibling.style.color = this.hover; 
        sha.style.left = this.x1 + this.offx; 
        sha.style.top  = this.y1 + this.offy; 
        this.resizable = true; 
        return(true); 
    } 
}

function _xWin_event_doClick(evt){ 
    var e=evt?evt:window.event; 
    var eSrc=e.srcElement?e.srcElement:e.target; 
    switch(eSrc){ 
         
    } 
}

function _xWin_event_doSelect(evt){ 
    var e=evt?evt:window.event; 
    var eSrc=e.srcElement?e.srcElement:e.target; 
    if(eSrc==this.oTitle||this.oTitle.contains(eSrc)){ 
        e.cancelBubble=true; 
        e.returnValue=false; 
        return(false); 
    } 
}

function _xWinParentNode_event_doScroll(evt){ 
    if(!this.minimizedWindows)return(true); 
    for(var i=0;i<this.minimizedWindows.length;i++){ 
        this.minimizedWindows[i].Min(true); 
    } 
}

//**方法函数区******

function _xWin_method_Close(){ 
    this.Destroy(); 
}

function _xWin_method_Destroy(){ 
    if(this.minIndex){ 
        this.parentNode.minimizedWindows[this.minIndex]=null; 
        this.minIndex=null; 
    } 
    this.outerHTML=""; 
}

function _xWin_method_MoveTo(x,y){ 
    var win = this.oTitle.parentNode; 
    var sha = win.nextSibling; 
     
    x=isNaN(x)?0:parseInt(x); 
    y=isNaN(y)?0:parseInt(y); 
    x=x<0?0:x; 
    y=y<0?0:y; 
    this.style.left=x+"px"; 
    this.style.top=y+"px"; 
     
    sha.style.left = parseInt(win.style.left) + ((this.moveable||this.resizable)?this.offx:0)+"px"; 
    sha.style.top  = parseInt(win.style.top) + ((this.moveable||this.resizable)?this.offy:0)+"px"; 
    this._winRect.l=x; 
    this._winRect.t=y; 
}

function _xWin_method_ResizeTo(w,h){ 
    var win = this; 
    var sha = win.nextSibling; 
         
    var w=isNaN(w)?this.minW:parseInt(w); 
    var h=isNaN(h)?this.minH:parseInt(h); 
    var w=w<this.minW?this.minW:w; 
    var h=h<this.minH?this.minH:h; 
     
    this.style.width=w+"px"; 
    this.style.height=h+"px";

this.oTitle.style.width=parseInt(this.clientWidth)+"px"; 
    var wTC=this.clientWidth; 
    for(var i=0;i<this.oTitle.childNodes.length;i++){ 
        if(this.oTitle.childNodes[i]!=this.oTitleContent){wTC-=this.oTitle.childNodes[i].offsetWidth;} 
    } 
    wTC-=8; 
    this.oTitleContent.style.width=(wTC<1?1:wTC)+"px"; 
     
    var wC=this.clientHeight-this.oTitle.offsetHeight-6; 
    this.oContent.style.height=(wC<1?1:wC)+"px"; 
    this.oContent.style.width=parseInt(this.clientWidth-6)+"px"; 
    sha.style.left = parseInt(win.style.left) + ((this.moveable||this.resizable)?this.offx:0)+"px"; 
    sha.style.top  = parseInt(win.style.top) + ((this.moveable||this.resizable)?this.offy:0)+"px"; 
    sha.style.width = parseInt(win.style.width)+"px"; 
    sha.style.height = parseInt(win.style.height)+"px"; 
     
    this._winRect.w=w; 
    this._winRect.h=h; 
}

function _xWin_method_SetTitle(strT){ 
    this._title=strT==null?this._title:strT; 
    if(this.oTitleContent){ 
        setInnerText(this.oTitleContent,this._title); 
    } 
}

//**通用函数区*** 
function getRealLeft(o){ 
    var l=o.offsetLeft-o.scrollLeft; 
    while(o=o.offsetParent){ 
        l+=o.offsetLeft-o.scrollLeft; 
    } 
    return(l); 
}

function getRealTop(o){ 
    var t=o.offsetTop-o.scrollTop; 
    while(o=o.offsetParent){ 
        t+=o.offsetTop-o.scrollTop; 
    } 
    return(t); 
}

function setInnerText(obj,text){ 
    switch(BROWSERNAME){ 
        case "ns": 
            obj.textContent=text; 
        break; 
        case "ie": 
        default: 
            obj.innerText=text; 
    } 
}

function getElementByClassName(obj,className){ 
    for(var i=0;i<obj.childNodes.length;i++){ 
        if(obj.childNodes[i].className==className)return(obj.childNodes[i]); 
    } 
    return(null); 
}

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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; 
}

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

这个破东西终于可以算是告一段落了，俺在兼容性方面也学到了不少，哈哈哈
发现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修改了窗口最小化时的位置问题

当前2/2页上一页 1 2

Tags：xWin之JS版(2-26更新)

浏览次数：载入中... 打印本文关闭本文文章来源

顶一下

·在百度中搜索关于“xWin之JS版(2-26更新)”相关内容
·在谷歌中搜索关于“xWin之JS版(2-26更新)”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

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

文章评论

同类文章

最近更新

热点排行

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

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行