jointjs
Version:
JavaScript diagramming library
70 lines (48 loc) • 3.12 kB
HTML
<html>
<head>
<link rel="canonical" href="http://www.jointjs.com/" />
<meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
<meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/tutorial.css" />
<link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">
<!-- Dependencies: -->
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>
<script src="../node_modules/backbone/backbone.js"></script>
<link rel="stylesheet" type="text/css" href="../build/joint.min.css" />
<script type="text/javascript" src="../build/joint.min.js"></script>
<title>JointJS - JavaScript diagramming library - Getting started.</title>
</head>
<body class="language-javascript tutorial-page">
<script>
SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function (toElement) {
return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
};
</script>
<div id="hyperlinks" class="tutorial">
<h2>Custom elements with hyperlinks</h2>
<p>It is possible to define <a href="custom-elements.html">custom JointJS elements</a> with hyperlinks
pointing to external sites - by including the <code><a></code>
<a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a" target="_blank">SVG element</a>
in the <a href="custom-elements.html#markup">markup</a> of a custom element.
The navigation path is then specified in individual elements' attributes of the custom type.</p>
<p>The two most important
<a href="https://www.w3schools.com/xml/xml_xlink.asp" target="_blank">XLink</a> attributes in this
context are the following:</p>
<ul>
<li><code>xlink:href</code> - set the target resource URL.</li>
<li><code>xlink:show</code> - how should the linked content be presented?
Possible values are <code>'replace'</code> (show in current window; default) and <code>'new'</code>
(show in new window).</li>
</ul>
<div id="paper-hyperlinks"></div>
<pre data-src="js/hyperlinks.js"></pre>
<p>JointJS source code: <a href="js/hyperlinks.js" target="_blank">hyperlinks.js</a></p>
</div><!--end tutorial-->
<script src="../node_modules/prismjs/prism.js"></script>
<script src="js/hyperlinks.js"></script>
</body>
</html>