asp.net+javascript+css(模仿google的拖拽的个性网页布局) - mbskys

程序代码

<%@ Page language="c#" Codebehind="WebForm6.aspx.cs" AutoEventWireup="false" Inherits="demoClass.WebForm6" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm6</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<script src="google_drag.js"></script>
<style>.modbox .el {

}
.modbox .csl {
DISPLAY: none
}
.modbox .es {
DISPLAY: none
}
.modbox_e .el {
DISPLAY: none
}
.modbox_e .csl {

}
.modbox .es {

}
.fres {
OVERFLOW: hidden; ; WIDTH: expression(_gel("ffresults").offsetWidth+"px")
}
.panelo {

}
.panelc {

}
.mod {

}
.unmod {

}
FORM {
DISPLAY: inline
}
.c {
CLEAR: both
}
BODY {
FONT-FAMILY: arial,sans-serif
}
TD {
FONT-FAMILY: arial,sans-serif
}
A {
FONT-FAMILY: arial,sans-serif
}
P {
FONT-FAMILY: arial,sans-serif
}
.h {
FONT-FAMILY: arial,sans-serif
}
A:link {
COLOR: #0000cc
}
A:visited {
COLOR: #551a8b
}
A:active {
COLOR: #ff0000
}
.mttl {
PADDING-RIGHT: 5px; PADDING-LEFT: 2px; FONT-WEIGHT: bold; FONT-SIZE: 122%; WIDTH: 90%; BACKGROUND-COLOR: #e5ecf9
}
H2.modtitle {
FONT-WEIGHT: normal; FONT-SIZE: 100%; PADDING-BOTTOM: 0px; MARGIN: 0em; WIDTH: 100%; PADDING-TOP: 0px
}
.modbox {
MARGIN-BOTTOM: 20px; BACKGROUND-COLOR: white
}
.modbox_e {
MARGIN-BOTTOM: 20px; BACKGROUND-COLOR: white
}
#c_1 {
VERTICAL-ALIGN: top; WIDTH: 32%
}
#c_2 {
VERTICAL-ALIGN: top; WIDTH: 32%
}
#c_3 {
VERTICAL-ALIGN: top; WIDTH: 32%
}
.mhdr {
PADDING-RIGHT: 0px; BORDER-TOP: #3366cc 1px solid; PADDING-LEFT: 0px; FONT-SIZE: 82%; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 0px
}
.medit {
PADDING-RIGHT: 2px; VERTICAL-ALIGN: top; WIDTH: 10%; WHITE-SPACE: nowrap; BACKGROUND-COLOR: #e5ecf9; TEXT-ALIGN: right
}
.medit {
COLOR: #77c
}
.medit A:visited {
COLOR: #77c
}
.medit A:link {
COLOR: #77c
}
.medit A:active {
COLOR: #77c
}
.mc {
FONT-SIZE: 82%; PADDING-BOTTOM: 4px; WIDTH: 100%; PADDING-TOP: 4px
}
</style>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
<tr>
<td valign="top" width="100%">
<div id="modules">
<table id="t_1" cellspacing="10" border="0" width="98%" align="center" style="TABLE-LAYOUT:fixed">
<tr>
<td id="c_1" >
<asp:Literal id="sideLeft" runat="server"></asp:Literal>

</td>
<td id="c_3" >
<asp:Literal id="sideCenter" runat="server"></asp:Literal>
</td>
<td id="c_2" >
<asp:Literal id="sideRight" runat="server"></asp:Literal>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<DIV></DIV>
</TD></TR></TABLE>
</form>
<script>

_table=document.getElementById("t_1");
window.onload = _IG_initDrag(_table);

</script>
</body>
</HTML>

程序代码

//=====================================后台部分

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Text;
namespace demoClass
{
/// <summary>
/// WebForm6 的摘要说明。
/// </summary>
public class WebForm6 : System.Web.UI.Page
{
  protected System.Web.UI.WebControls.Literal sideLeft;
  protected System.Web.UI.WebControls.Literal sideCenter;
  protected System.Web.UI.WebControls.Literal sideRight;

  private void Page_Load(object sender, System.EventArgs e)
  {

//这里我没有读数据库,直接写了一些数据
   sideLeft.Text=RenderHtml(1,"ahui4367","<b>ahui4367</b>")+CommonLayer();
   sideCenter.Text=RenderHtml(3,"ahui4367111","<b>ahui4367111</b>")+CommonLayer();
   sideRight.Text=RenderHtml(2,"ahui4367111","<b>ahui4367111</b>")+CommonLayer();

  }

//这里的ID就是WinInfo表的id

//strTitle　WinInfo表窗口的名称

//strContent是

string RenderHtml (int id,string strTitle,string strContent)
  {
   System.Text.StringBuilder sb=new StringBuilder();
   sb.Append("<div id=m_"+id+" class=modbox style=\"position:relative\">\n");//start1
   sb.Append("<h2 class=modtitle>\n");
   sb.Append("<table class=mhdr cellspacing=0 cellpadding=0 >\n");
   sb.Append("<tr>");
   sb.Append("<td id=m_"+id+"_h class=mttl>"+strTitle+"</td>\n");
   sb.Append("<td id=m_"+id+"_e class=medit></td>\n");
   sb.Append("</tr></table>\n");
   sb.Append("</h2>\n");
   sb.Append("<div>");//start2
   sb.Append(strContent);
   sb.Append("</div>\n");//end2
   sb.Append(" </div>");//end1
            return sb.ToString();
  }
  string CommonLayer()
  {
           return "<div style='width=1px;height=1px;position:relative;'></div>";
  }

  #region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }

  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {
   this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion
}
}

程序代码

// 工具类，使用Util的命名空间，方便管理
var  Util  =   new  Object();
// 获取http header里面的UserAgent，浏览器信息
Util.getUserAgent  =  navigator.userAgent;
// 是否是Gecko核心的Browser，比如Mozila、Firefox
Util.isGecko  =  Util.getUserAgent.indexOf( " Gecko " )  !=   - 1 ;
// 是否是Opera
Util.isOpera  =  Util.getUserAgent.indexOf( " Opera " )  !=   - 1 ;
// 获取一个element的offset信息，其实就是相对于Body的padding以内的绝对坐标
// 后面一个参数如果是true则获取offsetLeft，false则是offsetTop
// 关于offset、style、client等坐标的定义参考dindin的这个帖子：http://www.jroller.com/page/dindin/?anchor=pro_javascript_12
Util.getOffset  =   function  (el, isLeft) {
     var  retValue  =   0 ;
     while  (el  !=   null ) {
        retValue  +=  el[ " offset "   +  (isLeft  ?   " Left "  :  " Top " )];
        el  =  el.offsetParent;
    }
     return  retValue;
};
// 将一个function（参数中的funcName是这个fuction的名字）绑定到一个element上，并且以这个element的上下文运行，其实是一种继承，这个可以google些文章看看
Util.bindFunction  =   function  (el, fucName) {
     return   function  () {
         return  el[fucName].apply(el, arguments);
    };
};
// 重新计算所有的可以拖拽的element的坐标，对同一个column下面的可拖拽图层重新计算它们的高度而得出新的坐标，防止遮叠
// 计算出来的坐标记录在pagePosLeft和pagePosTop两个属性里面
Util.re_calcOff  =   function  (el) {
     for  ( var  i  =   0 ; i  <  Util.dragArray.length; i ++ ) {
         var  ele  =  Util.dragArray[i];
        ele.elm.pagePosLeft  =  Util.getOffset(ele.elm,  true );
        ele.elm.pagePosTop  =  Util.getOffset(ele.elm,  false );
    }
     var  nextSib  =  el.elm.nextSibling;
     while  (nextSib) {
        nextSib.pagePosTop  -=  el.elm.offsetHeight;
        nextSib  =  nextSib.nextSibling;
    }
};

// 隐藏Google Ig中间那个table，也就是拖拽的容器，配合show一般就是刷新用，解决一些浏览器的怪癖
Util.hide  =   function  () {
    Util.rootElement.style.display  =   " none " ;
};
// 显示Google Ig中间那个table，解释同上
Util.show  =   function  () {
    Util.rootElement.style.display  =   "" ;
};

// 移动时显示的占位虚线框
ghostElement  =   null ;
// 获取这个虚线框，通过dom动态生成
getGhostElement  =   function  () {
     if  ( ! ghostElement) {
        ghostElement  =  document.createElement( " DIV " );
        ghostElement.className  =   " modbox " ;
        ghostElement.backgroundColor  =   "" ;
        ghostElement.style.border  =   " 2px dashed #aaa " ;
        ghostElement.innerHTML  =   "   " ;
    }
     return  ghostElement;
};

// 初始化可以拖拽的Element的函数，与拖拽无关的我去掉了
function  draggable(el) {
     // 公用的开始拖拽的函数
     this ._dragStart  =  start_Drag;
     // 公用的正在拖拽的函数
     this ._drag  =  when_Drag;
     // 公用的拖拽结束的函数
     this ._dragEnd  =  end_Drag;
     // 这个函数主要用来进行拖拽结束后的dom处理
     this ._afterDrag  =  after_Drag;
     // 是否正在被拖动，一开始当然没有被拖动
     this .isDragging  =   false ;
     // 将这个Element的this指针注册在elm这个变量里面，方便在自己的上下文以外调用自己的函数等，很常用的方法
     this .elm  =  el;
     // 触发拖拽的Element，在这里就是这个div上显示标题的那个div
     this .header  =  document.getElementById(el.id  +   " _h " );
     // 对于有iframe的element拖拽不同，这里检测一下并记录
     this .hasIFrame  =   this .elm.getElementsByTagName( " IFRAME " ).length  >   0 ;
     // 如果找到了header就绑定drag相关的event
     if  ( this .header) {
         // 拖拽时的叉子鼠标指针
         this .header.style.cursor  =   " move " ;
         // 将函数绑定到header和element的this上，参照那个函数的说明
        Drag.init( this .header,  this .elm);
         // 下面三个语句将写好的三个函数绑定给这个elemnt的三个函数钩子上，也就实现了element从draggable继承可拖拽的函数
         this .elm.onDragStart  =  Util.bindFunction( this ,  " _dragStart " );
         this .elm.onDrag  =  Util.bindFunction( this ,  " _drag " );
         this .elm.onDragEnd  =  Util.bindFunction( this ,  " _dragEnd " );
    }
};

// 下面就是draggable里面用到的那4个function
// 公用的开始拖拽的函数
function  start_Drag() {
     // 重置坐标，实现拖拽以后自己的位置马上会被填充的效果
    Util.re_calcOff( this );
     // 记录原先的邻居节点，用来对比是否被移动到新的位置
     this .origNextSibling  =   this .elm.nextSibling;
     // 获取移动的时候那个灰色的虚线框
     var  _ghostElement  =  getGhostElement();
     // 获取正在移动的这个对象的高度
     var  offH  =   this .elm.offsetHeight;
     if  (Util.isGecko) {
         // 修正gecko引擎的怪癖吧
        offH  -=  parseInt(_ghostElement.style.borderTopWidth)  *   2 ;
    }
     // 获取正在移动的这个对象的宽度
     var  offW  =   this .elm.offsetWidth;
     // 获取left和top的坐标
     var  offLeft  =  Util.getOffset( this .elm,  true );
     var  offTop  =  Util.getOffset( this .elm,  false );
     // 防止闪烁，现隐藏
    Util.hide();
     // 将自己的宽度记录在style属性里面
     this .elm.style.width  =  offW  +   " px " ;
     // 将那个灰框设定得与正在拖动的对象一样高，比较形象
    _ghostElement.style.height  =  offH  +   " px " ;
     // 把灰框放到这个对象原先的位置上
     this .elm.parentNode.insertBefore(_ghostElement,  this .elm.nextSibling);
     // 由于要拖动必须将被拖动的对象从原先的盒子模型里面抽出来，所以设定position为absolute，这个可以参考一下css布局方面的知识
     this .elm.style.position  =   " absolute " ;
     // 设置zIndex，让它处在最前面一层，当然其实zIndex=100是让它很靠前，如果页面里有zIndex>100的，那……
     this .elm.style.zIndex  =   100 ;
     // 由于position=absolute了，所以left和top实现绝对坐标定位，这就是先前计算坐标的作用，不让这个模型乱跑，要从开始拖动的地方开始移动
     this .elm.style.left  =  offLeft  +   " px " ;
     this .elm.style.top  =  offTop  +   " px " ;
     // 坐标设定完毕，可以显示了，这样就不会闪烁了
    Util.show();
     // 这里本来有个ig_d.G，没搞明白干什么用的，不过没有也可以用，谁知道麻烦告诉我一声，不好意思
     // 还没有开始拖拽，这里做个记号
     this .isDragging  =   false ;
     return   false ;
};
// 在拖拽时的相应函数，由于绑定到鼠标的move这个event上，所以会传入鼠标的坐标clientX, clientY
function  when_Drag(clientX, clientY) {
     // 刚开始拖拽的时候将图层变透明，并标记为正在被拖拽
     if  ( ! this .isDragging) {
         this .elm.style.filter  =   " alpha(opacity=70) " ;
         this .elm.style.opacity  =   0.7 ;
         this .isDragging  =   true ;
    }
     // 被拖拽到的新的column（当然也可以是原来那个）
     var  found  =   null ;
     // 最大的距离，可能是防止溢出或者什么bug
     var  max_distance  =   100000000 ;
     // 遍历所有的可拖拽的element，寻找离当前鼠标坐标最近的那个可拖拽元素，以便后面插入
     for  ( var  i  =   0 ; i  <  Util.dragArray.length; i ++ ) {
         var  ele  =  Util.dragArray[i];
         // 利用勾股定理计算鼠标到遍历到的这个元素的距离
         var  distance  =  Math.sqrt(Math.pow(clientX  -  ele.elm.pagePosLeft,  2 )  +  Math.pow(clientY  -  ele.elm.pagePosTop,  2 ));
         // 自己已经浮动了，所以不计算自己的
         if  (ele  ==   this ) {
             continue ;
        }
         // 如果计算失败继续循环
         if  (isNaN(distance)) {
             continue ;
        }
         // 如果更小，记录下这个距离，并将它作为found
         if  (distance  <  max_distance) {
            max_distance  =  distance;
            found  =  ele;
        }
    }
     // 准备让灰框落脚
     var  _ghostElement  =  getGhostElement();
     // 如果找到了另外的落脚点
     if  (found  !=   null   &&  _ghostElement.nextSibling  !=  found.elm) {
         // 找到落脚点就先把灰框插进去，这就是我们看到的那个灰框停靠的特效，有点像吸附的感觉，哈哈
        found.elm.parentNode.insertBefore(_ghostElement, found.elm);
         if  (Util.isOpera) {
             // Opera的现实问题，要隐藏/显示后才能刷新出变化
            document.body.style.display  =   " none " ;
            document.body.style.display  =   "" ;
        }
    }
};
// 拖拽完毕
function  end_Drag() {
     // 拖拽完毕后执行后面的钩子，执行after_Drag()，如果布局发生了变动了就记录到远程服务器，保存你拖拽后新的布局顺序
     if  ( this ._afterDrag()) {
         // remote call to save the change
    }
     return   true ;
};
// 拖拽后的执行钩子
function  after_Drag() {
     var  returnValue  =   false ;
     // 防止闪烁
    Util.hide();
     // 把拖拽时的position=absolute和相关的那些style都消除
     this .elm.style.position  =   "" ;
     this .elm.style.width  =   "" ;
     this .elm.style.zIndex  =   "" ;
     this .elm.style.filter  =   "" ;
     this .elm.style.opacity  =   "" ;
     // 获取灰框
     var  ele  =  getGhostElement();
     // 如果现在的邻居不是原来的邻居了
     if  (ele.nextSibling  !=   this .origNextSibling) {
         // 把被拖拽的这个节点插到灰框的前面
        ele.parentNode.insertBefore( this .elm, ele.nextSibling);
         // 标明被拖拽了新的地方
        returnValue  =   true ;
    }
     // 移除灰框，这是这个灰框的生命周期应该就结束了
    ele.parentNode.removeChild(ele);
     // 修改完毕，显示
    Util.show();
     if  (Util.isOpera) {
         // Opera的现实问题，要隐藏/显示后才能刷新出变化
        document.body.style.display  =   " none " ;
        document.body.style.display  =   "" ;
    }
     return  returnValue;
};
// 可拖拽Element的原形，用来将event绑定到各个钩子，这部分市比较通用的，netvibes也是基本完全相同的实现
// 这部分推荐看dindin的这个，也会帮助理解，http://www.jroller.com/page/dindin/?anchor=pro_javascript_12
var  Drag  =  {
     // 对这个element的引用，一次只能拖拽一个Element
    obj: null ,
     // element是被拖拽的对象的引用，elementHeader就是鼠标可以拖拽的区域
    init: function  (elementHeader, element) {
         // 将start绑定到onmousedown事件，按下鼠标触发start
        elementHeader.onmousedown  =  Drag.start;
         // 将element存到header的obj里面，方便header拖拽的时候引用
        elementHeader.obj  =  element;
         // 初始化绝对的坐标，因为不是position=absolute所以不会起什么作用，但是防止后面onDrag的时候parse出错了
         if  (isNaN(parseInt(element.style.left))) {
            element.style.left  =   " 0px " ;
        }
         if  (isNaN(parseInt(element.style.top))) {
            element.style.top  =   " 0px " ;
        }
         // 挂上空Function，初始化这几个成员，在Drag.init被调用后才帮定到实际的函数，可以参照draggable里面的内容
        element.onDragStart  =   new  Function();
        element.onDragEnd  =   new  Function();
        element.onDrag  =   new  Function();
    },
     // 开始拖拽的绑定，绑定到鼠标的移动的event上
    start: function  (event) {
         var  element  =  Drag.obj  =   this .obj;
         // 解决不同浏览器的event模型不同的问题
        event  =  Drag.fixE(event);
         // 看看是不是左键点击
         if  (event.which  !=   1 ) {
             // 除了左键都不起作用
             return   true ;
        }
         // 参照这个函数的解释，挂上开始拖拽的钩子
        element.onDragStart();
         // 记录鼠标坐标
        element.lastMouseX  =  event.clientX;
        element.lastMouseY  =  event.clientY;
         // 将Global的event绑定到被拖动的element上面来
        document.onmouseup  =  Drag.end;
        document.onmousemove  =  Drag.drag;
         return   false ;
    },
     // Element正在被拖动的函数
    drag: function  (event) {
         // 解决不同浏览器的event模型不同的问题
        event  =  Drag.fixE(event);
         // 看看是不是左键点击
         if  (event.which  ==   0 ) {
             // 除了左键都不起作用
             return  Drag.end();
        }
         // 正在被拖动的Element
         var  element  =  Drag.obj;
         // 鼠标坐标
         var  _clientX  =  event.clientY;
         var  _clientY  =  event.clientX;
         // 如果鼠标没动就什么都不作
         if  (element.lastMouseX  ==  _clientY  &&  element.lastMouseY  ==  _clientX) {
             return   false ;
        }
         // 刚才Element的坐标
         var  _lastX  =  parseInt(element.style.top);
         var  _lastY  =  parseInt(element.style.left);
         // 新的坐标
         var  newX, newY;
         // 计算新的坐标：原先的坐标+鼠标移动的值差
        newX  =  _lastY  +  _clientY  -  element.lastMouseX;
        newY  =  _lastX  +  _clientX  -  element.lastMouseY;
         // 修改element的显示坐标
        element.style.left  =  newX  +   " px " ;
        element.style.top  =  newY  +   " px " ;
         // 记录element现在的坐标供下一次移动使用
        element.lastMouseX  =  _clientY;
        element.lastMouseY  =  _clientX;
         // 参照这个函数的解释，挂接上Drag时的钩子
        element.onDrag(newX, newY);
         return   false ;
    },
     // Element正在被释放的函数，停止拖拽
    end: function  (event) {
         // 解决不同浏览器的event模型不同的问题
        event  =  Drag.fixE(event);
         // 解除对Global的event的绑定
        document.onmousemove  =   null ;
        document.onmouseup  =   null ;
         // 先记录下onDragEnd的钩子，好移除obj
         var  _onDragEndFuc  =  Drag.obj.onDragEnd();
         // 拖拽完毕，obj清空
        Drag.obj  =   null ;
         return  _onDragEndFuc;
    },
     // 解决不同浏览器的event模型不同的问题
    fixE: function  (ig_) {
         if  ( typeof  ig_  ==   " undefined " ) {
            ig_  =  window.event;
        }
         if  ( typeof  ig_.layerX  ==   " undefined " ) {
            ig_.layerX  =  ig_.offsetX;
        }
         if  ( typeof  ig_.layerY  ==   " undefined " ) {
            ig_.layerY  =  ig_.offsetY;
        }
         if  ( typeof  ig_.which  ==   " undefined " ) {
            ig_.which  =  ig_.button;
        }
         return  ig_;
    }
};

// 下面是初始化的函数了，看看上面这些东西怎么被调用
var  _IG_initDrag  =   function  (el) {
     // column那个容器，在google里面就是那个table布局的tbody，netvibes用的<div>
    Util.rootElement  =  el;
     // 这个tbody的行
    Util._rows  =  Util.rootElement.tBodies[ 0 ].rows[ 0 ];
     // 列，google是3列，其实也可以更多
    Util.column  =  Util._rows.cells;
     // 用来存取可拖拽的对象
    Util.dragArray  =   new  Array();
     var  counter  =   0 ;
     for  ( var  i  =   0 ; i  <  Util.column.length; i ++ ) {
         // 搜索所有的column
         var  ele  =  Util.column[i];
         for  ( var  j  =   0 ; j  <  ele.childNodes.length; j ++ ) {
             // 搜索每一column里面的所有element
             var  ele1  =  ele.childNodes[j];
             // 如果是div就把它初始化为一个draggable对象
             if  (ele1.tagName  ==   " DIV " ) {
                Util.dragArray[counter]  =   new  draggable(ele1);
                counter ++ ;
            }
        }
    }
};

程序代码

var c=document.getElementById("c_2");

for(var p in c.childNodes)

{

alert(c.childNodes[p].id);

}

程序代码

public class SaveSide : System.Web.UI.Page
{
  ahui4367.SideSql tempSideSql=new SideSql();
  private void Page_Load(object sender, System.EventArgs e)
  {
   if(Request.QueryString["action"]=="changeSide")
   {
    string strLeft=Request.QueryString["strleft"];
    string strCenter=Request.QueryString["strCenter"];
    string strRight=Request.QueryString["strRight"];
    tempSideSql.SaveSide(strLeft,strCenter,strRight,1);
   }
  }

  #region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }

  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {
   this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion
}

程序代码

<%@ Page language="c#" Codebehind="WebForm6.aspx.cs" AutoEventWireup="false" Inherits="demoClass.WebForm6" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>WebForm6</title>
        <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
        <meta content="C#" name="CODE_LANGUAGE">
        <meta content="JavaScript" name="vs_defaultClientScript">
        <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
        <script src='prototype-1.4.0.js'></script>
        <script src="google_drag.js"></script>

        <style>
.modbox .el ...{ }
.modbox .csl ...{ DISPLAY: none }
.modbox .es ...{ DISPLAY: none }
.modbox_e .el ...{ DISPLAY: none }
.modbox_e .csl ...{ }
.modbox .es ...{ }
.fres ...{ OVERFLOW: hidden; ; WIDTH: expression(_gel("ffresults").offsetWidth+"px") }
.panelo ...{ }
.panelc ...{ }
.mod ...{ }
.unmod ...{ }
FORM ...{ DISPLAY: inline }
.c ...{ CLEAR: both }
BODY ...{ FONT-FAMILY: arial,sans-serif }
TD ...{ FONT-FAMILY: arial,sans-serif }
A ...{ FONT-FAMILY: arial,sans-serif }
P ...{ FONT-FAMILY: arial,sans-serif }
.h ...{ FONT-FAMILY: arial,sans-serif }
A:link ...{ COLOR: #0000cc }
A:visited ...{ COLOR: #551a8b }
A:active ...{ COLOR: #ff0000 }
.mttl ...{ PADDING-RIGHT: 5px; PADDING-LEFT: 2px; FONT-WEIGHT: bold; FONT-SIZE: 122%; WIDTH: 90%; BACKGROUND-COLOR: #e5ecf9 }
H2.modtitle ...{ FONT-WEIGHT: normal; FONT-SIZE: 100%; PADDING-BOTTOM: 0px; MARGIN: 0em; WIDTH: 100%; PADDING-TOP: 0px }
.modbox ...{ MARGIN-BOTTOM: 20px; BACKGROUND-COLOR: white }
.modbox_e ...{ MARGIN-BOTTOM: 20px; BACKGROUND-COLOR: white }
#c_1 ...{ VERTICAL-ALIGN: top; WIDTH: 32% }
#c_2 ...{ VERTICAL-ALIGN: top; WIDTH: 32% }
#c_3 ...{ VERTICAL-ALIGN: top; WIDTH: 32% }
.mhdr ...{ PADDING-RIGHT: 0px; BORDER-TOP: #3366cc 1px solid; PADDING-LEFT: 0px; FONT-SIZE: 82%; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 0px }
.medit ...{ PADDING-RIGHT: 2px; VERTICAL-ALIGN: top; WIDTH: 10%; WHITE-SPACE: nowrap; BACKGROUND-COLOR: #e5ecf9; TEXT-ALIGN: right }
.medit ...{ COLOR: #77c }
.medit A:visited ...{ COLOR: #77c }
.medit A:link ...{ COLOR: #77c }
.medit A:active ...{ COLOR: #77c }
.mc ...{ FONT-SIZE: 82%; PADDING-BOTTOM: 4px; WIDTH: 100%; PADDING-TOP: 4px }
        </style>
    </HEAD>
    <body MS_POSITIONING="GridLayout">
        <form id="Form1" method="post" runat="server">
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td valign="top" width="100%">
                        <div id="modules">
                            <table id="t_1" cellspacing="10" border="0" width="98%" align="center" style="TABLE-LAYOUT:fixed">
                                <tr>
                                    <td id="c_1">
                                        <asp:Literal id="sideLeft" runat="server"></asp:Literal>
                                    </td>
                                    <td id="c_2">
                                        <asp:Literal id="sideCenter" runat="server"></asp:Literal>
                                    </td>
                                    <td id="c_3">
                                        <asp:Literal id="sideRight" runat="server"></asp:Literal>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
            <DIV></DIV>
            </TD></TR></TABLE>
        </form>
        <script>

function addEvent(obj, evenTypeName, fn)...{
if (obj.addEventListener)...{
    obj.addEventListener(evenTypeName, fn, true);
    return true;
} else if (obj.attachEvent)...{
    return obj.attachEvent("on"+evenTypeName, fn);
} else ...{
    return false;
}
}

_table=document.getElementById("t_1");

addEvent(window,"load",_IG_initDrag(_table));

        </script>
    </body>
</HTML>
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Text;
using ahui4367;
namespace demoClass
...{
    /**//// <summary>
    /// WebForm6 的摘要说明。
    /// </summary>
    public class WebForm6 : System.Web.UI.Page
    ...{
        protected System.Web.UI.WebControls.Literal sideLeft;
        protected System.Web.UI.WebControls.Literal sideCenter;
        protected System.Web.UI.WebControls.Literal sideRight;
        Side TempSide=new Side();
        SideSql TempSideSql=new SideSql();
        WinInfo TempWinInfo=new WinInfo();
        WinInfoSql TempWinInfoSql=new WinInfoSql();
        char[] dot=...{','};

        private void Page_Load(object sender, System.EventArgs e)
        ...{

           TempSide=TempSideSql.InitSide(1);





            if(TempSide.SideLeft!="")
            ...{
                string[] StrLeft=TempSide.SideLeft.Trim().Split(dot);
                for(int i=0;i<StrLeft.Length;i++)
                ...{
                    TempWinInfo=TempWinInfoSql.GetWinInfo(Convert.ToInt32(StrLeft[i]));
                    sideLeft.Text=sideLeft.Text+RenderHtml(TempWinInfo.WinID,TempWinInfo.WinName,"这是我的窗口内容");
                }
            }

            if(TempSide.SideCenter!="")
            ...{
                 string[] StrCenter=TempSide.SideCenter.Trim().Split(dot);
                for(int i=0;i<StrCenter.Length;i++)
                ...{
                    TempWinInfo=TempWinInfoSql.GetWinInfo(Convert.ToInt32(StrCenter[i]));
                    sideCenter.Text=sideCenter.Text+RenderHtml(TempWinInfo.WinID,TempWinInfo.WinName,"这是我的窗口内容");
                }
            }

            if(TempSide.SideRight!="")
            ...{
                 string[] StrRight=TempSide.SideRight.Trim().Split(dot);
                for(int i=0;i<StrRight.Length;i++)
                ...{
                    TempWinInfo=TempWinInfoSql.GetWinInfo(Convert.ToInt32(StrRight[i]));
                    sideRight.Text=sideRight.Text+RenderHtml(TempWinInfo.WinID,TempWinInfo.WinName,"这是我的窗口内容");
                }
            }

            sideLeft.Text=sideLeft.Text+CommonLayer();
            sideCenter.Text=sideCenter.Text+CommonLayer();
            sideRight.Text=sideRight.Text+CommonLayer();

        }

        string RenderHtml (int id,string strTitle,string strContent)
        ...{
            System.Text.StringBuilder sb=new StringBuilder();
            sb.Append("<div id=m_"+id+" class=modbox style="position:relative">");//start1
            sb.Append("<h2 class=modtitle>");
            sb.Append("<table class=mhdr cellspacing=0 cellpadding=0 >");
            sb.Append("<tr>");
            sb.Append("<td id=m_"+id+"_h class=mttl>"+strTitle+"</td>");
            sb.Append("<td id=m_"+id+"_e class=medit></td>");
            sb.Append("</tr></table>");
            sb.Append("</h2>");
            sb.Append("<div>");//start2
            sb.Append(strContent);
            sb.Append("</div>");//end2
            sb.Append(" </div>");//end1
            return sb.ToString();
        }
        string CommonLayer()
        ...{
           return "<div style='width=1px;height=1px;position:relative;'></div>";
        }

        Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
        override protected void OnInit(EventArgs e)
        ...{
            //
            // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
            //
            InitializeComponent();
            base.OnInit(e);
        }

        /**//// <summary>
        /// 设计器支持所需的方法 - 不要使用代码编辑器修改
        /// 此方法的内容。
        /// </summary>
        private void InitializeComponent()
        ...{
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion
    }
}

程序代码