今天完成了自己的html窗口-CSDN博客

本文链接：https://blog.csdn.net/myfreeway/article/details/1476578

本文介绍了一个简单的网页窗口组件实现方案，该组件通过HTML、CSS和JavaScript构建，支持基本的窗口操作如最大化、最小化及状态显示等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

< html >

< head >

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

-->

<!-- <script type="text/javascript" src="window.js"></script>

-->

< style type ="text/css" media ="screen" >

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 >

< script type ="text/javascript" >

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 >

< div id ="container1" ></ div >

< div id ="container2" ></ div >

< div id ="container3" ></ div >

</ body >

</ html >