Подключение скрипта

jsPlumb корректно работает во всех современных браузерах, а именно:

• IE 6-8 на Windows XP;
• Firefox 3.5.8+ на Windows XP;
• Chrome;
• Safari 4 (Windows XP и Mac OS X);
• Opera 10.5 на Windows XP.

Для работы скрипта необходимы библиотеки jquery, jquery.ui.core и explorercanvas:

<script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.jsPlumb-1.0.1-min.js "></script>

Грузить их вы можете и со своего сервера — это как вам удобнее.

Свойства

Скрипт вызывается предельно просто — у него всего один обязательный параметр. Чтобы провести линию от объекта с id="block1" до элемента с id="sblock1", нужно написать вот так:

$("#block1").plumb({target: 'sblock2'});

В итоге вы получаете толстую красную линию между двумя объектами. Теперь давайте посмотрим, как можно настроить эту связь. Итак, у плагина есть следующие параметры.

Тип линии соединения (connector)

По умолчанию скрипт соединяет объекты кривыми Безье, но можно соединить и прямыми линиями:

connector: new jsPlumb.Connectors.Straight()

Место крипления линий (anchors)

У линии есть два конца, которыми она крепится к блокам. Для каждого из них можно задать положение относительно этого блока. Есть стандартные места крепления (jsPlumb.Anchors.BottomCenter, jsPlumb.Anchors.BottomLeft, jsPlumb.Anchors.BottomRight, jsPlumb.Anchors.TopCenter, jsPlumb.Anchors.TopLeft, jsPlumb.Anchors.TopRight, jsPlumb.Anchors.RightMiddle, jsPlumb.Anchors.LeftMiddle, jsPlumb.Anchors.Center) и собственные, у которых можно задавать процентное положение от верхнего левого угла объекта и направление линий:

anchors: [jsPlumb.Anchors.BottomCenter, jsPlumb.makeAnchor(0.75, 0, 0, -1)]

Стиль линии (paintStyle)

У линии можно задать ширины (lineWidth), цвет заливки (strokeStyle) или градиент (gradient). Вот так делается линия шириной 5 пикселов, начинающаяся с черного цвета, к середине перетекающая в красный и потом в белый:

paintStyle: {
    gradient: {
        stops: [[0, '#000'], [0.5, '#600'] [1, '#FFF']]
    },
    lineWidth: 5
}

Стиль крепления (endpoint, endpoints, endPointStyle и endPointStyles)

Крепление может быть квадратное (endpoint: new jsPlumb.Endpoints.Rectangle()) и круглое (по умолчанию). Для него можно задать цвет, размер и градиент. Вот так, например, получается первое квадратное крепление серого цвета 10 на 20, а второе — круглое радиусом 6 пикселов:

endpoints: [new jsPlumb.Endpoints.Rectangle(), new jsPlumb.Endpoints.Dot()],
endpointStyles: [{
    gradient: { stops: [[0, '#CCC']] },
    width: 10,
    height: 20
}, {
    gradient: { stops: [[0, '#007DDB']] },
    radius: 6
}]

Ну вот, основные свойства мы рассмотрели. Остальные вы можете посмотреть в документации. Теперье переходим к методам.

Методы

Отключение связей

Для отключения связей между элементами существует несколько методов:

$("#block1").detach("sblock2"); // отключает связь между блоками block1 и sblock2
$("#block1").detachAll(); // отключает все связи блока block1
jsPlumb.detachEverything(); // отключает вообще все связи на странице

Скрытие и отображение связей

Связи элементов можно так же скрывать или показывать в нужный момент:

jsPlumb.hide("block1"); // скрывает все связи блока block1
jsPlumb.show("block1"); // показывает все связи блока block1
jsPlumb.toggle("block1"); // показывает/скрывает все связи блока block1

Перерисовка связей

При необходимости связи отдельного блок (jsPlumb.repaint()) или все связи на страницы (jsPlumb.repaintEverything()) можно перерисовать.

Пример работы

В дополнение к демонстрации на сайте автора, я сделал свой пример:

Смотреть демо

Если есть вопросы, пишите. Пока!