jsSimpleConnect - Basic examples

Requirements

In order to run the examples, the JavaScript libraries of jqSimpleConnect and jQuery must be included in the <head> of the HTML file:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jqSimpleConnect-1.0.js"></script>

Demo 1

Code

<div style="position:relative; height: 80px;">
    <div id="div_a" style="position:absolute; top:5px; left:5px; border:1px solid black; background-color:white; padding:5px;">Div A</div>
    <div id="div_b" style="position:absolute; top:50px; left:150px; border:1px solid black; background-color:white; padding:5px;">Div B</div>
    <div id="div_c" style="position:absolute; top:25px; left:250px; border:1px solid black; background-color:white; padding:5px;">Div C</div>
    <div id="div_d" style="position:absolute; top:25px; left:400px; border:1px solid black; background-color:white; padding:5px;">Div D</div>
</div>
<script type="text/javascript">
    jqSimpleConnect.connect("#div_a", "#div_b", {radius: 8, color: 'green'});
    jqSimpleConnect.connect("#div_c", "#div_d", {radius: 10, color: '#0000ff'});
</script>

Result

Div A

Div B

Div C

Div D

Demo 2

Code

<div style="position:relative; height: 110px;">
    <div id="div_e" style="position:absolute; top:5px; left:5px; border:1px solid black; background-color:white; padding:5px;">Div E</div>
    <div id="div_f" style="position:absolute; top:75px; left:150px; border:1px solid black; background-color:white; padding:5px;">Div F</div>
    <div id="div_g" style="position:absolute; top:5px; left:250px; border:1px solid black; background-color:white; padding:5px;">Div G</div>
    <div id="div_h" style="position:absolute; top:75px; left:400px; border:1px solid black; background-color:white; padding:5px;">Div H</div>
</div>
<script type="text/javascript">
    jqSimpleConnect.connect("#div_e", "#div_f", {radius: 8, color: 'darkcyan', anchorA: 'horizonal', anchorB: 'vertical'});
    jqSimpleConnect.connect("#div_g", "#div_h", {radius: 8, color: 'darkcyan', anchorA: 'vertical', anchorB: 'horizontal'});
</script>

Result

Div E

Div F

Div G

Div H

Demo 3

Code

<div style="position:relative; height: 110px;">
    <div id="div_i" style="position:absolute; top:5px; left:5px; border:1px solid black; background-color:white; padding:5px;">Div I</div>
    <div id="div_j" style="position:absolute; top:75px; left:150px; border:1px solid black; background-color:white; padding:5px;">Div J</div>
    <div id="div_k" style="position:absolute; top:5px; left:250px; border:1px solid black; background-color:white; padding:5px;">Div K</div>
    <div id="div_l" style="position:absolute; top:75px; left:400px; border:1px solid black; background-color:white; padding:5px;">Div L</div>
</div>
<script type="text/javascript">
    jqSimpleConnect.connect("#div_i", "#div_j", {radius: 8, color: 'darkviolet', anchorA: 'horizonal', anchorB: 'horizonal', roundedCorners: true});
    jqSimpleConnect.connect("#div_k", "#div_l", {radius: 8, color: 'darkviolet', anchorA: 'vertical', anchorB: 'vertical', roundedCorners: true});
</script>

Result

Div I

Div J

Div K

Div L