多窗口操作 - Kelven Cheung

多窗口操作

<!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>

<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 id="ssss"></div>
</body>
</html>

效果：

posted on 2006-06-30 11:19 kelven 阅读(368) 评论(0) 编辑收藏所属分类: JavaScript 、HTML

常用链接

留言簿(4)

我参与的团队

随笔分类(25)

文章分类(148)

收藏夹(6)

我的连接

搜索

最新评论

阅读排行榜

评论排行榜


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻 Chat2DB C++博客博问管理
相关文章: js控制excel打印完美解决方案 JS中数字金额转大写 JavaScript 背投广告代码 javascript导航菜单 JAVASCRIPT控制MEDIA PLAYER的功能实现 javascript读取xml javascript的md5加密 js小技巧 Javascript实例教程(14) 鼠标触发窗口 Javascript实例教程(15) JS代替CGI