定制jstree上的右键菜单和图标

Question

我想更改默认上下文菜单并自定义创建功能，包括子菜单：创建服务和创建应用程序。然后我还想将图标与服务和应用程序子菜单关联起来。

我在stackoverflow上搜索了可用的解决方案，并进行了修改以满足我的要求。但它不起作用。 到目前为止，当我单击子菜单时，会显示警报框。但是创建节点不起作用。图标也没有显示。

请问有人能告诉我如何解决这个问题吗？

  "contextmenu" : {
    items : { b
        "create" : {
            "separator_before"  : false,
            "separator_after"   : true,
            "label"             : "Create",
            "action"            : false,
            "submenu" :{
                "create_service" : {
                    "seperator_before" : false,
                    "seperator_after" : false,
                    "label" : "service",
        "icon": "service.png",
                    action : function (obj) {
            alert("creating service");
                            this.create(obj, "last", {"attr" : {"rel" : "service"}});
                    }
                },
                "create_application" : {
                    "seperator_before" : false,
                    "seperator_after" : false,
                    "label" : "app",
        "icon": "app.png",
                    action : function (obj) { 
            alert("creating app");                              
                            this.create(obj, "last", {"attr" : { "rel" : "application"}});
                    }
                }
            }
        }
    }
  }

- vrao

Answer 1

检查第二行，删除“b”：

items : { b

作为一个例子，这是我的上下文菜单的一部分代码（也许这可以帮助你）：

"contextmenu": {
    "items": {
        "create" : false,
        "ccp" : false,
        "rename" : false,
        "remove" : {
            "label" : " Delete",
            "icon" : "/images/icon/cross.png"
        }
    }
},

- Wietse

---

这是在“icon”后面的相对路径吗？如果是，参考路径是什么？如果它是绝对路径，在动态上下文中如何获取绝对路径？ - frhd

我正在使用模板文件创建的绝对路径。我觉得你可以使用相对路径，然后从当前 URL 引用它，因为它只是“像其他任何图片一样”。 - Wietse

感谢您回到这个问题……您是否知道是否可以从jstree主题引用图标？由于我的资产链接是动态的，我无法硬编码任何图像文件。 - frhd

我尝试了这里使用的方法，但它似乎不起作用，我不知道为什么：https://code.google.com/p/jstree/issues/detail?id=681 - frhd

示例代码来自2010年，似乎已经过时了...请查看此处的手册; http://www.jstree.com/api/#/?f=$.jstree.defaults.contextmenu.items ":icon - a string, can be a path to an icon or a className, if using an image that is in the current directory use a ./ prefix, otherwise it will be detected as a class". 因此，您可以使用（css）类或图像路径。 - Wietse

Answer 2

请使用完整路径来引用图标图片，如下所示：

icon: "/Content/images/deleteIcon.gif"

- Anoop