Fab_Blab
/
FreeDatas2HTML
1
1
Fork 0
Code Issues Pull Requests Projects Releases Activity
FreeDatas2HTML/public/withMixedFields.html

52 lines
3.2 KiB
HTML
Raw Normal View History

Ajout d'une page de démonstation pour le nouveau moteur de rendu.
2022-02-02 15:47:21 +01:00
<!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>
Ajout page documentation (en cours d'écriture)
2022-03-03 19:06:39 +01:00
<li><a href="./documentation.html#content" class="badge success sm-12 col">Documentation</a></li>
Ajout d'une page de démonstation pour le nouveau moteur de rendu.
2022-02-02 15:47:21 +01:00
<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>