Question

我正在使用

http://www.gojs.net/latest/samples/flowchart.html

现在我必须在GoJs流程图中集成上下文菜单，如下面的链接

所示

http://www.gojs.net/latest/samples/customContextMenu.html

请帮我怎么做......

Answer 1

在示例代码中，我在流程图上创建了一个上下文菜单，上下文菜单将显示两个菜单项＆＃34; Add Notes＆＃34;和＆＃34;编辑笔记＆＃34;。它将打开一个kendo窗口来添加或编辑笔记。

首先在html文件中创建一个div。

<div id="contextMenu">
   <ul>
      <li><a href="#" id="addNotes">Add Notes</a></li>    
      <li><a href="#" id="EditNotes" onclick="editNotes()">Edit Notes</a></li>
   </ul>
</div>    

<div id="window">
   <div class="text">
      <textarea id="myTelText" style="width: 500px; height: 300px;"></textarea> 
      <button class="k-button" id="Save" onclick="SetRemark()">Save</button>
   </div>
</div>

您可能希望将某种风格与其相关联

<style>
    #contextMenu{z-index:300;position:absolute;left:5px;border:1px solid #444;background-color:#F5F5F5;display:none;box-shadow:0 0 10px rgba(0,0,0,.4);font-size:12px;font-family:sans-serif;font-weight:700}
    #contextMenu ul{list-style:none;top:0;left:0;margin:0;padding:0}
    #contextMenu li{position:relative;min-width:60px}
    #contextMenu a{color:#444;display:inline-block;padding:6px;text-decoration:none}
    #contextMenu li:hover{background:#444}
    #contextMenu li:hover a{color:#EEE}
</style>

在html页面中包含必需的go js文件。现在在你的页面js文件中写下这段代码。

var contextMenu;
$(function() {
    initTelerikPopUp();
});

//-- initialize context menu and kendo popup.
function initTelerikPopUp() {
  var window = $("#window"),
  contextMenu = $("#contextMenu"),
      undo = $("#addNotes")
      .bind("click", function() {
          window.data("kendoWindow").open();
          contextMenu.hide();
      });

  function onClose(){

  }

  // initialize popup window      
  if (!window.data("kendoWindow")) {
      window.kendoWindow({
          visible: false,
          width: "600px",
          title: "Remarks",
          actions: [
              "Pin",
              "Minimize",
              "Maximize",
              "Close"
          ],

          close: onClose
      });
  }
}   

  myDiagram.contextMenu = $(go.Adornment);
    // This is the actual HTML context menu:
    var cxElement = document.getElementById("contextMenu");

    // We don't want the div acting as a context menu to have a (browser) context menu!
    cxElement.addEventListener("contextmenu", function (e) { e.preventDefault(); return false; }, false);
    cxElement.addEventListener("blur", function (e) { cxMenu.stopTool(); }, false);

    // Override the ContextMenuTool.showContextMenu and hideContextMenu methods
    // in order to modify the HTML appropriately.
    var cxTool = myDiagram.toolManager.contextMenuTool;

    // This is the override of ContextMenuTool.showContextMenu:
    // This does not not need to call the base method.
    cxTool.showContextMenu = function (contextmenu, obj) {        
        // Hide any other existing context menu
        if (contextmenu !== this.currentContextMenu) {
            this.hideContextMenu();
        }

        cxElement.style.display = "block";

        // Remember that there is now a context menu showing
        this.currentContextMenu = contextmenu;
    }

    // This is the corresponding override of ContextMenuTool.hideContextMenu:
    // This does not not need to call the base method.
    cxTool.hideContextMenu = function () {
        if (this.currentContextMenu === null) return;
        cxElement.style.display = "none";
        this.currentContextMenu = null;
    }

// this function will call on editnotes button click    
function editNotes() {
   // clicked on edit notes context menu item
}

如何将上下文菜单添加到GoJs中的流程图

1 个答案: