Maison >interface Web >js tutoriel >Créer un outil de mesure avec l'API Resize Observer

Créer un outil de mesure avec l'API Resize Observer

Barbara Streisandoriginal: 2024-12-21 06:56:13824parcourir

Building a Measuring Tool with the Resize Observer API

API Web - un territoire très intéressant et rarement bien exploré. Et pourtant, il existe un grand nombre d'API uniques et très utiles qui peuvent vous aider à créer des outils pour vos projets.

Par exemple, le suivi des changements de taille est essentiel pour créer des expériences dynamiques et réactives. C'est là qu'intervient l'API Resize Observer.

Dans cet article, nous allons créer un outil de mesure qui affiche la largeur et la hauteur d'une boîte redimensionnable en temps réel. Il s'agit d'un projet qui démontre la puissance de l'API Resize Observer et des API du navigateur en général de manière pratique et interactive.

Qu'est-ce que l'API Resize Observer ?

L'API Resize Observer est une fonctionnalité du navigateur qui vous permet de détecter les modifications apportées à la taille d'un élément. Resize Observer fonctionne sur des éléments individuels. Il fonctionne immédiatement et peut être un excellent ajout à votre ensemble d'outils pour créer une conception réactive et des interfaces utilisateur dynamiques.

Voici ce qui le rend génial :

Il est léger et facile à utiliser
Vous pouvez suivre les changements de taille pour des éléments spécifiques, pas seulement pour la fenêtre entière
C'est parfait pour créer des composants réactifs ou des widgets redimensionnables

Ce que nous construisons

Nous allons créer une boîte redimensionnable avec les dimensions affichées à l’intérieur. Au fur et à mesure que l'utilisateur redimensionne la boîte, les dimensions affichées seront mises à jour en temps réel.

Étape 1 : Mise en place du projet

Tout d’abord, mettons en place la structure de base de notre projet :

resize-tool/
├── index.html
├── styles.css
├── script.js

Étape 2 : le balisage

Voici une présentation simple pour notre application. La boîte redimensionnable comprend une étendue de texte pour afficher ses dimensions :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Measuring Tool with Resize Observer API</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div>



<h2>
  
  
  Step 3: Styling the App
</h2>

<p>We’ll add some styles to make the resizable box more visually appealing:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f0f0f0;
}

.container {
  position: relative;
  width: 80%;
  height: 80%;
}

.resizable {
  position: absolute;
  width: 300px;
  height: 200px;
  border: 2px dashed #007bff;
  background: rgba(0, 123, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  resize: both;
  overflow: auto;
}

 .resizable span {
  background: white;
  padding: 5px;
  border-radius: 4px;
  font-size: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Étape 4 : Ajout du suivi du redimensionnement en temps réel

Donnons maintenant vie au projet à l'aide de l'API Resize Observer :

resize-tool/
├── index.html
├── styles.css
├── script.js

Étape 5 : tester l'outil

Ouvrez le fichier index.html dans votre navigateur.
Faites glisser les coins de la boîte pour la redimensionner.
Regardez les dimensions se mettre à jour instantanément !

Comment ça marche

L'API Resize Observer est initialisée pour surveiller les changements de taille de l'élément resizeBox. Il déclenche un rappel chaque fois que la taille de l'élément observé change.
L'entrée Resize Observer fournit des dimensions mises à jour via la propriété borderBoxSize.
Les valeurs de largeur et de hauteur mises à jour sont extraites et affichées dynamiquement en modifiant le contenu du texte du élément à l'intérieur de la boîte redimensionnable.
Conclusion

Dans ce tutoriel, nous avons construit un outil de mesure amusant et interactif en utilisant l'API Resize Observer. Ce projet montre comment les API de navigateur peuvent simplifier des tâches complexes.
Si vous l'essayez ou l'étendez davantage, n'hésitez pas à partager vos créations dans les commentaires !
Consultez également le blog CKEditor pour des articles sur les éditeurs de texte enrichi et commencez votre voyage avec CKEditor 5 en vous inscrivant pour un essai gratuit dès aujourd'hui !

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!

html if for try using Property number this display viewport

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment le curry fonctionne-t-il avec plusieurs fonctions fléchées en JavaScript ?Article suivant：Comment le curry fonctionne-t-il avec plusieurs fonctions fléchées en JavaScript ?

Articles Liés

Voir plus