本文描述了ASPNET的一个popup控件该控件模仿MSN Messenger的警告但是是用于网页的可以通过选择不同的预定义风格或修改空间上用的所有颜色来完全地改变该控件的图形外观控件支持拖拽方式所以用户可以随心所欲地把它放到页面上的任何位置
这个控件的一个重要特性是它可以用到目前的大多数浏览器上已经测试过的浏览器包括最新版本的MozillaInternet Explorer和Opera在不支持filter的浏览器上控件的外观会有所不同(只有最新版本的MSIE才支持filter)在很多的控件属性上也可以使用HTML这样就可以通过图标或其它的任何方式来获得popup控件
动作
该控件有两个事件LinkClicked(popup中的连接被点击)和PopupClosed(用户点击popup中的X按钮)有三种方式来控制这个事件使用什么方法是由ActionType属性决定的可能的三种动作如下
MessageWindow (默认) – 如果选择这个动作控件会弹出一个新的浏览器窗口其中显示Text 属性指定的文本
OpenLink – 这种情况下控件允许你做任何的JavaSript操作或者是打开一个指向其它页面的链接(Link属性)你也可以改变生成的标签的target属性生成的代码看起来就像这样 Link……在Link 中使用引用的时候得小心 (只有当LinkTarget 不是空字符串的时候才会添加Target属性)
RaiseEvents – 当选择这一项的时候popup控件会在服务器端引起LinkClicked 和PopupClosed 事件
使用这个控件
添加控件到网页很简单在VSNET中可以用Add/Remove Toolbox Items然后选择控件的DLL文件这样控件就会出现在工具箱你就可以把它添加到页面了
设计器
对设计者来说控件有丰富的支持所以在设计时你可以改变每一个控件属性在Action类别中可以定义当用户点击链接或关闭popup元素时控件应该执行什么操作Texts 和 Design中的属性可以修改控件的外观和显示的消息在Behavior中可以设置定时(什么时候popup会被显示什么时候被隐藏)AutoShow属性指明当页面被载入后控件是否自动显示当你想在使用Anchor控件之后显示控件时这就很有用了如果把DragDrop 设置为 true用户就可以改变控件的位置并且可以在页面上移动它如果把ActionType 设置为MessageWindow Window类别就允许改变将会出现的窗口的属性最后一个属性在Layout类别中它用于修改位置也就是窗口在什么地方被显示(与窗口左下角或右下角的偏移)
代码
下面的代码描述了怎么改变一些属性以及怎么用代码来显示一个popup控件
// Popupaspxcs // 更改动作类型
popupWinActionType=EeekSoftWebPopupActionMessageWindow;
// 设置Popup和windows文本
popupWinTitle=This is popup;
popupWinMessage=Message displayed in popup;
popupWinText=Text to show in new window; // 更改颜色类型
popupWinColorStyle=EeekSoftWebPopupColorStyleGreen; // 更改时间
popupWinHideAfter=;
popupWinShowAfter=; // 展示popup (页面加载之后)
popupWinVisible=true;
使用anchor控件
设计器
设计时添加anchor控件到页面类似于添加popup控件当添加anchor到页面时可以选择已有的服务器段控件的ID或者写下其它任何元素的ID并选择希望掌控的客户端事件如果只是想重新打开popup不必做其它的任何事情只需要确保popup窗口控件会被安放在输出页面(必须为可见)如果当页面被载入时不想打开popup那么只要把AutoShow 设置为false popup就会在其它指定的事件发生后才打开
也可以通过PopupWinAnchor来改变popup控件上的文本把anchor控件的ChangeTexts属性设置为true就可以做到这点如果选择了这个当客户端事件发生时anchor控件就会把popup的标题改为NewTitle消息改为NewMessage可选的新浏览器窗口中的文本改为NewText
代码
下面的例子展示了怎么用PopupWinAnchor控件来重新打开曾经被关闭的popup控件
Click here to reopen popup ! // Anchoraspxcs // Handle onclick event
popupAnchorHandledEvent=onclick; // of spanReopen element
popupAnchorLinkedControl=spanReopen; // Show popupWin when event occurs
popupAnchorPopupToShow=popupWin; // Popup win is visible
popupWinVisible=true; // and will be displayed when page is loaded
popupWinAutoShow=true;
在运行时间创建控件
以前在运行时间创建控件有一些问题这些问题在最近的版本中得到了修正这里有一个在运行时间用PopupWinAnchor控件创建PopupWindow的例子下面的代码会创建一个弹出窗口当用户点击spanReopen元素的时候就会显示(用JavaScript)(这个例子假设在页面上已经有一个spanReopen元素)
// Create popup window and popup win anchor control (in Page_Load)
PopupWin popupWin=new PopupWin();
PopupWinAnchor popupAnchor=new PopupWinAnchor(); // Add controls to page
placeHolderControlsAdd(popupAnchor);
placeHolderControlsAdd(popupWin); // Set anchor properties
popupAnchorPopupToShow=popupWinClientID;
popupAnchorLinkedControl=spanReopen;
popupAnchorHandledEvent=onclick; // Set popup win properties
popupWinActionType=EeekSoftWebPopupActionMessageWindow;
popupWinTitle=This is popup;
popupWinMessage=Message displayed in popup;
// Show popup popupWinVisible=true;
popupWinAutoShow=false;
谁可以用它
该控件可以用来提醒用户一些重要的信息比如在网页邮件客户端中你可能会提醒用户注意新消息在那些用户可以进行系统内部交流的应用程序中你可以用这个控件来提醒用户有人想和他交谈该控件的有点在于它不需要网页上的固定空间但是确足够醒目所以用户会注意到它另一个使用它的方式是在其中展示一些广告信息从而避免使用Flash动态图象(参考CodeProject 标语的在线演示)
Anchor控件让使用popup控件更快并且减少了页面载入时间例如可以用popup控件在窗体中显示快速帮助就像在这个例子中一样当文本框收到focus事件的时候就会显示快速帮助另一个用它来显示快速帮助的方法是在每一个文本后都添加按钮这样当用户点击按钮时popup就会被显示