ztree右键菜单使用
时间:2019-12-03
本文章向大家介绍ztree右键菜单使用,主要包括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,进入函数
原文地址:https://www.cnblogs.com/fighting-20191010/p/11978057.html
- Asp.Net统一前后端提示信息方案
- 人工智能:未来决策制定的机遇与影响
- CaseStudy(showcase)界面篇-导出xaml以及放入Blend的技巧
- [Silverlight动画]转向行为 - 避开行为
- CaseStudy(showcase)界面篇-desing设计界面
- [Silverlight动画]转向行为 - 寻找行为
- 【数字货币】数字黄金
- [Silverlight动画]转向行为 - 转向机车
- [Silverlight动画]转向行为 - 机车
- 微信、小游戏与未来
- [Silverlight动画]转向行为 - 2D向量
- [Silverlight动画]转向行为 - 介绍
- WCF技术剖析之十七:消息(Message)详解(中篇)
- flash游戏引擎整理
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SQL-查询比p6零件供应数量都高的零件
- 浙大版《C语言程序设计(第3版)》题目集 习题8-5 使用函数实现字符串部分复制
- 最小生成树-Magicpig密室出逃(Kruskal+并查集)
- 浙大版《C语言程序设计(第3版)》题目集 习题8-6 删除字符
- SQL-显示供应商供应零件的汇总列表(with rollup+coalesce)
- 浙大版《C语言程序设计(第3版)》题目集 习题8-8 判断回文字符串
- 双向广搜-HDU1401 Solitaire
- TCP三次握手和四次挥手以及11种状态
- 浙大版《C语言程序设计(第3版)》题目集 题8-9 分类统计各类字符个数
- 迭代加深搜索-POJ 3134 Power Calculus
- 浙大版《C语言程序设计(第3版)》题目集 习题9-2 计算两个复数之积
- 浙大版《C语言程序设计(第3版)》题目集 习题9-6 按等级统计学生成绩
- 实战|用pandas+PyQt5制作一款数据分组透视处理工具
- 带权/种类并查集-POJ 1182食物链
- 浙大版《C语言程序设计(第3版)》题目集 练习10-1 使用递归函数计算1到n之和