jquery chronologie irrégulière

chronologie irrégulière jquery

La chronologie est un moyen courant d'afficher des données, généralement utilisé pour montrer le développement d'un certain sujet ou l'ordre chronologique des événements. Dans le développement front-end, nous pouvons utiliser jQuery pour implémenter une chronologie irrégulière. En prenant comme exemple le processus de développement d'un certain sujet, voici les étapes de mise en œuvre.

1. Construire des données

Tout d'abord, nous devons construire un ensemble de données pour afficher chaque nœud sur la chronologie. Les données doivent inclure le titre, le contenu, les images et autres informations de chaque nœud, ainsi que l'horodatage correspondant à chaque nœud. Par exemple :

var data = [
  {
    title: '起点',
    content: '从这里开始',
    image: 'image/start.png',
    timestamp: 1559347200
  },
  {
    title: '道路漫漫',
    content: '前方路程尚需努力',
    image: 'image/road.png',
    timestamp: 1561939200
  },
  {
    title: '小有成就',
    content: '终于开始发光发热了',
    image: 'image/achievement.png',
    timestamp: 1564617600
  },
  ...
];

2. Calculer la position du nœud

Ensuite, nous devons calculer la position de chaque nœud sur la chronologie. Cette chronologie étant une chronologie irrégulière, il est nécessaire de considérer les différentes positions de chaque nœud. Nous pouvons utiliser la formule suivante pour calculer la position du nœud sur la timeline :

position = (timestamp - minTimestamp) / (maxTimestamp - minTimestamp) * (maxPosition - minPosition) + minPosition;

où, minTimestamp et maxTimestamp représentent les horodatages minimum et maximum dans les données < ; code >minPosition et maxPosition représentent les positions les plus à gauche et à droite de la timeline ; position représente la position du nœud sur la timeline. minTimestamp和maxTimestamp表示数据中最小和最大的时间戳；minPosition和maxPosition表示时间轴的最左端和最右端的位置；position表示节点在时间轴上的位置。

3、渲染节点

现在，我们已经得到了每个节点在时间轴上的位置，接下来就是将节点渲染到页面上。我们可以使用如下的代码来渲染每个节点：

$.each(data, function(index, item) {
  var position = (item.timestamp - minTimestamp) / (maxTimestamp - minTimestamp) * (maxPosition - minPosition) + minPosition;

  var node = $('<div class="node">' +
    '<div class="node-title">' + item.title + '</div>' +
    '<div class="node-body">' +
    '<img src="' + item.image + '">' +
    '<p>' + item.content + '</p>' +
    '</div>' +
    '</div>');

  node.css('left', position + 'px');

  $(".timeline").append(node);
});

在上述代码中，我们首先使用$.each()方法遍历数据数组，然后计算每个节点在时间轴上的位置。接着，我们使用$()方法创建一个节点，并设置节点的样式和内容。最后，将节点添加到页面上。

4、实现节点点击事件

最后，我们可以实现一个节点点击事件，用于展开或折叠节点的内容。具体实现方式可以参考如下代码：

$(".node").click(function() {
  var body = $(this).children(".node-body");
  if(body.is(":visible")) {
    body.slideUp();
  } else {
    body.slideDown();
  }
});

在上述代码中，我们使用.click()方法为节点添加点击事件处理函数，当节点被点击时判断节点的内容是否已经展开。如果已经展开，则使用.slideUp()方法将其折叠起来；否则，使用.slideDown()

3. Rendu des nœuds

Maintenant que nous avons obtenu la position de chaque nœud sur la timeline, l'étape suivante consiste à rendre les nœuds sur la page. Nous pouvons utiliser le code suivant pour restituer chaque nœud : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons d'abord la méthode $.each() pour parcourir le tableau de données, puis calculons la valeur de chaque nœud. sur l'emplacement de la chronologie. Ensuite, nous utilisons la méthode $() pour créer un nœud et définir le style et le contenu du nœud. Enfin, ajoutez le nœud à la page. 🎜🎜4. Implémenter un événement de clic sur un nœud🎜🎜Enfin, nous pouvons implémenter un événement de clic sur un nœud pour développer ou réduire le contenu du nœud. Pour une implémentation spécifique, veuillez vous référer au code suivant : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la méthode .click() pour ajouter une fonction de traitement d'événement de clic au nœud lorsque vous cliquez sur le nœud. , il est jugé si le contenu du nœud a été développé . S'il a été développé, utilisez la méthode .slideUp() pour le réduire ; sinon, utilisez la méthode .slideDown() pour le développer. 🎜🎜À ce stade, nous avons réussi à mettre en œuvre un simple calendrier irrégulier. Dans les applications pratiques, davantage de détails d’interaction et de contenu d’optimisation doivent être pris en compte. 🎜

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!