li
1b24994e74
- 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: 新闻自动采集脚本
123 lines
4.0 KiB
HTML
Executable File
123 lines
4.0 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Resizing Diagrams -- 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>Resizing Diagrams</h1>
|
|
<p>
|
|
Sometimes it may be necessary to resize the div that contains a GoJS Diagram.
|
|
In older browsers or in Internet Explorer, GoJS does not listen or attempt to detect changes in the div's size,
|
|
so you must manually tell each Diagram when you perform an action that resizes its containing div.
|
|
</p>
|
|
|
|
<h2 id="UsingRequestUpdateToResizeDiv">Using <a>Diagram.requestUpdate</a> to resize a Div</h2>
|
|
<p>
|
|
The following example has a button that enlarges the Diagram's div. When it is clicked,
|
|
the div is visibly resized but in older browsers the Diagram remains the same size.
|
|
</p>
|
|
|
|
<pre class="lang-js" id="first">
|
|
// A minimal Diagram
|
|
diagram.nodeTemplate =
|
|
$(go.Node, "Auto",
|
|
$(go.Shape, "RoundedRectangle",
|
|
new go.Binding("fill", "color")),
|
|
$(go.TextBlock,
|
|
{ margin: 3 }, // some room around the text
|
|
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" }
|
|
],
|
|
[
|
|
{ from: "Alpha", to: "Beta" },
|
|
{ from: "Alpha", to: "Gamma" },
|
|
{ from: "Gamma", to: "Delta" },
|
|
{ from: "Delta", to: "Alpha" }
|
|
]);
|
|
|
|
// Resize the diagram with this button
|
|
var button1 = document.getElementById('button1');
|
|
button1.addEventListener('click', function() {
|
|
var div = diagram.div;
|
|
div.style.width = '200px';
|
|
});
|
|
</pre>
|
|
<div id="dia1"></div>
|
|
<p>This button won't work in Internet Explorer: <button id="button1">Expand div</button></p>
|
|
<script>goCode("first", 100, 110, go.Diagram, "dia1")</script>
|
|
|
|
<p>
|
|
Typically we will want the Diagram to resize to its div at the same time that the div resizes.
|
|
To do this we add a call to <a>Diagram.requestUpdate</a> <em>after</em> we have resized the div.
|
|
This checks to see if the Diagram's div has changed size, and if so, redraws the diagram at the appropriate new dimensions.
|
|
</p>
|
|
<p>
|
|
Below is nearly identical code, except that a call to <a>Diagram.requestUpdate</a> has been added.
|
|
</p>
|
|
|
|
<pre class="lang-js" id="second">
|
|
// A minimal Diagram
|
|
diagram.nodeTemplate =
|
|
$(go.Node, "Auto",
|
|
$(go.Shape, "RoundedRectangle",
|
|
new go.Binding("fill", "color")),
|
|
$(go.TextBlock,
|
|
{ margin: 3 }, // some room around the text
|
|
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" }
|
|
],
|
|
[
|
|
{ from: "Alpha", to: "Beta" },
|
|
{ from: "Alpha", to: "Gamma" },
|
|
{ from: "Gamma", to: "Delta" },
|
|
{ from: "Delta", to: "Alpha" }
|
|
]);
|
|
|
|
// Resize the diagram with this button
|
|
var button2 = document.getElementById('button2');
|
|
button2.addEventListener('click', function() {
|
|
var div = diagram.div;
|
|
div.style.width = '200px';
|
|
diagram.requestUpdate(); // Needed!
|
|
});
|
|
</pre>
|
|
<div id="dia2"></div>
|
|
<button id="button2">Expand div</button>
|
|
<script>goCode("second", 100, 110, go.Diagram, "dia2")</script>
|
|
|
|
<p>See also the <a href="../samples/tabs.html">jQuery Tabs sample</a>.</p>
|
|
|
|
<p>
|
|
In recent browsers the calls to <a>Diagram.requestUpdate</a> will not be necessary,
|
|
but they will not cause any harm.
|
|
Still, if you know that all of your users will be using recent browsers
|
|
and if you are using GoJS version 2.1.26 or later, you do not need to make this call.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|