经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › [原创]xWin之JS版(2-26更新)

查看: 26561|回复: 18

[原创]xWin之JS版(2-26更新) [复制链接]

hutia　楼主

诘屈聱牙

荣誉管理

帖子: 5622
体力: 23239
威望: 367
居住地: 江苏省苏州市

发表于 2006-2-18 18:14:00 |显示全部楼层

俺最近似乎在反反复复的折腾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>
<script type="text/javascript">
//<![CDATA[
//********************/
//  x 系列之 xWin
//  作者：Hutia
//  未经同意不得转载或用于商业用途
//********************/

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

xWin的标签为 <div class="xwin">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);
}

<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>
		中那个超长的窗口标题我就是传说中那个超<br/>长的窗口标题我就是传说中那个超长
	</div>
	的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题
	我就是传说中那个超长的
	<div class="xWin" id="win31" >
		<span class="xWinSetting">width="100" top="40" left="40" title="我就是传说中那个超长的窗口标题" </span>
		中那个超长的窗口标题我就是传说中那个超<br/>长的窗口标题我就是传说中那个超长
	</div>
	窗口标题我就是传说中那
	个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那
	个超长的窗口标题我就是传说中那个超长的窗口标题
	c<br/>
	12345
</div>

<div class="xWin" id="win2">
	<span class="xWinSetting"> width="200" top="270" left="140" title="我就是传说中那个超长的窗口标题"</span>
	我是窗口2<br/>
	我是窗口2<br/>
	我是窗口2<br/>
	我是窗口2<br/>
	<a href="javascript:void(0);">更换标题</a>
	我是窗口2<br/>
	我是窗口2<br/>
	我是窗口2<br/>
	我是窗口2<br/>
</div>

提示：您可以先修改部分代码再运行

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>

提示：您可以先修改部分代码再运行

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>");

//**设置初始化变量******
switch(BROWSERNAME){
	case "ns":
		window.addEventListener("load",_xWin_init,false);
	break;
	case "ie":
	default:
		window.attachEvent("onload",_xWin_init);
}

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

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;

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

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

提示：您可以先修改部分代码再运行

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 .xWinTitleCloseButton {
	
}

.xWin .xTitle .xWinTitleMaxButton {
	
}

.xWin .xTitle .xWinTitleMinButton {
	
}

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

提示：您可以先修改部分代码再运行

这个破东西终于可以算是告一段落了，俺在兼容性方面也学到了不少，哈哈哈

发现bug欢迎回帖告诉我，请多多指教

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

老婆的小店 - 半停业
hutia的个人站点 - 垃圾站重新开张了

		自动登录	找回密码
密码			注册

[原创]xWin之JS版(2-26更新) [复制链接]

[原创]还是xWin....这次是JS版

[原创]还是xWin....这次是JS版

[原创]还是xWin....这次是JS版

[原创]还是xWin....这次是JS版

[原创]还是xWin....这次是JS版

[原创]还是xWin....这次是JS版

[原创]还是xWin....这次是JS版

[原创]还是xWin....这次是JS版

发现错误报告

浏览过的帖子

浏览过的版块