jQueryに基づく接続実装方法の簡単な分析-フロントエンドQ&A-php.cn

jQueryに基づく接続実装方法の簡単な分析

PHPz

リリース： 2023-04-06 10:51:23

オリジナル

867 人が閲覧しました

Web 開発では、ユーザーエクスペリエンスを向上させるために、ユーザーの操作をガイドしたり、データを表示したりするために、インタラクティブなエフェクトを使用する必要がよくあります。これに基づいて、接続エフェクトを使用してコンテンツをより良く表示したいと考えています。この記事では、接続効果を迅速に実現するための jQuery ベースの接続実装方法を紹介します。

1. 準備

始める前に、jQuery と必要なプラグイン jquery.draw.js を導入する必要があります。 HTML ファイルでは、次のコードを使用してこれを導入できます。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-draw/jquery.draw.js"></script>

ログイン後にコピー

さらに、ページのいくつかの要素を定義する必要もあります。これらの要素は通常、接続する必要があるノードです。この記事では、以下に示すような単純な HTML レイアウトを使用します。

<div class="container">
  <div class="node" data-node-id="1"></div>
  <div class="node" data-node-id="2"></div>
  <<div class="node" data-node-id="3"></div>
  <div class="node" data-node-id="4"></div>
</div>

ログイン後にコピー

このレイアウトには、接続する必要があるノードである「node」という名前の 4 つの DIV 要素が含まれています。各ノードには、ノードの ID を識別するために使用されるカスタム属性「data-node-id」があり、その値には任意の文字列または数値を指定できます。

2. 線を描く

ノード間に線を描く前に、最初にいくつかのスタイルを設定する必要があります。 CSS ファイルに次のコードを追加できます:

.node {
  width: 50px;
  height: 50px;
  border: 2px solid #ccc;
  background-color: #fff;
  border-radius: 100%;
  position: absolute;
}

.container {
  height:500px;
}

ログイン後にコピー

次に、線描画効果を実現するための jQuery コードを記述する必要があります。この記事では、jQuery.draw プラグインが提供する API を使用して線画効果を実現します。 JavaScript ファイルに、次のコードを追加できます。

$(function () {
  var nodes = $('.node');

  nodes.draggable({
    containment: ".container",
    start: function(e, ui) {
        ui.helper.css('z-index', 1);
    },
    stop: function(e, ui) {
        ui.helper.css('z-index', 0);
    }
  });

  var connections = [];

  function updateConnection(connection, endX, endY) {
    connection.draw('update', {
      end: [endX, endY]
    });
  }

  function createConnection(startNode, endNode) {
    var connection = $('.container').drawLine({
      strokeStyle: '#ccc',
      strokeWidth: 2,
      rounded: true,
      start: [startNode.position().left + startNode.width() / 2, startNode.position().top + startNode.height() / 2],
      end: [endNode.position().left + endNode.width() / 2, endNode.position().top + endNode.height() / 2]
    });
    connections.push({
      startNode: startNode,
      endNode: endNode,
      connection: connection
    });
  }

  function removeConnection(connectionIndex) {
    connections[connectionIndex].connection.draw('destroy');
    connections.splice(connectionIndex, 1);
  }

  nodes.click(function () {
    var startNode = $(this);

    nodes.not(startNode).click(function () {
      var endNode = $(this);
      var existingConnectionIndex = connections.findIndex(function (connection) {
        return connection.startNode.is(startNode) && connection.endNode.is(endNode);
      });

      if (existingConnectionIndex === -1) {
        createConnection(startNode, endNode);
      } else {
        removeConnection(existingConnectionIndex);
      }
    });
  });
});

ログイン後にコピー

上記のコードは、ドラッグ可能なノード、クリック可能な接続、作成と削除などの操作を実装し、マウスを処理するためのいくつかのイベントリスニング関数も追加します。接続線オブジェクトの作成と削除を制御するイベント。実装プロセスでは、「.drawLine()」メソッドなどの jQuery.draw プラグインによって提供される API を使用して接続線オブジェクトを作成し、それに線の色や線などのさまざまなスタイルを設定できます。幅などまた、接続線を削除する必要があるときにすぐに操作できるように、作成した接続線オブジェクトを保存するために「connections」配列が使用されます。

3. エフェクト表示の実現

上記のコードにより、接続エフェクトを実現することができ、ページ上で関連する操作を実行できるようになり、接続線がマウスとして動的に表示されます。ポイント。

この記事では、jQuery ベースの接続実装方法を紹介し、コード例を通して具体的な実装手順と注意点を説明します。 Web サイトの対話性と視認性が向上し、よりユーザーフレンドリーなエクスペリエンスが実現します。

以上がjQueryに基づく接続実装方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。