求网页中实现最大化,最小化,恢复等功能?

Question

像www.chinaren.com一样,网页很多表格<table>、<div>
可以拖动位置,最大化,最小化,恢复.
相关代码已实现,不知道怎么最大化,最小化,恢复?
-------------------------------------------------------------------------
<style>
    *{
        font-size:12px
    }
    .dragTable{
        font-size:12px;
        border-top:1px solid #3366cc;
        margin-bottom: 10px;
        width:100%;
        background-color:#FFFFFF;
    }
    .dragTR{
        cursor:move;
        color:#7787cc;
        background-color:#e5eef9;
    }
    td{
        vertical-align:top;
    }
    #parentTable{
        border-collapse:collapse;
        letter-spacing:25px;
    }
</style>
<script>
var draged = false;
tdiv = null;
function dragStart(){
    ao = event.srcElement;
    //alert(ao.tagName);
    if((ao.tagName == "TD")||(ao.tagName == "TR")){
        ao = ao.offsetParent;
    }else{
        return;
    }
    draged = true;
    tdiv = document.createElement("div");
    tdiv.innerHTML = ao.outerHTML;
    tdiv.style.display = "block";
    tdiv.style.position = "absolute";
    tdiv.style.filter = "alpha(opacity=70)";
    tdiv.style.cursor = "move";
    tdiv.style.width = ao.offsetWidth;
    tdiv.style.height = ao.offsetHeight;
    tdiv.style.top = getInfo(ao).top;
    tdiv.style.left = getInfo(ao).left;
    document.body.appendChild(tdiv);
    lastX = event.clientX;
    lastY = event.clientY;
    lastLeft = tdiv.style.left;
    lastTop = tdiv.style.top;
    try{
        ao.dragDrop(); 
    }catch(e){}
}function draging(){//MOUSE Pos
    if( !draged ){
        return;
    }
    var tX = event.clientX;
    var tY = event.clientY;
    tdiv.style.left = parseInt(lastLeft) + tX - lastX;
    tdiv.style.top = parseInt(lastTop) + tY - lastY;
    for( var i = 0; i < parentTable.cells.length; i++ ){
        var parentCell = getInfo(parentTable.cells[i]);
        if( tX >= parentCell.left && tX <= parentCell.right && tY >= parentCell.top && tY <= parentCell.bottom){
            var subTables = parentTable.cells[i].getElementsByTagName("table");
            if( subTables.length == 0 ){
                if(tX >= parentCell.left && tX <= parentCell.right && tY >= parentCell.top && tY <= parentCell.bottom){
                    parentTable.cells[i].appendChild(ao);
                }
                break;
            }
            for( var j = 0; j < subTables.length; j++ ){
                var subTable = getInfo(subTables[j]);
                if(tX >= subTable.left && tX <= subTable.right && tY >= subTable.top && tY <= subTable.bottom){
                    parentTable.cells[i].insertBefore(ao,subTables[j]);
                    break;
                }else{
                    parentTable.cells[i].appendChild(ao);
                } 
            }
        }
    }
}function dragEnd(){
    if( !draged ){
        return;
    }
    draged=false;
    mm = ff(150,15);
}function getInfo(o){//get Pos.x,y
    var to=new Object();
    to.left = to.right = to.top = to.bottom = 0;
    var twidth = o.offsetWidth;
    var theight = o.offsetHeight;
    while( o != document.body ){
        to.left += o.offsetLeft;
        to.top += o.offsetTop;
        o = o.offsetParent;
    }
    to.right = to.left + twidth;
    to.bottom = to.top + theight;
    return to;
}function ff(aa,ab){//Set Pos.x,y
    var ac = parseInt(getInfo(tdiv).left);
    var ad = parseInt(getInfo(tdiv).top);
    var ae = (ac - getInfo(ao).left)/ab;
    var af = (ad - getInfo(ao).top)/ab;
    return setInterval(
        function(){ 
            if( ab < 1 ){
        clearInterval(mm);
        tdiv.removeNode(true);
        ao = null;
        return
        }
    ab--;
    ac -= ae;
    ad -= af;
    tdiv.style.left = parseInt(ac) + "px";
    tdiv.style.top = parseInt(ad) + "px"
}
        ,aa/ab)
}function init(){//init
//alert(parentTable.cells.length);
for( var i = 0; i < parentTable.cells.length; i++ ){
var subTables = parentTable.cells[i].getElementsByTagName("table");
        //alert(subTables.length);
        for( var j = 0;j < subTables.length; j++ ){
            //alert("i:"+i+"\nj:"+j+"\nTable:"+parentTable.id+"\nsubTables:"+subTables[j].id);
            if( subTables[j].className != "dragTable" ){
//break;
             continue;
            }
            //alert(subTables[j].rows[0].nodeName);
            subTables[j].rows[0].className = "dragTR";
            subTables[j].rows[0].attachEvent("onmousedown",dragStart);
            subTables[j].attachEvent("ondrag",draging);
            subTables[j].attachEvent("ondragend",dragEnd);
        }
}
}
</script><body onLoad="init()">
<table border="0" cellpadding="0" cellspacing="10" width="100%" id="parentTable">
<tr>
<td width="25%" valgin="top">
<table border=0 class="dragTable" cellspacing="0" id="t1">
<tr>
<td>AJAX</td>
</tr>
<tr>
<td id="div1" ><jsp:include page="/query.jsp" /> <%//@include file="/query.jsp"%>
<tr>
</table>
<table border=0 class="dragTable" cellspacing="0" id="t2">
<tr>
<td>datagrid</td>
</tr>
<tr>
<td id="div2">datagrid</td>
<tr>
</table>
</td>
<td width="25%">
<table border=0 class="dragTable" cellspacing="0" id="t3">
<tr>
<td>C#.net</td>
</tr>
<tr>
<td id="div3">C#.net</td>
</tr>
</table>
<table border=0 class="dragTable" cellspacing="0" id="t4">
<tr>
<td>VB</td>
</tr>
<tr>
<td id="div4">VB</td>
</tr>
</table>
</td>
</tr>
</table>
<a href="#" onClick="div1.style.display='none'">隐藏</a>
</body>

Answer 1

即网页表格1,表格2,表格3,表格4==
每个表格有传统Window最大化,最小化,恢复等按钮.
table1最大化后,占整个页面,table2到table4都隐藏,只看到table1的内容
恢复后,table1到table4的内容都能看到
即要实现
------------------------------------------------------------------
最大化--最小化
最大化--恢复基本大小最小化--最大化
最小化--恢复基本大小
恢复基本大小--最大化
恢复基本大小--最小化
------------------------------------------------------------
下面是隐藏
<a href="#" onClick="table1.style.display='none'">隐藏</a>

Answer 2

table1.style.display='none';
tr1.style.display='none';
td1.style.display='none';
隐藏后怎么恢复?

Answer 3

最小化和隐藏是不一样的。最小化是将“窗口”缩小到一个特定的区域（在 Windows 中就是最下方的任务栏），要想恢复的话可以从那个区域中单击。