Cutting Edge:為ASP.NET控制項加入捷徑功能表(2)

來源:互聯網
上載者:User
asp.net|菜單|控制項 Cutting Edge:為ASP.NET控制項加入捷徑功能表(2)英文原文:Adding a Context Menu to ASP.NET Controls
作者:Dino Esposito
翻譯:劉瑞才
源碼:CuttingEdge0502.exe 編程介面
我們的ContextMenu控制項從WebControl繼承並執行INamingContainer介面

public class ContextMenu : WebControl, INamingContainer
圖一控制項的成員細節,如下:

屬性 描述 AutoHide 標誌當使用者滑鼠移出控制項地區時,是否自動隱藏捷徑功能表 BoundControls 返回使用捷徑功能表的控制項集合 CellPadding 返回或設定每個功能表項目周圍的空間的象素數 ContextMenuItems 返回功能表項目的集合 RolloverColor 返回或設定當滑鼠划過功能表項目時突顯的顏色 方法 描述 GetEscReference 返回當使用者按下Esc鍵時用於隱藏頁面中的捷徑功能表的JavaScrip代碼 GetMenuReference 返回一段JavaScript代碼,這段代碼將關聯到捷徑功能表所對應的HTML元素上. GetOnClickReference 返回當使用者在菜單地區外點擊時隱藏捷徑功能表的代碼. 事件 描述 ItemCommand 當使用者點擊一個捷徑功能表項目進激發.

關鍵屬性是ContextMenuItmes集合屬性,它包含了ContextMenuItem類型的對象集合,每一個對象表示一個功能表項目。ContextMenuItem類的源碼如下:



[TypeConverter(typeof(ExpandableObjectConverter))]
public class ContextMenuItem
{
public ContextMenuItem() {}
public ContextMenuItem(string text, string commandName)
{
_text = text;
_commandName = commandName;
}
private string _text;
private string _commandName;
private string _tooltip;
public string Text
{
get {return _text;}
set {_text = value;}
}
public string CommandName
{
get {return _commandName;}
set {_commandName = value;}
}
public String Tooltip
{
get {return _tooltip;}
set {_tooltip = value;}
}
}


每個功能表項目具有顯示文本,命令名(command name),提示文本(tooltip)。你可以通過各方法擴充這個類,例如添加一個圖片URL,一個不可用狀態,或一個目標URL等。顯示文本被顯示於功能表項目上;命令名是一個唯一標識字串,用於指定或確定與功能表項目關聯的命令。tooltip擷取或設定當滑鼠指標停留在功能表項目上時顯示的工具提示文本

當使用者點擊功能表項目時,頁面回傳並激發一個伺服器端的ItemCommand事件。控制頁通過操作這一事件來執行一些代碼來響應使用者對功能表項目的點擊。圖3是一個使用捷徑功能表的樣本工程的截圖:


要使用捷徑功能表,你需要使用menu item對象填充ContextMenuItems集合,調整一些可視化樣式,至少添加一個控制項到BoundControls集合中。然後在瀏覽器中開啟樣本頁,在任意綁定捷徑功能表的控制項上右擊。效果如圖:


每個功能表項目包含一個LinkButton控制項,這個LinkButton控制項有一個內部綁定的點擊事件處理常式。當檢測到點擊時,頁面回傳並激發這個點擊事件。接著,預定義的處理常式將事件冒泡到上一級,並改名為ItemCommand。

控制項還定義了一些可視化的屬性,象CellPadding,RolloverColor和AutoHide。重申一下,在Windows中捷徑功能表可以在按下Esc鍵或在菜單地區外點擊時取消。對於基於Web的捷徑功能表來說,AutoHide屬性為捷徑功能表的根標籤添加OnMouseLeave指令碼,所以當使用者的滑鼠離開菜單地區時,這個根標籤的子樹將隱藏。把AutoHide作為一個可設定的屬性,使用者可以在需要的時候設定是否在滑鼠離開時自動隱藏捷徑功能表。

要使菜單能夠在點擊或按Esc鍵時隱藏,需要添加如下處理常式:< br><bodyonkeypress="...">


處理常式指令碼可以被程式化的添加到每一個頁面元素,只要這個元素被標記為runat=server。這樣實際上就是在ContextMenu捷徑功能表控制項和頁面之間建立了一個邏輯信賴。另外,你必須在頁面上定義一個額外的伺服器控制項。當然,在運行時執行個體化一個額外的控制項並不會嚴重的影響執行效果,但是為什麼僅僅因為想容易的consume其它的控制項而執行個體化一個無用的控制項呢。作為選擇下面這個方法也可以達到同樣的效果:用body擷取按Esc鍵和滑鼠點擊,並且你節省了伺服器控制項的開支

<body onkeypress="<% = ContextMenu1.GetEscReference() %>" >

讓我們更詳細的說一下控制項的實現

控制項的實現

ContextMenu控制項的核心在於重寫CreatechildControls方法。在這個方法中控制項建立介面並在頁面中寫入所需的指令碼。我們說過,ContexMenu控制項的使用者介面分為兩部分——圖形和指令碼。我們先說圖形。

CreateChildControls方法產生一個可以在頁面移動的HTML塊,它就是所需的快顯功能表。照這樣看來,捷徑功能表就是包含一個table表單的<DIV> ,每一個功能表項目就是這個table表單中的一行。使用table是由於一系列的開發點(象邊框和浮動層)和它能很容易的擴充(例如添加側邊圖象)所決定的。

HtmlGenericControl div = new HtmlGenericControl("div");
div.ID = "Root";
div.Style["Display"] = "none";
div.Style["position"] = "absolute";
if (AutoHide)
    div.Attributes["onmouseleave"] = "this.style.display='none'";


我們使用層疊樣式表(CSS)來隱藏最外層的<DIV>標籤,並且用絕對位置標記這個<DIV>。如果自動隱藏可用,那麼<DIV> 還得處理 mouse-leave(滑鼠離開)事件來隱藏本身。那麼 onmouseout和onmouseleave事件有什麼不同呢?前者是當滑鼠移動到一個新的元素上時發生,而後者是當滑鼠移出綁定對象時發生。舉例說明:你的滑鼠在一個有兩行的表單(table)上移動。當你在table的兩行之間移動時,onmouseout事件就會發生;只有你的滑鼠移動到table表單之外時onmouseleave事件才發生。

Table包含和要顯示的功能表項目個數相同的行,每一行有一個儲存格,每個儲存格裡放一個LinkButton對象。菜單通過一個迴圈建立:

foreach(ContextMenuItem item in ContextMenuItems)
{
TableRow menuItem = new TableRow();
menuTable.Rows.Add(menuItem);
TableCell container = new TableCell();
menuItem.Cells.Add(container);
LinkButton button = new LinkButton();
container.Controls.Add(button);
...
}


行的儲存格有一組指令碼操作——onmouseover和onmouseout——完成滑鼠划過的效果。當滑鼠划過時改變背景顏色。滑鼠離開時恢複初始顏色。預設的背景色由從WebControl繼承的background屬性指定。醒目提示由新的屬性RolloverColor指定。

string color = String.Format(ContextMenu.OnMouseOver, ColorTranslator.ToHtml(RolloverColor));
container.Attributes["onmouseover"] = color;
color = String.Format(ContextMenu.OnMouseOut, ColorTranslator.ToHtml(BackColor));
container.Attributes["onmouseout"] = color;


你需要把.NET的System.Drawing.Color值轉換成可用的HTML顏色。有意思的是,無論是Color類的ToString方法還是它的Name屬性都不能在所有情況下返回對應的HTML顏色字串,不知是不是有意這樣的:(。Name屬性基本可以實現這一功能,只有和種情況例外。當顏色不能和已知的顏色匹配時,這個屬性返回顏色的RGB組,外加alpha通道值。要得到當前的HTML顏色,你必須移除alpha通道值(通常是開頭的十六進位 ff 字串)並使用#號替換它。幸運的是,System.Drawing.ColorTranslator類可以自動完成這項工作:)。
(待續)


相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。