<!DOCTYPE html>

<HTML>

<HEAD>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>

    <link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/demo.css" type="text/css">

    <link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">

    <script type="text/javascript" src="bower_components/ztree/js/jquery-1.4.4.min.js"></script>

    <script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.core-3.5.js"></script>

    <SCRIPT type="text/javascript">

        var setting = {

            data: {

                simpleData: {

                    enable: true

                }

            },

            callback:{

                beforeMouseDown: beforeMouseDown,                               //注册鼠标按下/抬起来/右键前/后的事件

                beforeMouseUp: beforeMouseUp,

                beforeRightClick: beforeRightClick,

                onMouseDown: onMouseDown,

                onMouseUp: onMouseUp,

                onRightClick: onRightClick

            }

        };

        var nodes =[

            { id:1, pId:0, name:"1", open:true},

            { id:11, pId:1, name:"111"},

            { id:12, pId:1, name:"222"},

            { id:13, pId:1, name:"333"},

        ];

        function beforeMouseDown(treeId, treeNode) {

            alert(treeNode.name + "   鼠标按下前");

            return false;                                                       //返回false,不调用按下后

        }

        function onMouseDown(event, treeId, treeNode) {

            alert(treeNode.name + "   鼠标按下后");

        }

        function beforeMouseUp(treeId, treeNode) {

            alert(treeNode.name + "   鼠标抬起来前");

            return true;                                                        //返回true,调用抬起来后

        }

        function onMouseUp(event, treeId, treeNode) {

            alert(treeNode.name + "   鼠标抬起来后");

        }

        function beforeRightClick(treeId, treeNode) {

            alert(treeNode.name + "   鼠标右键前");

            return true;

        }

        function onRightClick(event, treeId, treeNode) {

            alert(treeNode.name + "   鼠标右键后");

        }

        $(document).ready(function(){

            $.fn.zTree.init($("#sys"), setting, nodes);

        });

    </SCRIPT>

</HEAD>

<BODY>

<div class="content_wrap">

    <div class="zTreeDemoBackground left">

        <ul id="sys" class="ztree"></ul>

    </div>

</div>

</BODY>

</HTML>

javascript入门 之 ztree (八 一系列鼠标事件)的更多相关文章

  1. javascript入门 之 ztree (十 checkbox选中事件)

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...

  2. javascript入门 之 ztree (六 结点的点击和展开/折叠事件)

    1.注意: 测试点击事件时,如果要测试取消选中和追加选中,如果按住ctrl和win键无用,则需要先用鼠标左键按住,然后,在松开左键的前几毫秒按住ctrl键便可! <!DOCTYPE html&g ...

  3. javascript入门 之 zTree（十二 托拽事件（二））

    1.逻辑可能有不完善的地方,如果发现,请指出. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - d ...

  4. javascript入门 之 zTree（十一 托拽事件（一））

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - drag & drop</TITLE ...

  5. javascript入门 之 zTree（十三 移动/复制事件）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - copyNode / moveNode</T ...

  6. javascript入门 之 zTree（十四 增删查改）（一）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRe ...

  7. javascript入门 之 zTree（十四 增删查改）（二）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...

  8. javascript入门 之 ztree (九 单/复选框问题)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  9. javascript入门 之 ztree(七 结点的查询)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

随机推荐

  1. vscode使用cnpm报错

     1.在wind10搜索框里输入 Windows PowerShell 进入这个界面 2.打开Windows PowerShell 之后 输入命令:set-ExecutjionPolicy Remot ...

  2. 用 SendGrid 发送免费电子邮件

    1. 概述 SendGrid 免费账号可以限额发送 100/天封邮件,虽然比 Mailgun 的每月 10000 封的免费额度少,但胜成注册无需绑定信息卡. 集成 SendGrid 有 SMTP 和 ...

  3. PostgreSQL查询表以及字段的备注

    目录 查询所有表名称以及字段含义 查看所有表名 查看表名和备注 查看特定表名备注 查看特定表名字段 查询所有表名称以及字段含义 select c.relname 表名,cast(obj_descrip ...

  4. Vulnhub 靶场 Os-hackNos WP

    About Os-hackNos 描述 Difficulty : Easy to Intermediate Flag : 2 Flag first user And second root Learn ...

  5. [AI开发]零代码公式让你明白神经网络的输入输出

    这篇文章的标题比较奇怪,网上可能很少类似专门介绍神经网络的输入输出相关文章.在我实际工作和学习过程中,发现很有必要对神经网络的输入和输出做一个比较全面地介绍.跟之前博客一样,本篇文章不会出现相关代码或 ...

  6. Selenium系列（十） - 针对Select下拉框的操作和源码解读

    如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...

  7. 记录一些服务端术语和搭建web服务器

    菜单快捷导航 服务端常用术语 搭建web服务器和配置虚拟主机 记录一些服务端方面的常用术语 1.CS架构和BS架构 1.1 CS架构 CS(Client/Server),基于安装包类型的桌面或手机软件 ...

  8. python之路 2020/2/18

    这是第一篇随笔,记录今天的内容,我不知道什么是成功,因为我没有成功过,但是,我想成功一次! python 多练吧! 一.编程语言的分类 机器语言:01001010,高低电平,计算机懂的语言. 汇编语言 ...

  9. AssociatedObject

    在 Objective-C 中可以通过 Category 给一个现有的类添加属性,但是却不能添加实例变量,值得庆幸的是,我们可以通过 Associated Objects 来弥补这一不足. 在阅读本文 ...

  10. spring 事务源码赏析（二）

    我们在spring 事务源码赏析(一) 中分析了spring事务是如何找到目标方法,并如何将事务的逻辑织入到我们的业务逻辑中.本篇我们将会看到spring事务的核心实现: 1.事务传播机制的实现 2. ...