zoukankan      html  css  js  c++  java
  • ztree右键菜单使用

    先设置右键菜单的风格

    <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,进入函数

     

  • 相关阅读:
    【python】PyQt5 QAction 添加点击事件
    【环境搭建】安装pyQt5 在pycharm报This application failed to start because no Qt platform plugin could be initialized的问题
    【嵌入式】arduino IDE串口监视器可以正常使用但其他软件发送串口指令没有反应的问题
    【操作系统】bat文件 系统找不到文件路径
    十天冲刺:第二天
    十天冲刺:第一天
    项目需求分析NABCD电梯演讲
    项目需求分析与建议-NABCD模型
    团队开发之团队介绍
    会议1.7
  • 原文地址:https://www.cnblogs.com/fighting-20191010/p/11978057.html
Copyright © 2011-2022 走看看