图四 为Scripts属性添加anchormain.js

　　Anchormain.js为屏聊系统界面客户端代码，其中包括页面位置显示、页面加载、关闭时所触发的事件功能，代码如下，详细可以参照《Ajax开发页面聊天系统》一文。

　// JScript 文件

(){alert(

).offsetHeight,10); 
    divWidth = parseInt(document.getElementById("eMsg").offsetWidth,10);

document.getElementById("eMsg").style.top =(document.documentElement.clientHeight - divHeight + parseInt(document.documentElement.scrollTop,10))+"px";

   document.getElementById("eMsg").style.left = (parseInt(document.documentElement.scrollLeft,10) + document.documentElement.clientWidth - divWidth)+"px";

    }

    catch(e){

      }

}

 
    { 
    if(parseInt(document.getElementById("eMsg").style.top,10) <= (docHeight - divHeight + parseInt(document.documentElement.scrollTop,10)));

,1); 
    }

    divTop = (parseInt(document.getElementById("eMsg").style.top,10))+"px";
    document.getElementById("eMsg").style.top =( divTop - 1 )+"px";

    } 
    catch(e){

    }

}

).style.display=).offsetWidth,10) 
).style.top =(parseInt(document.documentElement.scrollTop,10) + docHeight + 10)+"px";//  divHeight

,10) ;

).style.display=

).style.display=

).style.display="none";
}

,"")
}

,

 }

,

keycode = ,"");
     }   

}

　　4．根据屏聊界面拖放UpdatePanel控件，并为UpdatePanel控件设置Triggers和UpdateMode。

　　拖放完UpdatePanel控件后，再从工具箱中拖出两个Timer控件，并将Timer控件的Interval设置为1000（1秒钟运行一次）。设置完Timer,我们来设置每一个UpdatePanel控件，我们将UpdatePanel控件的UpdateMode都设为Conditional，Triggers则添加UpdatePanel控件内的子控件，其中Min1区域还需添加Timer1，Max2区域添加Timer2。

　　最终页面HTML代码如下：

　　<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
　　Namespace="System.Web.UI" TagPrefix="asp" %>
　　<link href="anhcr_main.css" type="text/css" />
　　<asp:ScriptManager runat="server">
　　<Scripts>
　　<asp:ScriptReference Path="anchormain.js" />
　　</Scripts>
　　</asp:ScriptManager>
　　<div>
　　<div>
　　<asp:UpdatePanel runat="server" UpdateMode="Conditional">
　　<ContentTemplate>
　　<DIV><IMG alt="开发：杨剑" src="images/t_1.gif" /> <SPAN>懒羊屏聊系统</SPAN> <SPAN><IMG onmousemove="this.src='images/max_1.gif'" alt="开发：杨剑" src="images/max.gif" /><asp:ImageButton
　　class="timg" runat="server" ImageUrl="images/close.gif" />
　　<IMG alt="开发：杨剑" src="images/t_2.gif" /></SPAN> </DIV>
　　</ContentTemplate>
　　<Triggers>
　　<asp:AsyncPostBackTrigger ControlID="close" EventName="Click" />
　　</Triggers>
　　</asp:UpdatePanel>
　　<asp:UpdatePanel runat="server" UpdateMode="Conditional">
　　<ContentTemplate>
　　<DIV><SPAN><asp:Label runat="server" Text="开发：懒羊  系统正在启动中……"></asp:Label></SPAN></DIV>
　　</ContentTemplate>
　　<Triggers>
　　<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick"></asp:AsyncPostBackTrigger>
　　</Triggers>
　　</asp:UpdatePanel>
　　</div>
　　<div>
　　<asp:UpdatePanel runat="server" UpdateMode="Conditional">
　　<ContentTemplate>
　　<DIV>
　　<IMG alt="开发：杨剑" src="images/t_1.gif" />
　　<SPAN>懒羊屏聊系统</SPAN>
　　<SPAN><IMG onmousemove="this.src='images/min_1.gif'" alt="开发：杨剑" src="images/min.gif" />
　　<asp:ImageButton
　　class="timg" runat="server" ImageUrl="images/close.gif" />
　　<IMG alt="开发：杨剑" src="images/t_2.gif" /> </SPAN></DIV>
　　</ContentTemplate>
　　<Triggers>
　　<asp:AsyncPostBackTrigger ControlID="close1" EventName="Click" />
　　</Triggers>
　　</asp:UpdatePanel>
　　<asp:UpdatePanel runat="server" UpdateMode="Conditional">
　　<ContentTemplate>
　　<DIV><UL><LI><asp:TextBox runat="server"></asp:TextBox> </LI><LI> <asp:ImageButton runat="server" ImageUrl="images/gm.gif"></asp:ImageButton></LI>
　　<LI>开发：懒羊(杨剑)</LI>
　　<LI><asp:ImageButton runat="server" ImageUrl="images/ltjl.gif"></asp:ImageButton></LI></UL>
　　</DIV>
　　</ContentTemplate>
　　<Triggers>
　　<asp:AsyncPostBackTrigger ControlID="ImageButton3" EventName="Click" />
　　</Triggers>
　　</asp:UpdatePanel>
　　<asp:UpdatePanel runat="server" UpdateMode="Conditional">
　　<ContentTemplate>
　　<DIV>
　　<asp:Label runat="server" ForeColor="Red" Text="信息提示区|正在加载……"
　　Width="291px" BorderColor="#FFC0C0" BorderStyle="Solid" BorderWidth="1px"></asp:Label></DIV><DIV><asp:TextBox runat="server" TextMode="MultiLine"></asp:TextBox>
　　<asp:Button runat="server" Text="启动" />
　　<asp:Button runat="server" Text="停止" /></DIV>
　　</ContentTemplate>
　　<triggers>
　　<asp:AsyncPostBackTrigger ControlID="Timer2" EventName="Tick"></asp:AsyncPostBackTrigger>
　　<asp:AsyncPostBackTrigger ControlID="ImageButton3" EventName="Click" />
　　</triggers>
　　</asp:UpdatePanel>
　　<asp:UpdatePanel runat="server" UpdateMode="Conditional">
　　<ContentTemplate>
　　<DIV><UL><LI><asp:TextBox runat="server" TextMode="MultiLine">大家好！</asp:TextBox> </LI><LI><asp:ImageButton runat="server" ImageUrl="images/fs.gif"></asp:ImageButton></LI></UL></DIV>
　　</ContentTemplate>
　　</asp:UpdatePanel>
　　</div>
　　<asp:Timer runat="server" Interval="1000" OnTick="Timer1_Tick"></asp:Timer>
　　<asp:TextBox runat="server" Visible="False"></asp:TextBox>
　　<asp:TextBox runat="server" Visible="False"></asp:TextBox>
　　<asp:Timer runat="server" Interval="1000" OnTick="Timer2_Tick">
　　</asp:Timer>

　　为了更好的显示页面，我们还必须对页面进行样式控制，由于样式文件与原来文章中的CSS样式相同，这里就不多说了，直接添加到项目中就可以了。

　　【注：为了方便查看，请网友们复制粘贴下程序代码，到相应的编辑器中调试。或者你可以直接点击下载整套系统的开发源代码来进一步学习：点击下载】

更多热点：Photoshop教程 ASP入门教程 视频教程 图片教程 开发速查手册