彩票走势图

logo GoJS教程2020
文档彩票走势图>>GoJS教程2020>>流程图控件GoJS教程：与其他HTML元素一起使用

流程图控件GoJS教程：与其他HTML元素一起使用

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新试用版

与GoJS一起使用HTML

使用HTML Data Inspector编辑零件

通常，GoJS可以通过JavaScript以编程方式移动和修改GoJS对象和图表与该页面的其余部分进行交互。如果您尚未了解与零件和模型进行编程交互的信息，请参阅GraphObject Manipulation教程。

为了帮助程序员开始使用HTML控件，我们实现了一个简单的Data Inspector Extension，它是一个基于HTML的属性编辑器，它显示并允许编辑所选零件的数据。

数据检查器主要通过"ChangedSelection" 图侦听器工作。触发后，它将填充HTML字段。编辑这些字段，然后单击鼠标左键，然后通过调用diagram.model.setDataProperty更新模型来更新所选零件。

jQuery和GoJS

GoJS不依赖jQuery，但是两者可以一起使用。该标签示例展示了如何使用GoJS jQuery的选项卡内。该HTML互动样品放在一个jQuery移动窗口的GoJS调色板里面，数据检查会修改当前选择的节点内的另一个。

jQuery通常设置$变量。如果您要从示例或文档中复制代码，请注意，我们通常会这样做： var $ = go.GraphObject.make;以便$在示例中使用可以构建GraphObject和其他GoJS对象。注意：尝试构建GoJS对象时调用jQuery 会导致异常和神秘的错误。因此，您应该在本地分配$变量或使用其他变量来构建GoJS对象。

HTML专注于图表

当浏览器元素获得焦点时，某些浏览器会尽可能地将该元素滚动到视图中。由于某些Web应用程序可能不欢迎这种行为，因此Diagram.scrollsPageOnFocus属性默认为false。但是，您可能需要将此属性设置为true才能获得标准行为。

 您可以在图表聚焦时删除轮廓。这是CSS效果，而不是GoJS效果，可以通过从Diagram div内所有HTML元素中删除CSS轮廓来将其删除： 

/* affect all elements inside myDiagramDiv */
#myDiagramDiv * {
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}

HTMLInfo类

使用HTMLInfo类可显示自定义HTML页面元素，例如上下文菜单，工具提示或HTML制成的文本编辑器。

可以设置为的实例的属性HTMLInfo包括：

  • TextEditingTool.defaultTextEditor
  • TextBlock.textEditor
  • GraphObject.contextMenu
  • Diagram.contextMenu
  • GraphObject.toolTip
  • Diagram.toolTip

用法

用自定义功能替换GoJS功能时，主要要考虑的是何时显示和隐藏自定义内容。HTMLInfo通过程序员定义并由GoJS调用的两个可设置函数来执行此操作：

  • GoInfo在应显示自定义信息时（例如，在激活ToolTip，ContextMenuTool或TextEditingTool时）调用HTMLInfo.show。
  • HTMLInfo.hide，当自定义信息完成时由GoJS调用，并且不应再显示，例如在结束这些工具时。

代替设置HTMLInfo.hide，您可以将HTMLInfo.mainElement属性设置为要显示/隐藏的主要HTML元素，HTMLInfo将通过调用以下方法自动隐藏提供的元素： 

mainElement.style.display =“ none”;

HTMLInfo示例

  • 文本编辑器：“ 自定义文本编辑器”示例和默认文本编辑器的重新实现
  • 上下文菜单：“ 自定义上下文菜单”和“ HTML灯箱上下文菜单”（对默认触摸上下文菜单的重新实现）
  • 工具提示：数据可视化工具提示
工具提示

对于工具提示，如果GraphObject.toolTip或Diagram.toolTip设置为实例HTMLInfo，GoJS呼吁HTMLInfo.show在ToolManager.showToolTip。工具提示延迟之后，GoJS将调用HTMLInfo.hide在ToolManager.hideToolTip。

以下是使用HTMLInfo.show和的示例HTMLInfo.hide，但是HTMLInfo.hide足够简单，HTMLInfo.mainElement只需将设置为工具提示div就足够了。

流程图控件GoJS教程：与其他HTML元素一起使用 

  function showToolTip(obj, diagram, tool) {
    var toolTipDIV = document.getElementById('toolTipDIV');
    var pt = diagram.lastInput.viewPoint;
    toolTipDIV.style.left = (pt.x + 10) + "px";
    toolTipDIV.style.top = (pt.y + 10) + "px";
    document.getElementById('toolTipParagraph').textContent = "Tooltip for: " + obj.data.key;
    toolTipDIV.style.display = "block";
  }

  function hideToolTip(diagram, tool) {
   var toolTipDIV = document.getElementById('toolTipDIV');
   toolTipDIV.style.display = "none";
  }

  var myToolTip = $(go.HTMLInfo, {
    show: showToolTip,
    hide: hideToolTip
    /*
      since hideToolTip is very simple,
      we could have set mainElement instead of setting hide:
    mainElement: document.getElementById('toolTipDIV')
    */
  });

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      {
        toolTip: myToolTip
      },
      $(go.Shape, "RoundedRectangle", { strokeWidth: 0},
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 8 },
        new go.Binding("text", "key"))
    );

  diagram.model = new go.GraphLinksModel(
  [
    { key: "Alpha", color: "lightblue" },
    { key: "Beta", color: "orange" },
    { key: "Gamma", color: "lightgreen" },
    { key: "Delta", color: "pink" }
  ]);


 <!-- this must be added as a sibling of the Diagram -->
  <div id="toolTipDIV" style="position: absolute; background: white; z-index: 1000; display: none;">
    <p id="toolTipParagraph">Tooltip</p>
  </div>
上下文菜单

对于上下文菜单，ContextMenuTool.showContextMenu将调用HTMLInfo.show。ContextMenuTool.hideContextMenu将调用HTMLInfo.hide。 

// Assign an HTMLInfo to the Diagram:
myDiagram.contextMenu = $(go.HTMLInfo, {
  show: showContextMenu,
  hide: hideContextMenu
});

function showContextMenu(obj, diagram, tool) {
  // Show the context menu HTML element:
  SomeDOMElement.style.display = "block";

  // Also show relevant buttons given the current state
  // and the GraphObject obj; if null, the context menu is for the whole Diagram
}

function hideContextMenu() {
  SomeDOMElement.style.display = "none";
}

function buttonClick() {
  // do some action when a context menu button is clicked

  // then:
  myDiagram.currentTool.stopTool();
}

文字编辑器

对于自定义文本编辑器，TextEditingTool.doActivate将调用HTMLInfo.show。TextEditingTool.doDeactivate将调用HTMLInfo.hide。

用作文本编辑器的HTMLInfos还必须定义HTMLInfo.valueFunction。当TextEditingTool.acceptText被调用时，GoJS将调用HTMLInfo.valueFunction和使用返回值作为TextEditingTool完成值。

下面的示例构造一个HTMLInfo，该HTMLInfo使用HTMLInfo.show并HTMLInfo.hide动态添加，填充和删除页面中的HTML元素。 

// Diagram setup. The HTMLInfo is set at the end of this code block.
diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle", { strokeWidth: 0},
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { editable: true, margin: 8, choices: ['Alpha', 'Beta', 'Gamma', 'Delta'] },
      new go.Binding("text"))
  );

diagram.model = new go.GraphLinksModel(
[
  { text: "Alpha", color: "lightblue" },
  { text: "Beta",  color: "orange" },
  { text: "Gamma", color: "lightgreen" },
  { text: "Delta", color: "pink" }
]);

// Create an HTMLInfo and dynamically create some HTML to show/hide
var customEditor = new go.HTMLInfo();
var customSelectBox = document.createElement("select");

customEditor.show = function(textBlock, diagram, tool) {
  if (!(textBlock instanceof go.TextBlock)) return;

  // Populate the select box:
  customSelectBox.innerHTML = "";

  // this sample assumes textBlock.choices is not null
  var list = textBlock.choices;
  for (var i = 0; i < list.length; i++) { var op = document.createElement("option"); op.text = list[i]; op.value = list[i]; customSelectBox.add(op, null); } // After the list is populated, set the value: customSelectBox.value = textBlock.text; // Do a few different things when a user presses a key customSelectBox.addEventListener("keydown", function(e) { var keynum = e.which; if (keynum == 13) { // Accept on Enter tool.acceptText(go.TextEditingTool.Enter); return; } else if (keynum == 9) { // Accept on Tab tool.acceptText(go.TextEditingTool.Tab); e.preventDefault(); return false; } else if (keynum === 27) { // Cancel on Esc tool.doCancel(); if (tool.diagram) tool.diagram.focus(); } }, false); var loc = textBlock.getDocumentPoint(go.Spot.TopLeft); var pos = diagram.transformDocToView(loc); customSelectBox.style.left = pos.x + "px"; customSelectBox.style.top = pos.y + "px"; customSelectBox.style.position = 'absolute'; customSelectBox.style.zIndex = 100; // place it in front of the Diagram diagram.div.appendChild(customSelectBox); } customEditor.hide = function(diagram, tool) { diagram.div.removeChild(customSelectBox); } // This is necessary for HTMLInfo instances that are used as text editors customEditor.valueFunction = function() { return customSelectBox.value; } // Set the HTMLInfo: diagram.toolManager.textEditingTool.defaultTextEditor = customEditor;

 ====================================================

想要购买GoJS正版授权的朋友可以

有关产品的最新消息和最新资讯，欢迎扫描关注下方微信公众号

扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP