TreeView的自定義右鍵菜單
最近項目中有一個小小的需求，要求實作TreeView的自定義菜單，于是乎就收集資料，現将自己收集資料分享一下
1.示例
效果圖
方法一 ：利用oncontextmenu事件來實作
代碼：
<html >
<head runat="server">
<title>xTreeView</title>
<style type="text/css">
<!--
.skin0{
position:absolute;
width:140px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
font-size:14px;
z-index:100;
visibility:hidden;
}
.menuitems
{
padding-left:10px;
padding-right:10px;
font-family:Verdana;
font-size:12px;
color:black;
}
-->
</style>
</head>
<body>
<form id="form1" runat="server" >
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="176px" >
<asp:TreeView ID="TreeView1" runat="server" BackColor="#FFFFC0" Height="180px" Width="172px">
<Nodes>
<asp:TreeNode Text="Root" Value="sroot">
<asp:TreeNode Text="Parent 1" Value="sParent 1">
<asp:TreeNode Text="<b id='b1' οncοntextmenu='return showmenuie(event)' >this is a test</b>" Value=
"sLeaf 1" ></asp:TreeNode>
<asp:TreeNode Text="Leaf 2" Value="sLeaf 2"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Parent 2" Value="sParent 2">
<asp:TreeNode Text="Leaf 1" Value="sLeaf 1"></asp:TreeNode>
<asp:TreeNode Text="Leaf 2" Value="sLeaf 2"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</asp:Panel>
<div>
<asp:Panel ID="Panel2" runat="server" display:none BorderColor="Black" CssClass="skin0" onMouseover="highlightie(event)" onMouseout="lowlightie(event)" onClick="jumptoie(event)" >
<div class="menuitems"><asp:LinkButton ID="LinkButton1" runat="server" CssClass="menuitems" >New Node</asp:LinkButton></div>
<div class="menuitems"><asp:LinkButton ID="LinkButton2" runat="server" CssClass="menuitems">Edit Node</asp:LinkButton></div>
<hr />
<div class="menuitems"><asp:LinkButton ID="LinkButton3" runat="server" CssClass="menuitems">Delete Node</asp:LinkButton></div>
<hr />
<div class="menuitems"><asp:LinkButton ID="LinkButton4" runat="server" CssClass="menuitems">FAQS</asp:LinkButton></div>
<div class="menuitems"><asp:LinkButton ID="LinkButton5" runat="server" CssClass="menuitems">Online Help</asp:LinkButton></div>
<hr />
<div class="menuitems"><asp:LinkButton ID="LinkButton6" runat="server" CssClass="menuitems">Email Me</asp:LinkButton></div>
</asp:Panel>
</div>
</form>
<script src="xtreeview.js" type="text/javascript"></script>
</body>
</html>
相應的Js代碼：
// xtreeView JScript File
var ie=document.all&&document.getElementById
var ns=document.getElementById&&!document.all
if (ie||ns)
var menuobj=document.getElementById("Panel2")
//屏蔽浏覽器右鍵菜單并顯示自定義右鍵菜單
function showmenuie(e) {
//設定右鍵菜單的位置
var rightedge=ie? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX
var bottomedge=ie? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY
if (rightedge<menuobj.offsetWidth)
menuobj.style.left=ie? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth
else
menuobj.style.left=ie? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX
if (bottomedge<menuobj.offsetHeight)
menuobj.style.top=ie? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight
else
menuobj.style.top=ie? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY
//讓菜單顯示
menuobj.style.visibility="visible"
//屏蔽浏覽器右鍵
return false
}
function hidemenuie(e) {
//讓菜單隐藏
menuobj.style.visibility="hidden"
}
//當滑鼠旋停在菜單的某項時高亮顯示
function highlightie(e){
var firingobj=ie? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns&&firingobj.parentNode.className=="menuitems"){
if (ns&&firingobj.parentNode.className=="menuitems")
{
firingobj=firingobj.parentNode
}
firingobj.style.backgroundColor="highlight"
}
}
//當滑鼠離開在菜單的某項時某項正常顯示
function lowlightie(e){
var firingobj=ie? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns&&firingobj.parentNode.className=="menuitems"){
if (ns&&firingobj.parentNode.className=="menuitems")
{
firingobj=firingobj.parentNode
}
firingobj.style.backgroundColor=""
window.status=''
}
}
function jumptoie(e){
var firingobj=ie? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns&&firingobj.parentNode.className=="menuitems"){
if (ns&&firingobj.parentNode.className=="menuitems")
var firingobj2=firingobj.parentNode
}
}
if (ie||ns){
menuobj.style.display=''
document.οnclick=hidemenuie
}
注意：
1.紅色部分不能缺少return(少了return哪怕你在body裡加上οncοntextmenu=“return false”也不行)：隻要有oncontextmenu事件就會有浏覽器右鍵菜單，除非你
事件傳回值為false
方法二：利用onmouseup或者onmousedown來實作
隻要在以上代碼中去掉οncοntextmenu='return showmenuie(event)'加上onmousedup='test(event)'或者οnmοusedοwn='test(event)'并加上
οncοntextmenu="return false"即可。其中test(加到原JS代碼中)定義如下:
function test(event) {
if (event.button == 2) {
showmenuie(event);
}
}
![學Silverlight 2系列(22)：在Silverlight中用JavaScript調用.NET代碼[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)