Une brève analyse de la méthode d'implémentation de connexion basée sur jQuery

Dans le développement Web, afin d'améliorer l'expérience utilisateur, nous avons souvent besoin d'utiliser des effets interactifs pour guider les opérations de l'utilisateur, afficher les données, etc., et sur cette base, nous espérons utiliser les effets de connexion pour mieux afficher le contenu. Dans cet article, nous présenterons la méthode d'implémentation de connexion basée sur jQuery pour vous aider à obtenir rapidement l'effet de connexion.

1. Préparation

Avant de commencer, nous devons présenter jQuery et le plug-in dont nous avons besoin - jquery.draw.js. Dans votre fichier HTML, vous pouvez l'introduire avec le code suivant :

<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>

De plus, nous devons également définir certains éléments pour la page, qui sont généralement des nœuds qui doivent être connectés. Dans cet article, nous utiliserons une mise en page HTML simple, comme indiqué ci-dessous :

<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>

Cette mise en page contient quatre éléments DIV nommés "node", qui sont les nœuds que nous devons connecter. Chaque nœud possède un attribut personnalisé « data-node-id », qui est utilisé pour identifier l'ID du nœud, et sa valeur peut être n'importe quelle chaîne ou nombre.

2. Tracer des lignes

Avant de tracer des lignes entre les nœuds, nous devons d'abord définir certains styles. Dans le fichier CSS, vous pouvez ajouter le code suivant :

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

.container {
  height:500px;
}

Ensuite, nous devons écrire du code jQuery pour obtenir l'effet de dessin au trait. Dans cet article, nous utiliserons l'API fournie par le plug-in jQuery.draw pour obtenir l'effet de dessin au trait. Dans votre fichier JavaScript, vous pouvez ajouter le code suivant :

$(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);
      }
    });
  });
});

Le code ci-dessus implémente des opérations telles que des nœuds déplaçables, des connexions cliquables, la création et la suppression, etc., et ajoute également des fonctions d'écoute d'événements pour gérer les événements de souris et contrôler les connexions. Création et suppression d'objets de ligne. Au cours du processus d'implémentation, nous avons utilisé l'API fournie par le plug-in jQuery.draw, telle que la méthode ".drawLine()" pour créer un objet ligne de connexion, et pouvons définir différents styles pour celui-ci, tels que la couleur de la ligne ou la ligne. largeur, etc De plus, le tableau « connexions » est utilisé pour enregistrer les objets de ligne de connexion créés afin que vous puissiez agir rapidement lorsque vous devez supprimer une ligne de connexion.

3. Réaliser l'affichage de l'effet

Avec le code ci-dessus, nous pouvons réaliser avec succès l'effet de connexion et effectuer les opérations associées sur la page. La ligne de connexion sera affichée dynamiquement au fur et à mesure que la souris pointe.

Dans cet article, nous présentons la méthode de mise en œuvre de la connexion basée sur jQuery et expliquons les étapes de mise en œuvre spécifiques et les précautions à travers des exemples de code. Les lecteurs peuvent s'entraîner selon cette méthode pour obtenir des effets interactifs avec des images et des textes, ce qui améliore considérablement l'interactivité du site Web. et la visibilité apportent une expérience plus conviviale.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!