先设置右键菜单的风格
<style type="text/css">
div#rMenu {position:absolute; visibility:hidden; top:0; text-align: left;padding:4px;}
div#rMenu a{
padding: 3px 15px 3px 15px;
background-color:#EEEEEE;
vertical-align:middle;
}
</style>
在body中设置菜单的 div (其中a标签的绑定使用两种不通的方式)
<div id="rMenu"> <a href="javascript:newNode()">新建文件夹</a><br> <a href="javascript:renameNode()">重命名文件夹</a><br> <a href="#" id="deleteTreeNode">删除文件夹</a> </div>
还需要在js代码中添加 右键事件(右键点击之后跳转的函数)
其中带颜色的部分应该可以删除,暂时不知道啥用
//鼠标右键单击事件
function zTreeOnRightClick(event, treeId, treeNode) {
// alert(treeNode ? treeNode.id + ", " + treeNode.name : "isRoot");
if(treeNode.id != null){
if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
showRMenu("root", event.clientX, event.clientY,treeNodes);
console.log("root已经右键")
} else if (treeNode && !treeNode.noR) {
showRMenu("node", event.clientX, event.clientY,treeNode);
console.log(treeNode.id)
console.log("node已经右键")
a=treeNode.id
}
}
};
之后就是js代码中的,显示右键菜单,隐藏右键菜单,点击右键菜单
//显示右键菜单
function showRMenu(type, x, y,treeNode) {
$("#rMenu ul").show();
$(rMenu).css({"top":y+"px", "left":x+"px", "visibility":"visible"}); //设置右键菜单的位置、可见
$("body").bind("mousedown", onBodyMouseDown);
// console.log("----------"+treeNode)
console.log("已经显示菜单")
}
//隐藏右键菜单
function hideRMenu() {
$(rMenu).css({"visibility": "hidden"}); //设置右键菜单不可见
}
//鼠标点击菜单时调用,还不知道具体作用
function onBodyMouseDown(event) {
console.log("已经点击");
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
$(rMenu).css({ "visibility" : "hidden"});
//console.log(!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0));
}
}
点击其中一个菜单时,会走对应a标签的 onclick,进入函数
浙公网安备 33010602011771号