您的位置：首页 > Web前端 > JQuery

[ASP.NET 控件实作] 整合 jQuery ContextMenu plugin 的右键选单控件

2008-11-05 20:35 621 查看
http://www.tzwhx.com/newOperate/html/1/class_11.html

jQuery是一个非常精简强大的JavaScript函式库，最近看到一个消息，未来微软的ASP.NET也会全面支持jQuery，详见「微软将在ASP.NET相关产品中全面支持jQuery」一文。笔者在之前就被jQuery简短有力的程序语法所吸引，也把jQuery套用在服务器控件中，在本文将示范如何将jQuery的ContextMenuplugin封装成服务器控件，使开发人员在使用上更为简便。

程序代码下载：ASP.NETServerControl-Day30.rar



一、jQueryContextMenuplugin

ContextMenuplugin是基于jQuery开发的右键选单插件，它只需要非常简短的程序代码，就可以建立出相当美观的右键选单，详细说明请参阅以下网址。

http://www.trendskitchens.co.nz/jquery/contextmenu/









以上图右键选单为例，我们看一下它的HTML原始码及JavaScript程序代码。

HTML原始码

〈divclass="contextMenu"id="myMenu1">
〈ul>
〈liid="open"><　imgsrc="folder.png"/>Open<　/li>
<　liid="email"><　imgsrc="email.png"/>Email<　/li>
<　liid="save"><imgsrc="disk.png"/>Save<　/li>
<　liid="close"><　imgsrc="cross.png"/>Closeli>
ul>
div>
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

JavaScript程序代码
$('span.demo1').contextMenu('myMenu1',{
bindings:{
'open':function(t){
alert('Triggerwas'+t.id+'/nActionwasOpen');
},
'email':function(t){
alert('Triggerwas'+t.id+'/nActionwasEmail');
},
'save':function(t){
alert('Triggerwas'+t.id+'/nActionwasSave');
},
'delete':function(t){
alert('Triggerwas'+t.id+'/nActionwasDelete');
}
}
});
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

二、实作ContextMenu控件
接下来我们将开始实作，把ContextMenuplugin封装为服务器控件，想辨法输出所需的HTML原始码及JavaScript程序代码。
step1.定义选单项目集合类别
我们定义TBMenuItem类别来描述选单项目，TBMenuItemCollection类别为选单项目集合。服务器控件会依这个选单项目的集合类别，来输出HTML码中<　ul>Tag的内容。





step2.实作TBContextMenu控件
继承WebControl命名为TBContextMenu，因为这个控件是没有UI，所以自订控件Designer来呈现设计阶段的控件外观。
'''
'''右選選單控制項。
'''
<_
Description("右選選單控制項"),_
Designer(GetType(TBContextMenuDesigner)),_
ToolboxData("<{0}:TBContextMenurunat=server>")_
>_
PublicClassTBContextMenu
InheritsWebControl
End
TBContextMenuDesigner只是单纯显示设计阶段的控件外观。
'''
'''擴充TBContextMenu控制項的設計模式行為。
'''
PublicClassTBContextMenuDesigner
InheritsSystem.Web.UI.Design.ControlDesigner
'''
'''用來在設計階段表示控制項的HTML標記。
'''
PublicOverridesFunctionGetDesignTimeHtml()AsString
DimsHTMLAsString
sHTML=MyBase.CreatePlaceHolderDesignTimeHtml()
ReturnsHTML
EndFunction
EndClass
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}





step3.覆写RenderContents方法
覆写RenderContents方法，依Items集合属性定义的内容，来建立相关控件，以便输出符合的HTML码。
ProtectedOverridesSubRenderContents(ByValwriterAsSystem.Web.UI.HtmlTextWriter)
DimoItemAsTBMenuItem
DimoULTagAsHtmlControls.HtmlGenericControl
DimoLITagAsHtmlControls.HtmlGenericControl
DimoImageAsHtmlControls.HtmlImage
Me.Controls.Clear()
oULTag=NewHtmlControls.HtmlGenericControl("ul")
Me.Controls.Add(oULTag)
ForEachoItemInMe.Items
oLITag=NewHtmlControls.HtmlGenericControl("li")
oULTag.Controls.Add(oLITag)
oLITag.ID=oItem.Key
oImage=NewHtmlControls.HtmlImage()
oLITag.Controls.Add(oImage)
oImage.Src=Me.ResolveUrl(oItem.ImageUrl)
oLITag.Controls.Add(NewLiteralControl(oItem.Text))
Next
MyBase.RenderContents(writer)
EndSub
step4.覆写AddAttributesToRender方法
因为选单预设是隐藏的，按下右键才会呈现，所以我们要覆写AddAttributesToRender方法加上style="display:none;"。
ProtectedOverridesSubAddAttributesToRender(ByValwriterAsHtmlTextWriter)
MyBase.AddAttributesToRender(writer)
'預設為隱藏
writer.AddStyleAttribute(HtmlTextWriterStyle.Display,"none")
EndSub
step5.覆写Render方法
在TBContextMenu加入一个ControlID属性，用来设定要呈现右键选单的目标控件ID。然后覆写Render方法，来输出相关的JavaScript程序代码。
ProtectedOverridesSubRender(ByValwriterAsSystem.Web.UI.HtmlTextWriter)
DimoScriptAsStringBuilder
DimsScriptAsString
DimoItemAsTBMenuItem
DimbFlagAsBoolean
DimsClientIDAsString
DimoControlAsControl
oControl=WebFunc.FindControlEx(Me.Page,Me.ControlID)
IfoControlIsNotNothingThen
sClientID=oControl.ClientID
Else
sClientID=String.Empty
EndIf
oScript=NewStringBuilder()
oScript.AppendLine("$(document).ready(function(){")
oScript.AppendLine("$('#"&sClientID&"').contextMenu('"&Me.ClientID&"',{")
oScript.AppendLine("bindings:{")
bFlag=False
ForEachoItemInMe.Items
IfStrIsNotEmpty(oItem.OnClientClick)Then
IfbFlagThen
oScript.AppendLine(",")
EndIf
oScript.AppendLine("'"&oItem.Key&"':function(t){")
oScript.AppendLine(oItem.OnClientClick)
oScript.AppendLine("}")
bFlag=True
EndIf
Next
oScript.AppendLine("}")
oScript.AppendLine("});")
oScript.AppendLine("});")
sScript=oScript.ToString
Me.Page.ClientScript.RegisterStartupScript(Me.GetType,"menu",sScript,True)
MyBase.Render(writer)
EndSub
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

三、测试程序
接下来要测试TBContextMenu控件，首先在HTML码中加入引用相关的jqeruy.js及jquery.contextmenu.js。
<　scripttype="text/javascript"src="js/jquery.js">script>
<　scripttype="text/javascript"src="js/jquery.contextmenu.js">script>
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

在页面放置一个Label及一个TBContextMenu控件，TBContextMenu的ControlID设定为此Label，即在该Label按右键会出现我们设定的右键选单。
<　asp:Labelclass="demo"ID="Label1"runat="server"
Text="RIGHTCLICKFORDEMO(TBContextMenu)"Font-Bold="True">asp:Label>
<　br/>
<bee:TBContextMenuID="TBContextMenu1"runat="server"ControlID="Label1">
<　Items>
<　bee:TBMenuItemKey="open"Text="Open"ImageUrl="~/image/folder.png"OnClientClick="alert('open');"/>
<　bee:TBMenuItemKey="email"Text="Email"ImageUrl="~/image/email.png"OnClientClick="alert('email');"/>
<　bee:TBMenuItemKey="save"Text="Save"ImageUrl="~/image/disk.png"OnClientClick="alert('save');"/>
<　bee:TBMenuItemKey="delete"Text="Delete"ImageUrl="~/image/cross.png"OnClientClick="alert('delete');"/>
Items>
bee:TBContextMenu>
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

执行程序，在Label上按右键就会出现我们在TBContextMenu控件设定Items集合属性的选单内容。



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航