FreeDatas2HTML/public/withMixedFields.html

52 lines
3.2 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Exemple dutilisation de FreeDatas2HTML pour parser et afficher des données en mixant leur contenu.">
<meta name="robots" content="index, follow">
<link rel="stylesheet" href="CSS/paper.min.css">
<link rel="stylesheet" href="CSS/fd2html.css">
<script src="JS/exampleWithMixedFields.app.js" defer></script>
<script src="JS/matomo.js" defer></script>
<title>Afficher des données en TypeScript/JavaScript en mixant le contenu de différents champs</title>
</head>
<body class="paper container">
<header id="header" class="text-center">
<h1><a href="/">FreeDatas2HTML</a></h1>
<nav id="menu-principal">
<ul class="inline row flex-center">
<li><a href="./#intro" class="badge warning sm-12 col">Introduction</a></li>
<li><a href="./examples.html#content" class="badge success sm-12 col">Exemples</a></li>
<li><a href="./documentation.html#content" class="badge success sm-12 col">Documentation</a></li>
<li><a href="https://forge.chapril.org/Fab_Blab/FreeDatas2HTML" target="_blank" title="accéder au dépôt GIT" rel="noopener" class="badge success sm-12 col">Git</a></li>
</ul>
</nav>
</header>
<h2>Mixer les données de différents champs</h2>
<div class="row">
<div id="filtre1" class="sm-12 md-6 lg-6 col"></div>
</div>
<div id="datas">
<p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier JSON.</p>
</div>
<article id="content">
<p>Cet exemple utilise un <b>moteur de rendu alternatif</b> à celui par défaut.</p>
<p>Il vous donne plus de souplesse sur la façon dafficher les données extraites de la source (ici <a href="/datas/links.json" title="fichier de données" target="_blank" rel="nofollow">un fichier JSON</a>), notamment en permettant d<b>utiliser le contenu de plusieurs champs pour créer le rendu dun seul</b>.</p>
<p>Dans le cas ci-dessus, le champ «url» est ainsi utilisé pour rendre cliquable le nom du lien (champ «anchor») et inversement le champ «anchor» sert à lattribut «title» lors de laffichage du champ «url».</p>
<p>La contre-partie est de <b>nécessiter dêtre plus vigilant lors de votre intégration</b>, là où le moteur de rendu par défaut se contente dafficher les données telles que présentes dans la source.</p>
</article>
<aside>
<p><a href="https://forge.chapril.org/Fab_Blab/FreeDatas2HTML/src/branch/master/src/demo/exampleWithMixedFields.ts" target="_blank" title="accéder au code" rel="noopener" class="paper-btn btn-secondary">Code source utilisé par cette page.</a></p>
</aside>
<footer><p>Design : <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a> | <a href="/mentions-legales.html">Contact et mentions légales</a>.</p></footer>
</body>
</html>