<!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 (八 一系列鼠标事件)
猜你喜欢
转载自blog.csdn.net/ITlanyue/article/details/81583392
今日推荐
周排行