Getting started

The connector's labels

<html>
  <head>
    <script type="text/javascript" src="../js-graph-it.js"></script>
    <link rel="stylesheet" type="text/css" href="../js-graph-it.css">
    <style>
      .block { position: absolute; }
    </style>
  </head>
  <body onload="initPageObjects();">
    <div class="canvas" id="mainCanvas"
      style="width: 350px; height: 250px; border: 1px solid black;">
      <h1 class="block draggable" id="h1_block"
        style="left: 10px; top: 10px;">
          h1 block
      </h1>
      <h2 class="block draggable" id="h2_block"
        style="left: 200px; top: 100px;">
        h2 block
      </h2>
      <div class="connector h1_block h2_block">
        <img src="arrow.gif" class="connector-start">
        <img src="arrow.gif" class="connector-end">
        <label class="source-label">start</label>
        <label class="middle-label">middle</label>
        <label class="destination-label">end</label>
      </div>
    </div>
  </body>
</html>
The task now is to add labels on the connector. It is possible to add 3 labels on each connector:
  • the source label, anchored near the source block
  • the middle label, anchored in the middle of the connector
  • the destination label, anchored near the destination block
A connector label can be any html element nested in the connector element. In this sample we'll use three label elements (just because of the element's name).
To declare that an element must be used as the source label, we add the source-label css class to it.
To declare that an element must be used as the middle label, we add the middle-label css class to it.
Finally, to declare that an element must be used as the destination label, we use the destination-label css class.
« previous
next »