编辑 jquery-connections - Javascript

简介

jquery-connections 是一款基于 jQuery 的插件，用于创建连接（Connection）风格的 UI 界面。

特性

• 简单易用，只需要几行代码即可创建连接风格的 UI 界面；
• 可定制化，支持自定义节点样式、连线样式等；
• 兼容性好，支持多种浏览器。

安装

通过 npm 安装：

npm install jquery-connections

或者通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/jquery-connections@1.0.0/dist/jquery.connections.min.js"></script>

使用

HTML

<div id="connections-container">
  <div class="connection-node">Node 1</div>
  <div class="connection-node">Node 2</div>
  <div class="connection-node">Node 3</div>
  <div class="connection-node">Node 4</div>
</div>

CSS

#connections-container {
  position: relative;
}
.connection-node {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  cursor: move;
}

JavaScript

$('#connections-container .connection-node').connections({
  to: '.connection-node',
  class: 'connection-line'
});

参数

• to: String，指定要连接的节点的 CSS 选择器；
• class: String，指定连线的 CSS 类名；
• scope: String，指定作用域；
• validateStart: Function，指定起始节点验证的回调函数；
• validateEnd: Function，指定结束节点验证的回调函数；
• canDrag: Function，指定节点是否可拖拽的判断函数；
• onConnection: Function，指定连接成功的回调函数；
• onDisconnection: Function，指定断开连接的回调函数。

更多参数请参考官方文档：https://github.com/cubbit/jquery-connections

示例

在线演示：https://jsfiddle.net/cnry2e5t/

总结

jquery-connections 是一款非常实用的 UI 插件，可以帮助快速创建连接风格的 UI 界面，具有良好的兼容性和可扩展性。