您的位置：首页 > Web前端 > HTML

今天完成了自己的html窗口

2007-01-07 22:01 471 查看

这个只是初稿，而且功能有限，仅仅满足我做的一个网站（www.2197123.net）的要求。
功能：以简单的api调用生成一个window，能自定义html标题，id，能最大化，最小化，有状态栏。
暂时没放ajax上去，window的样式可自己定义css来改变，这是初稿，代码还比较混乱，一会重构。
特点：代码还算少，不象现成的库那么大。
下一步打算：
加上ajax，用prototype，可拖拉，可保存状态。
代码如下：

<html>

<head>

<!--<link rel='stylesheet' type='text/css' href='window.css' />

-->

<
4000
span style="color:rgb(0,128,0);"><!--<script type="text/javascript" src="window.js"></script>

-->

/**//*

stylesheet for windows module

div.window{...}{

position: relative;

float:left;

overflow: hidden;

background-color: #eeefff;

border: 1px solid #0066aa;

margin: 8px;

padding: 0px;

width: 280px;

left: 21px;

top: 25px;

}

div.titlebar{...}{

background-color: #0066aa;

background-image: url(images/titlebar_bg.gif);

background-repeat: repeat-x;

border-bottom: solid black 1px;

width: 100%;

height: 16px;

overflow:hidden;

}

h1.titleContext{...}{

position: relative;

height: 16px;

float:left;

font-size: 13px;

font-weight: normal;

background: url(images/titlebarleft.gif) no-repeat left center;

text-indent: 14px;

margin: 0px;

padding: 0px;

}

a.titleButton{...}{

position: relative;

height: 16px;

width: 16px;

padding: 0px;

margin: 0px 1px;

float:right;

}

a.rl{...}{

background: transparent url(images/rl_blue.gif) top left no-repeat;

}

a.min{...}{

background: transparent url(images/winmin.gif) top left no-repeat;

}

a.min:hover{...}{

background: transparent url(images/winmin_over.gif) top left no-repeat;

}

a.max{...}{

background: transparent url(images/winmax.gif) top left no-repeat;

}

a.max:hover{...}{

background: transparent url(images/winmax_over.gif) top left no-repeat;

}

div.contents {...}{

overflow: hidden;

padding: 0px;

height: 190px;

}

div.statusbar{...}{

font-size: 12px;

color:#000000;

background-color: #e5ecf9;

height: 16px;

overflow:hidden;

border-top: 1px solid #000000;

padding: 1px;

}

span.statusinfo{...}{

position: relative;

float:left;

}

a.statusButton{...}{

position: relative;

float:right;

}

a.statusButton:hover{...}{

background-color: #ffffff;

}

</style>

function _gel(a)

...{

return document.getElementById?document.getElementById(a):null

}

function _zw(a,b)

...{

var c=_gel("w_"+a+"_b");

if(c)

...{

var d=c.style.display!="none";

c.style.display=d?"none":"block";

var e=_gel("w_"+a+"_zippy");

if(e)

...{

if(d)

...{

e.className=e.className.replace(/min/,"max")

}

else

...{

e.className=e.className.replace(/max/,"min")

}

return false

}

function _rlw(a,b)

...{

var c=_gel("w_"+a+"_si");

if(c)

...{

c.innerHTML="正在载入......";

}

return false

}

var win = new Object();

win.createwin = function( container,id, title ) ...{

this.container= _gel(container);

this.id= id;

this.title = title;

var box=document.createElement('div');//新窗口

box.className='window';

box.id='w_'+this.id;

this.container.appendChild(box);

var titlebar=document.createElement('div');//标题栏

titlebar.className='titlebar';

box.appendChild(titlebar);

var contents=document.createElement('div');//主文本框

contents.className='contents';

contents.id='w_'+this.id+'_b';

box.appendChild(contents);

var statusbar=document.createElement('div');//状态栏

statusbar.className='statusbar';

statusbar.id='w_'+this.id+'_sb';

box.appendChild(statusbar);

var titleContext=document.createElement('h1');//标题

titleContext.className='titleContext';

titleContext.id='w_'+this.id+'_t';

titleContext.innerHTML=this.title;

titlebar.appendChild(titleContext);

var rl=document.createElement('a');//刷新,重载入

rl.className='titleButton rl';

rl.id='w_'+this.id+'_rl';

rl.href='javascript:void(0)';

rl.onclick=_rlwd;

titlebar.appendChild(rl);

var zoon=document.createElement('a');//最大化最小化

zoon.className='titleButton min';

zoon.id='w_'+this.id+'_zippy';

zoon.href='javascript:void(0)';

zoon.onclick=_zwd;

titlebar.appendChild(zoon);

var statusinfo=document.createElement('span');//刷新状态信息栏

statusinfo.className='statusinfo';

statusinfo.id='w_'+this.id+'_si';

statusbar.appendChild(statusinfo);

var statusButton=document.createElement('a');//更多连接

statusButton.className='statusButton';

statusButton.id='w_'+this.id+'_m';

statusButton.href='javascript:void(0)';

statusbar.appendChild(statusButton);

function _zwd()...{

_zw(id,'Null');

};

function _rlwd()...{

_rlw(id,'Null');

};

window.onload=function ()...{

var win1=new win.createwin ( "container1",1, "1111111111" );

var win2=new win.createwin ( "container1",2, "2" );

var win3=new win.createwin ( "container1",3, "3" );

var win4=new win.createwin ( "container2",4, "444444444 <a href='http://www.baidu.com'>发布信息</a>" );

var win4=new win.createwin ( "container2",5, "444444444 <a href='http://www.baidu.com'>发布信息</a>" );

var win4=new win.createwin ( "container2",6, "444444444 <a href='http://www.baidu.com'>发布信息</a>" );

}

</script>

</head

><body>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html function javascript div float stylesheet

相关文章推荐

新的分享

章节导航