ASP.NET 仿MSN Messenger Alert的彈出窗口控件

　ASP .NET 彈出窗口控件, 是MSN Messenger 提醒(alert)的網頁版,經過定義顏色風格能夠修改圖形的外觀.支持拖放操做.一個很重要的特性是支持絕大多數瀏覽器.在最新版本的Mozilla, IE和Opera下測試經過,在不支持 filter的瀏覽器中UI會有些差別.控件的不少屬性可直接使用HTML代碼,以實現圖片等豐富的表現形式.

　　ASP. NET 彈出窗口控件PopupWindow, 可用於通知用戶重要的信息,好比在web email客戶端通知用戶新消息/信件. 當用戶在系統內交流時須要通知他有人找他聊天. 用此控件的好處是不佔網頁的空間又能醒目得引發用戶的注意. 另外可用於顯示廣告信息.

　　錨定彈出控件PopupWinAnchor,可讓彈出窗口控件更快,頁面加載更少.好比咱們能夠用以實現表單填寫的即時幫助.當 textbox收到輸入焦點時即顯示動態幫助. 另外,能夠用來在每一個textbox後加一個button, 當用戶點擊button時顯示彈出窗口.

　　 控件有兩個事件: 點擊彈出窗口上連接時的事件LinkClicked, 點擊右上角關閉按鈕時的PopupClosed. 根據ActionType屬性(以下)的不一樣,有三種處理事件的方式:

　　(1)MessageWindow (默認) - 控件會打開新的瀏覽器窗口,其中顯示 Text屬性的內容.

　　(2)OpenLink - 控件能夠執行JavaScript操做或打開 Link屬性中的新頁面. 生成的 標籤的target屬性也是能夠改變的. 生成的代碼是這個樣子的: Link.., 所以得小心Link屬性中不要使用引號. LinkTarget非空時纔會加上Target屬性.

　　(3)RaiseEvents - 控件觸發服務器端的 LinkClicked 或 PopupClosed 事件

　　在頁面中使用此控件很是簡單. VS.NET中,只須要在工具箱中用"添加刪除項"來選中控件的dll文件,而後從工具箱中把該控件拖放頁面中.

　　設計器:

　　控件有良好的設計時支持,咱們能夠更改全部屬性,Action類別中,咱們能夠定義當用戶點擊連接和關閉窗口時控件的行爲, Text和Design類別中,咱們能夠修改控件的外表和顯示的消息.在Behavior中,咱們能夠改變時間間隔(什麼時候顯示/隱藏彈出窗口), AutoShow屬性指控件是否在頁面加載後即顯示,DragDrop屬性爲真時,用戶能夠在頁面中拖放控件的位置. 若是咱們把ActionType 設爲 MessageWindow,Window類別能夠用來改變顯示窗口的屬性. Layout類別中的屬性能夠用來控制位置(從窗口左下角或右下角的位移).

　　代碼

　　下面的代碼顯示瞭如何改變一些屬性並顯示控件.

　　

<!-- Popup.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>

//  Anchor.aspx.cs
// Handle onclick  event ..
popupAnchor.HandledEvent= "onclick";
// .. of spanReopen  element
popupAnchor.LinkedControl= "spanReopen";
// Show popupWin when  event occurs
popupAnchor.PopupToShow= "popupWin";
// Popup win  is visible ..
popupWin .Visible= true;
// .. and will be displayed when  page  is loaded
popupWin.AutoShow= true;

　與加入一個彈出窗口控件相似,設計時咱們能夠把錨定控件加入到頁面中,從選擇一個已經存在的服務器端控件或填入其餘元素的ID到 LinkedControl屬性, 而後選擇想綁定的客戶端事件HandledEvent. 若是隻是想再打開彈出窗口,不需勞神,只要讓彈出控件在彈出窗口中可見便可. 若是不想在頁面加載時就顯示彈出控件, 得把AutoShow置爲false,這樣只有在發生綁定的特定事件時纔會顯示.要改變文字錨定彈出控件的文字,需把屬性ChangeTexts設爲 true.

　　代碼:

　　下面的代碼顯示瞭如何錨定彈出控件來打開曾關閉的彈出控件

 

<!-- 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> // Anchor.aspx.cs // Handle onclick event .. popupAnchor.HandledEvent="onclick"; // .. of spanReopen element popupAnchor.LinkedControl="spanReopen"; // Show popupWin when event occurs popupAnchor.PopupToShow="popupWin"; // Popup win is visible .. popupWin.Visible=true; // .. and will be displayed when page is loaded popupWin.AutoShow=true;

<%@ Register TagPrefix="cc1" Namespace="EeekSoft.Web"

　　Assembly="EeekSoft.Web.PopupWin" %>

　　　　之前的版本在運行時動態建立此控件有bug,最新版本已經修正了,下面是運行時建立PopupWindow和PopupWinAnchor 控件的示例. 當用戶點擊spanReopen元素後,用JavaScript會建立並顯示一個彈出窗口.(這個示例假定頁面上有個spanReopen的元素)