編者:現在有大量的第三方控制項存在,這些控制項包括了開發的各個方面,但對於開發人員而言選擇一個合適的控制項卻很難,所以今天我們要推薦的是一個可以實作類別似MSN彈出通知訊息功能的控制項:
下載控制項:PopupWin
使用範例
MSN由個很好的功能,就是每當你的MSN好友上線時,MSN會自動在表單托盤的右下角由下往上彈出訊息框來通知你,這個功能十分實用,比如在論壇裡,當有新回複你的文章時,系統會自動彈出訊息提示框,又或者在一個電子政務的系統裡,當收到新的郵件或者工作單時,可以使系統彈出訊息框提示等等。那麼,在ASP.NET構建的Web應用中,如何?這樣的功能呢?在本文中,向讀者推薦一個可以實作類別似MSN的通知訊息視窗效果的.NET控制項。
首先讓我們來看下該控制項實現後的樣子,如:
可以看到,這個控制項可以在各類型的瀏覽器中使用(IE,MOZILLA,NETSCAPE,OPERA),而且我們還可以自訂色彩,還可以進行拖拉,如:
下面我介紹這個控制項的一些使用方法。
首先,在該控制項中,有兩種事件可以被激發:Linkcliked事件(當訊息框內的串連被點擊時觸發)和Popupclosed事件(當訊息框視窗被關閉時觸發)。控制項有三種方式對這些事件進行處理,而actiontype屬性的取值,則決定了這三種方式:
1)messagewindow(預設):預設的快顯視窗方式,將以設定好的Title屬性和Text屬性為標題和視窗內的文字說明。
2)openlink:此時,控制項允許當點擊視窗內的文字連結時,將以開啟新視窗的方式開啟該連結。
3)raiseevenst:當選擇該屬性時,控制項將會在服務端處理linkcliked事件和popupclosed事件。
在使用該控制項時是十分方便的,只需要在visual studio .net 中,使用add/remove toolbox功能,選擇該控制項的dll,之後,該控制項就會出現在工具箱中,就可以拖拉的方式放到網頁中去應用。
單擊該控制項,在其設計器中,會發現有豐富的屬性(詳細的屬性,事件說明請參考該控制項的文檔)。在設計器中的"操作"分類欄中,可以指定控制項如何處理當使用者關閉視窗和點擊視窗內的文字時開啟的新連結;在"文字"和"設計"分類欄中,將可以設計彈出訊息視窗的字型,顏色,布局(如設定是從左下角還是從右下角彈出);在"行為"分類欄中,可以設定視窗彈出的彈出速度,是否自動在頁面載入後就彈出,以及視窗在彈出多久後會自動關閉,視窗是否可以設定為自由拖拉等等。
下面舉例通過代碼說明如何使用:
在popup.aspx中:
<!-- 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> |
在code-behind代碼中寫入:
// Popup.aspx.cs //設定為預設的訊息視窗 popupWin.ActionType=EeekSoft.Web.PopupAction.MessageWindow; //設定視窗的標題,訊息文字 popupWin.Title="This is popup"; popupWin.Message="<i>Message</i> 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; |
在該控制項的基礎上,我們再增強該控制項的功能,實現一個叫popupanchor的控制項。該控制項可以動態檢測用戶端的事件,比如在一個輸入表單中,每當你在文字框填完資料,將滑鼠的焦點轉移到另外的文字框時,會自動彈出訊息提示框。而且,使用該控制項,還可以動態更改原先快顯視窗的標題和文字。Popipanchor控制項是配合popupwin控制項使用的,比如,想重新開啟已經彈出過的視窗框,可以這樣設定,添加一個popipanchor控制項,設定popuptoshow屬性,指明要控制的是哪一個彈出訊息框的視窗,之後並可以設定相關的handledevent屬性,指明要擊發的是什麼樣的事件(比如onfocus,ondblick)等,如
用下面的的代碼,可以重新設定已經彈出過的訊息視窗的標題文字,並讓其再次彈出:
<!-- 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> |
code-behind檔案中的代碼如下:
// Anchor.aspx.cs // Handle onclick event .. //設定其響應的事件為onclick popupAnchor.HandledEvent="onclick";popupAnchor.LinkedControl="spanReopen"; popupAnchor.PopupToShow="popupWin"; popupWin.Visible=true; popupWin.AutoShow=true; |
則上面的代碼可以實現,當點擊spanreopen地區時,可以使已經彈出的訊息視窗再次彈出。
DEMO例子裡示範了如何使用popupanchor控制項,如,當點擊第一個文字框時,快顯視窗,提示要輸入文字;當輸入完第一個文字框的內容時,將滑鼠移動到第二個文字框時,又會彈出第二個視窗:
在本文提供的下載中,提供了該控制項的完整代碼,使用控制項的範例工程,和關於該控制項的詳細事件方法說明的CHM檔案,可以在vs.net 2003上運行通過。