FreeDatas2HTML/public/withMixedFields.html

52 lines
3.2 KiB
HTML
Raw Normal View History

<!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>
2022-03-09 13:00:00 +01:00
<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>