feat: 后端全量更新 - 含所有本次需求
- Contract.php: 返回合约账户余额(balance_contract) - My.php: 地址管理增加BTC/ETH - AppContract.php: 一键平仓(closeall) - AppProxy.php: 代理专属注册链接 + 分级权限(L1/L2) - site.php: 手续费减半(0.018→0.009) - agent_permission_setup.sql: 代理权限SQL - crypto_news_crawler.py: 新闻自动采集脚本
This commit is contained in:
li
Executable
+156
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>GoJS Tooltips -- Northwoods Software</title>
|
||||
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
|
||||
<script src="../release/go.js"></script>
|
||||
<script src="goIntro.js"></script>
|
||||
</head>
|
||||
<body onload="goIntro()">
|
||||
<div id="container" class="container-fluid">
|
||||
<div id="content">
|
||||
|
||||
<h1>ToolTips</h1>
|
||||
<p>
|
||||
<b>GoJS</b> provides a way to create customized tooltips for any object or for the diagram background.
|
||||
</p>
|
||||
<p>
|
||||
A tooltip is an <a>Adornment</a> that is shown when the mouse hovers over an object that has its <a>GraphObject.toolTip</a> set.
|
||||
The tooltip part is bound to the same data as the part itself.
|
||||
</p>
|
||||
<p>
|
||||
See samples that make use of tooltips in the <a href="../samples/index.html#tooltips">samples index</a>.
|
||||
</p>
|
||||
<p>
|
||||
It is typical to implement a tooltip as a "ToolTip" Panel holding a <a>TextBlock</a> or a Panel of TextBlocks and other objects.
|
||||
Each "ToolTip" is just an "Auto" Panel <a>Adornment</a> that is shadowed, and where the border is a rectangular <a>Shape</a> with a light gray fill.
|
||||
However you can implement the tooltip as any arbitrarily complicated Adornment.
|
||||
</p>
|
||||
<p>
|
||||
You can see how the "ToolTip" builder is defined at
|
||||
<a href="../extensions/Buttons.js">Buttons.js</a>.
|
||||
</p>
|
||||
<p>
|
||||
In this example each <a>Node</a> has its <a>GraphObject.toolTip</a> property set to a Part that shows the
|
||||
data.color property via a normal data binding.
|
||||
The diagram gets its own tooltip by setting <a>Diagram.toolTip</a>.
|
||||
</p>
|
||||
<pre class="lang-js" id="tooltips">
|
||||
diagram.nodeTemplate =
|
||||
$(go.Node, "Auto",
|
||||
$(go.Shape, "RoundedRectangle",
|
||||
{ fill: "white" },
|
||||
new go.Binding("fill", "color")),
|
||||
$(go.TextBlock, { margin: 5 },
|
||||
new go.Binding("text", "key")),
|
||||
{
|
||||
toolTip: // define a tooltip for each node that displays the color as text
|
||||
$("ToolTip",
|
||||
$(go.TextBlock, { margin: 4 },
|
||||
new go.Binding("text", "color"))
|
||||
) // end of Adornment
|
||||
}
|
||||
);
|
||||
|
||||
// a function that produces the content of the diagram tooltip
|
||||
function diagramInfo(model) {
|
||||
return "Model:\n" + model.nodeDataArray.length + " nodes, " +
|
||||
model.linkDataArray.length + " links";
|
||||
}
|
||||
|
||||
// provide a tooltip for the background of the Diagram, when not over any Part
|
||||
diagram.toolTip =
|
||||
$("ToolTip",
|
||||
$(go.TextBlock, { margin: 4 },
|
||||
// use a converter to display information about the diagram model
|
||||
new go.Binding("text", "", diagramInfo))
|
||||
);
|
||||
|
||||
var nodeDataArray = [
|
||||
{ key: "Alpha", color: "lightblue" },
|
||||
{ key: "Beta", color: "pink" }
|
||||
];
|
||||
var linkDataArray = [
|
||||
{ from: "Alpha", to: "Beta" }
|
||||
];
|
||||
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
|
||||
</pre>
|
||||
<script>goCode("tooltips", 250, 100)</script>
|
||||
<p>
|
||||
Try pausing the mouse over each of the nodes or in the background of the diagram.
|
||||
If you copy some parts, you will see that the tooltip for the diagram displays newer information about the diagram.
|
||||
</p>
|
||||
<p>
|
||||
You can change how long for the mouse has to wait motionless before a tooltip appears by setting <a>ToolManager.hoverDelay</a>.
|
||||
For example, when initializing a <a>Diagram</a>, <code>"toolManager.hoverDelay": 600</code> changes the delay to be 6/10ths of one second.
|
||||
</p>
|
||||
<p>
|
||||
You can change how long the tooltip remains visible by setting <a>ToolManager.toolTipDuration</a>.
|
||||
For example, <code>"toolManager.toolTipDuration": 10000</code> changes the visible time to 10 seconds.
|
||||
</p>
|
||||
|
||||
<h3 id="Positioning">Positioning</h3>
|
||||
<p>
|
||||
There are two ways to customize the positioning of the tooltip relative to the adorned GraphObject.
|
||||
One way is to override <a>ToolManager.positionToolTip</a>.
|
||||
Another way is to have the tooltip <a>Adornment</a> include a <a>Placeholder</a>.
|
||||
The Placeholder is positioned to have the same size and position as the adorned object.
|
||||
When creating tooltips with Placeholders, don't use the predefined "ToolTip" builder as it will introduce an extra shape typically used
|
||||
as the border for the "Auto" Panel.
|
||||
</p>
|
||||
<pre class="lang-js" id="tooltipsplaceholder">
|
||||
// this is a normal Node template that also has a toolTip defined for it
|
||||
diagram.nodeTemplate =
|
||||
$(go.Node, "Auto",
|
||||
$(go.Shape, "RoundedRectangle",
|
||||
{ fill: "white" },
|
||||
new go.Binding("fill", "color")),
|
||||
$(go.TextBlock, { margin: 5 },
|
||||
new go.Binding("text", "key")),
|
||||
{
|
||||
toolTip: // define a tooltip for each node
|
||||
$(go.Adornment, "Spot", // that has several labels around it
|
||||
{ background: "transparent" }, // avoid hiding tooltip when mouse moves
|
||||
$(go.Placeholder, { padding: 5 }),
|
||||
$(go.TextBlock,
|
||||
{ alignment: go.Spot.Top, alignmentFocus: go.Spot.Bottom, stroke: "red" },
|
||||
new go.Binding("text", "key", function(s) { return "key: " + s; })),
|
||||
$(go.TextBlock, "Bottom",
|
||||
{ alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top, stroke: "red" },
|
||||
new go.Binding("text", "color", function(s) { return "color: " + s; }))
|
||||
) // end Adornment
|
||||
}
|
||||
);
|
||||
|
||||
var nodeDataArray = [
|
||||
{ key: "Alpha", color: "lightyellow" },
|
||||
{ key: "Beta", color: "orange" }
|
||||
];
|
||||
var linkDataArray = [
|
||||
{ from: "Alpha", to: "Beta" }
|
||||
];
|
||||
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
|
||||
</pre>
|
||||
<script>goCode("tooltipsplaceholder", 350, 200)</script>
|
||||
<p>
|
||||
Note how the <a>Adornment</a> implementing the tooltip uses a "transparent" background
|
||||
so that the tooltip is not automatically removed when the mouse moves.
|
||||
</p>
|
||||
|
||||
<h2 id="HTMLTooltips">HTML Tooltips</h2>
|
||||
<p>
|
||||
It is possible to define custom tooltips using HTML instead of <a>Adornment</a>s using the <a>HTMLInfo</a> class.
|
||||
The <a href="../samples/dataVisualization.html">Data Visualization sample</a> shows such tooltips.
|
||||
See <a href="HTMLInteraction.html">HTML Interaction</a> for more discussion.
|
||||
</p>
|
||||
<p>
|
||||
HTML tooltips require more effort to implement than using the default <b>GoJS</b> "ToolTip" and GraphObjects.
|
||||
However you would have the full power of HTML/CSS/JavaScript to show whatever you want.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user