Highly customizable JavaScript popup control for web page wrapped in ASP.NET custom control.
ASP.NET弹出窗口
一个使用javascript编写的,用于在ASP.NET中弹出对话框的用户控件,有渐进颜色,还有能设定弹出时的移动的时间,支持Mozilla, Internet Explorer 和 Opera
介绍
这篇文章介绍了一个ASP.NET的窗口弹出控件。该控件模仿MSN 消息警告框的样式,但,它是运行于ASP.NET中的。该窗口的样式可以由用户完全控制,通过设置其颜色或预定义的窗口模式就可修改。该控件还支持窗口拖动,用户可以在窗口上的任一位置移动它。
另 外一个很重要的特性是:该控件适用于多种浏览器。它已经在Microsoft IE,Mozilla Firefox和Opera上进行过测试。但它在不同浏览器上的外观并不完全一样,所以它还不支持filters (filters 仅仅在Microsoft IE最新版中才得到支持。)你可以得到它的HTML属性,因此,可以通过各种属性控制该控件。
以下使用popup代表弹出的对话框控件。
行为事件
该控件有两个事件, LinkClicked (当popup窗口被鼠标点击时的动作) 和PopupClosed (用户单击关闭按钮时的动作)。有三种方式如何处理这些事件。具体使用哪种是由ActionType 决定的。三种行为是:
1,MessageWindow (default) ,在这种情况下,用户控件会打开一个新的浏览窗口,在新的窗口中显示指定在Text 属性中的文字。
2, OpenLink, 在这种情况下,控件允许你做任何 JavaScript 操作或打开链接导任何其它网页 (Link property). 你还可以改变<A>标签内的Target 属性。产生的代码如:<a href="[Link]" target="[LinkTarget]">Link..</a>,因此在链接中小心地使用双引号。(Target 属性只有在 LinkTarget 为空的时候才被加上去)
3,RaiseEvents 当你选择了这种模式,该控件的LinkClicked 或PopupClosed 事件将会被提升到服务器端执行。
使用方法
添加这个控件到网页上是很容易的,在Visual studio 开发环境中,你可以仅仅通过在控件工具栏上添加/删除新控件,然后选择本控件的DLL文件。这样,控件就会如普通的按钮、文本框一样,显示在toolbox 中,接下来的使用就是拖到页面上就可以了。
设计
控 件对进一步的设计提供了很丰富的支持,你可以在设计过程中改变它的每一个属性。在Action属性目录下,你可以定义当控件被点击之后的具体动作。在 Texts和Design属性目录中,你可以修改popup对话框的样式和显示的内容。在Behavior属性中,你可以改变控件被显示或隐藏的时间。 AutoShow属性表明是否控件将在页面一被加载的时候就显示。如果你设置DragDrop为true用户还可以改变控件的位置,在页面上拖动该窗口。 如果你把ActionType设置成MessageWindow,你可以通过Window属性目录改变最终显示的消息框的属性。最后一些属性位于 Layout中,它们决定了该窗口的显示位置。
代码
下面的代码描述了如何设置和显示该控件。
<%@ Register TagPrefix="cc1" Namespace="EeekSoft.Web"
Assembly="EeekSoft.Web.PopupWin" %>
colorstyle="Blue" width="230px" height="100px" dockmode="BottomLeft"
windowscroll="False" windowsize="300, 200"></cc1:popupwin>
// Popup.aspx.cs
// 改变动作类型
popupWin.ActionType=EeekSoft.Web.PopupAction.MessageWindow;
// 设置popup窗口文本
popupWin.Title="This is popup";
popupWin.Message="Message displayed in popup";
popupWin.Text="Text to show in new window..";
// 改变颜色
popupWin.ColorStyle=EeekSoft.Web.PopupColorStyle.Green;
// 改变时间
popupWin.HideAfter=5000;
popupWin.ShowAfter=500;
// 显示类型(页面加载时显示)
popupWin.Visible=true;
使用anchor控件
设计
添 加anchor控件到页面上的方法和添加popup控件到页面上非常相似。当你添加了一个anchor控件到页面上之后,你可以选择任何已经存在于服务端 的控件ID,或选择一个你想处理的客户端事件。如果你只是想重新打开popup控件,你只需要保证popup窗口控件会被传到客户端,并且是可见的就行。 如果你不希望popup窗口在页面一载入的时候就显示,可以设置AutoShow属性为false。
你还可以选择使用PopupWinAnchor来改变popup窗口中的文字。设置anchor控件的ChangeTexts属性为True,然后anchor控件会通过NewTitle,NewMessage和NewText设置新的popup窗口文字。
代码
下面的例子描述了如何使用PopupWinAnchor控件重新打开刚被关闭的popup窗口。
<%@ Register TagPrefix="cc1" Namespace="EeekSoft.Web"
Assembly="EeekSoft.Web.PopupWin" %>
<cc1:popupwin id="popupWin" runat="server" visible="False"
colorstyle="Blue" width="230px" height="100px" dockmode="BottomLeft"
windowscroll="False" windowsize="300, 200"></cc1:popupwin>
<cc1:popupwinanchor id="popupAnchor" runat="server"
changetexts="False"></cc1:popupwinanchor>
<span id="spanReopen"> Click here to reopen popup ! </span>
// Anchor.aspx.cs
// 处理鼠标单击事件
popupAnchor.HandledEvent="onclick";
// .. of spanReopen 元素
popupAnchor.LinkedControl="spanReopen";
// 当事件存在时,显示popup窗口
popupAnchor.PopupToShow="popupWin";
// Popup win is visible ..
popupWin.Visible=true;
// .. and will be displayed when page is loaded
popupWin.AutoShow=true;
在执行时动态加载控件
以前在动态加载控件是有问题的,不过已经被修改了;) 这里是一个动态创建popup窗口的例子。 该例子将会演示当用户单击spanReopen 元素时,动态创建popup窗口。(假设,你的页面上有一个叫spanReopen 的元素)
PopupWin popupWin=new PopupWin();
PopupWinAnchor popupAnchor=new PopupWinAnchor();
// 添加控件到页面
placeHolder.Controls.Add(popupAnchor);
placeHolder.Controls.Add(popupWin);
// Set anchor properties
popupAnchor.PopupToShow=popupWin.ClientID;
popupAnchor.LinkedControl="spanReopen";
popupAnchor.HandledEvent="onclick";
// Set popup win properties
popupWin.ActionType=EeekSoft.Web.PopupAction.MessageWindow;
popupWin.Title="This is popup";
popupWin.Message="Message displayed in popup";
// Show popup
popupWin.Visible=true;
popupWin.AutoShow=false;
用途
该 控件能够很好地用于提示用户重要信息。例如,在web邮件客户端,你可能想提示用户有新消息;在用户可以相互通信的系统中,你可以使用它警告用户有一些人 想和它对话。该控件的优点是,它不需要在页面上占有任何固定的位置,而且很醒目。另外一个可以使用的地方是:用于广告显示,这样就没必要做一个flash 了。
Anchor控件可以使popup控件更快,并且减少页面的重新加载。比如,你可以使用popup控件为一些页面控件显示快速帮助。快速帮助在文本框被聚焦的时候显示,或在文本框后面加一个按钮,当按钮执行时显示。