ASP.NET中最漂亮、最酷的弹出对话框

Tomas Petricek著
Highly customizable JavaScript popup control for web page wrapped in ASP.NET custom control.

页面上的弹出对话框

ASP.NET弹出窗口
一个使用javascript编写的,用于在ASP.NET中弹出对话框的用户控件,有渐进颜色,还有能设定弹出时的移动的时间,支持Mozilla, Internet Explorer 和 Opera

image

介绍
这篇文章介绍了一个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 事件将会被提升到服务器端执行。

image

使用方法
添加这个控件到网页上是很容易的,在Visual studio 开发环境中,你可以仅仅通过在控件工具栏上添加/删除新控件,然后选择本控件的DLL文件。这样,控件就会如普通的按钮、文本框一样,显示在toolbox 中,接下来的使用就是拖到页面上就可以了。

设计
控 件对进一步的设计提供了很丰富的支持,你可以在设计过程中改变它的每一个属性。在Action属性目录下,你可以定义当控件被点击之后的具体动作。在 Texts和Design属性目录中,你可以修改popup对话框的样式和显示的内容。在Behavior属性中,你可以改变控件被显示或隐藏的时间。 AutoShow属性表明是否控件将在页面一被加载的时候就显示。如果你设置DragDrop为true用户还可以改变控件的位置,在页面上拖动该窗口。 如果你把ActionType设置成MessageWindow,你可以通过Window属性目录改变最终显示的消息框的属性。最后一些属性位于 Layout中,它们决定了该窗口的显示位置。


代码
下面的代码描述了如何设置和显示该控件。
Code:
<!-- Popup.aspx -->
<%@ Register TagPrefix="cc1" Namespace="EeekSoft.Web"
  Assembly="EeekSoft.Web.PopupWin" %>

 

Code:
<cc1:popupwin id="popupWin" runat="server" visible="False"
  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控件
设计
image

添 加anchor控件到页面上的方法和添加popup控件到页面上非常相似。当你添加了一个anchor控件到页面上之后,你可以选择任何已经存在于服务端 的控件ID,或选择一个你想处理的客户端事件。如果你只是想重新打开popup控件,你只需要保证popup窗口控件会被传到客户端,并且是可见的就行。 如果你不希望popup窗口在页面一载入的时候就显示,可以设置AutoShow属性为false。
你还可以选择使用PopupWinAnchor来改变popup窗口中的文字。设置anchor控件的ChangeTexts属性为True,然后anchor控件会通过NewTitle,NewMessage和NewText设置新的popup窗口文字。

image

代码
下面的例子描述了如何使用PopupWinAnchor控件重新打开刚被关闭的popup窗口。

 

<!--  Anchor.aspx  -->
<% @ 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 的元素)

 

 

//  Create popup window and popup win anchor control (in Page_Load)
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控件为一些页面控件显示快速帮助。快速帮助在文本框被聚焦的时候显示,或在文本框后面加一个按钮,当按钮执行时显示。

Download demo project (C# and VB.NET) - 38.2 KB Download control with source - 37.7 KB Download control documentation - 71.1 Kb

转载于:https://www.cnblogs.com/jueban/archive/2007/11/02/946916.html

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值