135 lines
9.3 KiB
HTML
135 lines
9.3 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="Page d'exemple d'utilisation du script freeDatas2HTML pour visualiser des informations venant d'un fichier CSV.">
|
||
<meta name="robots" content="noindex">
|
||
<link rel="stylesheet" href="CSS/paper.min.css">
|
||
<link rel="stylesheet" href="CSS/fd2html.css">
|
||
<script src="JS/exampleWithHTML.app.js" defer></script>
|
||
<title>freeDatas2HTML : démo d'affichage de données venant du DOM (HTML)</title>
|
||
</head>
|
||
<body class="paper container">
|
||
<h1>freeDatas2HTML</h1>
|
||
<p>Autres pages d'exemple avec des données transmises <a href="./withJSON.html">en JSON</a> ou <a href="./withCSV.html">en CSV</a>.</p>
|
||
|
||
<div class="row">
|
||
<div id="filtre1" class="sm-12 md-6 lg-4 col"></div>
|
||
<div id="filtre2" class="sm-12 md-6 lg-4 col"></div>
|
||
<div id="filtre3" class="sm-12 md-6 lg-4 col"></div>
|
||
<div id="paginationOptions" class="col-12 col"></div>
|
||
</div>
|
||
|
||
<h3>Nombre total de résultats : <span id="compteur"></span></h3>
|
||
<article id="datas">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Séquence</th><th>Signification</th><th>Décrit en section</th><th>Défini originellement en CSS niveau</th>
|
||
</tr>
|
||
</thead
|
||
<tbody>
|
||
<tr><td>*</td><td>tout élément</td><td>Sélecteur universel</td><td>2</td></tr>
|
||
<tr><td>E</td><td>tout élément de type E</td><td>Sélecteur de type d'élément</td><td>1</td></tr>
|
||
<tr><td>E[foo]</td><td>tout élément E portant l'attribut "foo"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
|
||
<tr><td>E[foo="bar"]</td><td>tout élément E portant l'attribut"
|
||
foo" et dont la valeur de cet attribut est exactement "bar"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
|
||
<tr><td>E[foo~="bar"]</td><td>tout élément E dont l'attribut "foo"
|
||
contient une liste de valeurs séparées par des espaces, l'une
|
||
de ces valeurs étant exactement égale à "bar"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
|
||
<tr><td>E[foo^="bar"]</td><td>tout élément E dont la valeur de l'attribut
|
||
"foo" commence exactement par la chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
|
||
<tr><td>E[foo$="bar"]</td><td>tout élément E dont la valeur de l'attribut
|
||
"foo" finit exactement par la chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
|
||
<tr><td>E[foo*="bar"]</td><td>tout élément E dont la valeur de l'attribut
|
||
"foo" contient la sous-chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
|
||
<tr><td>E[lang|="en"]</td><td>tout élément E dont l'attribut 'lang"
|
||
est une liste de valeurs séparées par des tirets et commençant
|
||
(à gauche) par "en"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
|
||
<tr><td>E:root</td><td>un élément E, racine du document</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||
<tr><td>E:nth-child(n)</td><td>un élément E qui est le n-ième enfant
|
||
de son parent</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||
<tr><td>E:nth-last-child(n)</td><td>un élément E qui est le n-ième enfant
|
||
de son parent en comptant depuis le dernier enfant</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||
<tr><td>E:nth-of-type(n)</td><td>un élément E qui est le n-ième enfant
|
||
de son parent et de ce type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||
<tr><td>E:nth-last-of-type(n)</td><td>un élément E qui est le n-ième enfant
|
||
de son parent et de ce type en comptant depuis le dernier enfant</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||
<tr><td>E:first-child</td><td>un élément E, premier enfant de son parent</td><td>Pseudo-classes structurelles</td><td>2</td></tr>
|
||
<tr><td>E:last-child</td><td>un élément E, dernier enfant de son parent</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||
<tr><td>E:first-of-type</td><td>un élément E, premier enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||
<tr><td>E:last-of-type</td><td>un élément E, dernier enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||
<tr>
|
||
<td height="19">E:only-child</td><td height="19">un élément E, seul enfant de
|
||
son parent</td><td height="19">Pseudo-classes
|
||
structurelles</td><td height="19">3</td></tr>
|
||
<tr><td>E:only-of-type</td><td>un élément E, seul enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||
<tr><td>E:empty</td><td>un élément E qui n'a aucun enfant (y compris
|
||
noeuds textuels purs)</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||
<tr><td>E:link <br>
|
||
E:visited</td><td>un élément E qui est la source d'un hyperlien
|
||
dont la cible n'a pas encore été visitée (:link) ou
|
||
a déjà été visitée (:visited)</td><td>Les pseudo-classes de lien</td><td>1</td></tr>
|
||
<tr><td>E:active <br>
|
||
E:hover <br>
|
||
E:focus</td><td>un élément E pendant certaines actions de
|
||
l'usager</td><td>Les pseudo-classes d'action
|
||
Usager </td><td>1 and 2</td></tr>
|
||
<tr><td>E:target</td><td>un élément E qui est la cible de l'URL d'origine
|
||
contenant lui-même un fragment identifiant.</td><td>La pseudo-classe :target</td><td>3</td></tr>
|
||
<tr><td>E:lang(c)</td><td>un élément E dont le langage (humain) est
|
||
c (le langage du document spécifie comment le langage humain est
|
||
déterminé)</td><td>La pseudo-classe :lang() </td><td>2</td></tr>
|
||
<tr><td>E:enabled<br>
|
||
E:disabled </td><td>un élément d'interface utilisateur E qui
|
||
est actif ou inactif.</td><td>Les pseudo-classes d'état
|
||
d'élément d'interface</td><td>3</td></tr>
|
||
<tr><td>E:checked<br>
|
||
E:indeterminate </td><td>un élément d'interface utilisateur E qui
|
||
est coché ou dont l'état est indéterminé (par
|
||
exemple un bouton-radio ou une case à cocher)</td><td>Les pseudo-classes d'état
|
||
d'élément d'interface</td><td>3</td></tr>
|
||
<tr><td>E:contains("foo")</td><td>un élément E dont le contenu textuel concaténé
|
||
contient la sous-chaîne "foo"</td><td>La pseudo-classe de contenu</td><td>3</td></tr>
|
||
<tr><td>E::first-line</td><td>la première ligne formatée d'un élément
|
||
E</td><td>The :first-line pseudo-element</td><td>1</td></tr>
|
||
<tr><td>E::first-letter</td><td>le premier caractère formaté d'un élément
|
||
E</td><td>Le pseudo-élément
|
||
::first-letter </td><td>1</td></tr>
|
||
<tr><td>E::selection</td><td>la partie d'un élément E qui est actuellement
|
||
sélectionnée/mise en exergue par l'usager</td><td>Les pseudo-éléments
|
||
fragments d'éléments d'interface</td><td>3</td></tr>
|
||
<tr><td>E::before</td><td>le contenu généré avant un élément
|
||
E</td><td>Le pseudo-élément
|
||
::before </td><td>2</td></tr>
|
||
<tr><td>E::after</td><td>le contenu généré après un
|
||
élément E</td><td>Le pseudo-élément
|
||
::after </td><td>2</td></tr>
|
||
<tr><td>E.warning</td><td><i>Uniquement en HTML</i>. Identique à E[class~="warning"].</td><td>Sélecteurs de classe</td><td>1</td></tr>
|
||
<tr><td>E#myid</td><td>un élément E dont l'ID est égal à
|
||
"myid".</td><td>Sélecteurs d'ID</td><td>1</td></tr>
|
||
<tr><td>E:not(s)</td><td> un élément E qui n'est pas représenté
|
||
par le sélecteur simple s</td><td>La pseudo-classe de négation</td><td>3</td></tr>
|
||
<tr><td>E F</td><td>un élément F qui est le descendant d'un
|
||
élément E</td><td>Combinateur de descendance
|
||
</td><td>1</td></tr>
|
||
<tr><td>E > F</td><td>un élément F qui est le fils d'un élément
|
||
E</td><td>Combinateur filial</td><td>2</td></tr>
|
||
<tr><td>E + F</td><td>un élément F immédiatement précédé
|
||
par un élément E</td><td>Combinateur d'adjacence
|
||
directe</td><td>2</td></tr>
|
||
<tr><td>E ~ F</td><td>un élément F précédé
|
||
par un élément E</td><td>Combinateur d'adjacence
|
||
indirecte</td><td>3</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</article>
|
||
<p id="pages"></p>
|
||
<aside><p>Le tableau vient du <a href="https://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors" targe="_blank">W3C</a> qui pourra vous donner quelques pistes pour créer vos sélecteurs CSS si besoin.</p>
|
||
<p>Certains champs (=colonnes) peuvent être désignées comme devant permettre de <b>classer les données</b> : un 1ᵉʳ clic lance un classement par ordre croissant, le 2ᵉ pour ordre décroissant et ainsi de suite.</p>
|
||
<p>Il est également possible d’afficher le nombre total de résultats, avec prise en compte des éventuels filtres.</p>
|
||
<p>Une autre option permet de <b>paginer les résultats</b>.</p>
|
||
<p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></aside>
|
||
</body>
|
||
</html> |