程式碼下載：ASP.NET Server Control - Day30.rar

一、jQuery ContextMenu plugin
ContextMenu plugin 是基於 jQuery 開發的右鍵選單插件，它只需要非常簡短的程式碼，就可以建立出相當美觀的右鍵選單，詳細說明請參閱以下網址。
http://www.trendskitchens.co.nz/jquery/contextmenu/


以上圖右鍵選單為例，我們看一下它的 HTML 原始碼及 JavaScript 程式碼。
HTML 原始碼

    <div class="contextMenu" id="myMenu1">
      <ul>
        <li id="open"><img src="folder.png" /> Open</li>
        <li id="email"><img src="email.png" /> Email</li>
        <li id="save"><img src="disk.png" /> Save</li>
        <li id="close"><img src="cross.png" /> Close</li>
      </ul>
    </div>

JavaScript 程式碼

   $('span.demo1').contextMenu('myMenu1', {

      bindings: {

        'open': function(t) {
          alert('Trigger was '+t.id+'\nAction was Open');
        },

        'email': function(t) {
          alert('Trigger was '+t.id+'\nAction was Email');
        },

        'save': function(t) {
          alert('Trigger was '+t.id+'\nAction was Save');
        },

        'delete': function(t) {
          alert('Trigger was '+t.id+'\nAction was Delete');
        }
      }
    });

二、實作 ContextMenu 控制項
接下來我們將開始實作，把 ContextMenu plugin 封裝為伺服器控制項，想辨法輸出所需的 HTML 原始碼及 JavaScript 程式碼。
step1. 定義選單項目集合類別
我們定義 TBMenuItem 類別來描述選單項目，TBMenuItemCollection 類別為選單項目集合。伺服器控制項會依這個選單項目的集合類別，來輸出 HTML 碼中 <ul> Tag 的內容。


step2. 實作 TBContextMenu 控制項
繼承 WebControl 命名為 TBContextMenu，因為這個控制項是沒有 UI，所以自訂控制項 Designer 來呈現設計階段的控制項外觀。

    ''' <summary>
    ''' 右選選單控制項。
    ''' </summary>
    < _
    Description("右選選單控制項"), _
    Designer(GetType(TBContextMenuDesigner)), _
    ToolboxData("<{0}:TBContextMenu runat=server></{0}:TBContextMenu>") _
    > _
    Public Class TBContextMenu
        Inherits WebControl

    End

TBContextMenuDesigner 只是單純顯示設計階段的控制項外觀。

    ''' <summary>
    ''' 擴充 TBContextMenu 控制項的設計模式行為。
    ''' </summary>
    Public Class TBContextMenuDesigner
        Inherits System.Web.UI.Design.ControlDesigner

        ''' <summary>
        ''' 用來在設計階段表示控制項的 HTML 標記。
        ''' </summary>
        Public Overrides Function GetDesignTimeHtml() As String
            Dim sHTML As String

            sHTML = MyBase.CreatePlaceHolderDesignTimeHtml()
            Return sHTML
        End Function

    End Class

step3. 覆寫 RenderContents 方法
覆寫 RenderContents 方法，依 Items 集合屬性定義的內容，來建立相關控制項，以便輸出符合的 HTML 碼。

        Protected Overrides Sub RenderContents(ByVal writer As System.Web.UI.HtmlTextWriter)
            Dim oItem As TBMenuItem
            Dim oULTag As HtmlControls.HtmlGenericControl
            Dim oLITag As HtmlControls.HtmlGenericControl
            Dim oImage As HtmlControls.HtmlImage

            Me.Controls.Clear()
            oULTag = New HtmlControls.HtmlGenericControl("ul")
            Me.Controls.Add(oULTag)

            For Each oItem In Me.Items
                oLITag = New HtmlControls.HtmlGenericControl("li")
                oULTag.Controls.Add(oLITag)
                oLITag.ID = oItem.Key

                oImage = New HtmlControls.HtmlImage()
                oLITag.Controls.Add(oImage)
                oImage.Src = Me.ResolveUrl(oItem.ImageUrl)

                oLITag.Controls.Add(New LiteralControl(oItem.Text))
            Next

            MyBase.RenderContents(writer)
        End Sub

step4. 覆寫 AddAttributesToRender 方法
因為選單預設是隱藏的，按下右鍵才會呈現，所以我們要覆寫 AddAttributesToRender 方法加上 style="display:none;"。

        Protected Overrides Sub AddAttributesToRender(ByVal writer As HtmlTextWriter)
            MyBase.AddAttributesToRender(writer)
            '預設為隱藏
            writer.AddStyleAttribute(HtmlTextWriterStyle.Display, "none")
        End Sub

[超過字數限制，下一篇接續本文]

備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/31/5844.aspx