标签：des style blog http ar io color os sp
关键代码：
/// <reference path="zTree_v3-master/js/jquery-1.4.4.min.js" /> /// <reference path="zTree_v3-master/js/jquery.zTree.all-3.5.js" /> (function (window) { yzTreeUtils = { addMenu: function (zTreeId, menuId) { /// <summary> /// 增加右键菜单 /// </summary> /// <param name="_zTreeId">_zTreeID</param> /// <param name="menuId">右键菜单ID</param> var _zTree = $.fn.zTree.getZTreeObj(zTreeId); var _rMenu = $("#" + menuId); if (_zTree && _rMenu) { _rMenu.css({ "position": "absolute", "visibility": "hidden", "top": 0, "background-color": "#555", "text-align": "left", "padding": "2px" }); _rMenu.find(‘ul‘).css({ "margin": "1px 0", "padding": "0 5px", "cursor": "pointer", "background-color": " #DFDFDF", "list-style": "none outside none" }); _zTree.setting.callback.onRightClick = function (event, treeId, treeNode) { if (treeNode && !treeNode.noR) { _zTree.selectNode(treeNode); _rMenu.find(‘ul‘).show(); var x = event.clientX, y = event.clientY; _rMenu.css({ "top": y + "px", "left": x + "px", "visibility": "visible" }); } } $("body").bind("mousedown", function (event) { if (!(event.target.id == menuId || $(event.target).parents("#" + menuId).length > 0)) { _rMenu.css({ "visibility": "hidden" }); } }); } } } window.yzTreeUtils = yzTreeUtils; })(window);
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link href="ztree_v3-master/css/ztreestyle/ztreestyle.css" rel="stylesheet" /> <link href="ztree_v3-master/css/demo.css" rel="stylesheet" /> <script src="ztree_v3-master/js/jquery-1.4.4.min.js"></script> <script src="ztree_v3-master/js/jquery.ztree.core-3.5.js"></script> <script src="yzTreeUtils.js"></script> <script> var setting = { view: { dblClickExpand: false }, check: { enable: true } }; var zNodes = [ { id: 1, name: "无右键菜单 1", open: true, noR: true, children: [ { id: 11, name: "节点 1-1", noR: true }, { id: 12, name: "节点 1-2", noR: true } ] }, { id: 2, name: "右键操作 2", open: true, children: [ { id: 21, name: "节点 2-1" }, { id: 22, name: "节点 2-2" }, { id: 23, name: "节点 2-3" }, { id: 24, name: "节点 2-4" } ] }, { id: 3, name: "右键操作 3", open: true, children: [ { id: 31, name: "节点 3-1" }, { id: 32, name: "节点 3-2" }, { id: 33, name: "节点 3-3" }, { id: 34, name: "节点 3-4" } ] } ]; $(document).ready(function () { $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); function addMenu() { yzTreeUtils.addMenu(‘treeDemo‘, ‘rMenu‘); } </script> <title></title> </head> <body> <div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> </div> <br /> <input id="Button1" type="button" value="addMenu" onclick="addMenu()" /> <div id="rMenu"> <ul> <li id="m_add" onclick="addTreeNode();">增加节点</li> <li id="m_del" onclick="removeTreeNode();">删除节点</li> <li id="m_check" onclick="checkTreeNode(true);">Check节点</li> <li id="m_unCheck" onclick="checkTreeNode(false);">unCheck节点</li> <li id="m_reset" onclick="resetTree();">恢复zTree</li> </ul> </div> </body> </html>
注意黄色背景代码，效果：
希望有所帮助！谢谢！
标签：des style blog http ar io color os sp
原文地址：http://www.cnblogs.com/Yan-Zhiwei/p/4172840.html
