51 lines
3.1 KiB
HTML
51 lines
3.1 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<meta name="description" content="Exemple d’utilisation 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="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 d’afficher 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 d’un 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 à l’attribut « title » lors de l’affichage 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 d’afficher 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>
|