2021-08-05 18:28:14 +02:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2021-08-13 20:00:03 +02:00
< meta name = "description" content = "Page d'exemple d'utilisation du script freeDatas2HTML pour visualiser des informations venant d'un fichier CSV." >
2021-08-05 18:28:14 +02:00
< meta name = "robots" content = "noindex" >
2021-08-13 20:00:03 +02:00
< link rel = "stylesheet" href = "CSS/paper.min.css" >
2021-09-27 11:39:31 +02:00
< link rel = "stylesheet" href = "CSS/fd2html.css" >
2021-10-13 12:41:34 +02:00
< script src = "JS/exampleWithHTML.app.js" defer > < / script >
< title > freeDatas2HTML : démo d'affichage de données venant du DOM (HTML)< / title >
2021-08-05 18:28:14 +02:00
< / head >
2021-08-13 20:00:03 +02:00
< body class = "paper container" >
< h1 > freeDatas2HTML< / h1 >
2021-10-13 12:41:34 +02:00
< 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 >
2021-09-09 12:57:23 +02:00
< 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 >
2021-09-16 16:05:42 +02:00
< div id = "paginationOptions" class = "col-12 col" > < / div >
2021-09-09 12:57:23 +02:00
< / div >
2021-09-23 11:28:27 +02:00
< h3 > Nombre total de résultats : < span id = "compteur" > < / span > < / h3 >
2021-08-05 18:28:14 +02:00
< article id = "datas" >
2021-10-13 12:41:34 +02:00
< 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 >
2021-08-05 18:28:14 +02:00
< / article >
2021-09-09 12:57:23 +02:00
< p id = "pages" > < / p >
2021-10-13 12:41:34 +02:00
< 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 >
2021-09-23 17:19:31 +02:00
< p > Certains champs (=colonnes) peuvent être désignées comme devant permettre de < b > classer les données< / b > < / p >
2021-09-27 11:39:31 +02:00
< p > Il est également possible d’ < / p >
2021-09-23 17:19:31 +02:00
< p > Une autre option permet de < b > paginer les résultats< / b > .< / p >
2021-09-01 16:28:56 +02:00
< p > Design basé sur < a href = "https://www.getpapercss.com" target = "_blank" > PaperCSS< / a > < / p > < / aside >
2021-08-05 18:28:14 +02:00
< / body >
< / html >
