Depuis l'arrivée de la version 5 du langage HTML 5, un nouvel attribut a fait son apparition, il s'agit de l'attribut data-*.

Cet attribut a pour but de stocker, au cœur même de votre page html, des données particulières sans forcément vouloir les afficher. Vous pourrez retrouver sur le site du W3C ou Mozilla l'ensemble de la philosophie de ce nouvel attribut HTML5.
En deux mots, vous pouvez stocker au cœur d'une balise, de la donnée, sans vouloir forcément l'afficher. Prenons un exemple, vous souhaitez faire une liste de véhicules et pour chacun d'entre eux, vous souhaitez stocker la plaque minéralogique, vous pouvez y associer dans une balise data-plaque="3355 TA 54" par exemple. 
Attention cependant, ce n'est pas parce que vous stockez une donnée sous cette forme, qu'elle n'est pas privée. En effet, en affichant le code source de votre page, vous retrouverez bien cet attribut et sa donnée dans votre page web.
 
Toutefois, vous pouvez être amené à vouloir, à un moment donné de l'existence de votre page Web, afficher le contenu de cet attribut. J'ai cherché et j'ai enfin trouvé la solution que je souhaitais partager ici. Pour effectuer cette manipulation, vous avez simplement besoin de retoucher votre code CSS.
 
Un exemple
Prenons pour exemple la volonté de vouloir afficher après un paragraphe, le contenu de l'attribut badge. Comme tous ces attributs doivent commencer par la chaîne de caractère data-, dans notre cas, notre attribut s'appellera data-badges.
Ainsi, si nous souhaitons afficher cet attribut à la fin du paragraphe, il nous suffit de faire ce code CSS avec la pseudo classe after: dans notre cas, mais cela peut aussi être before, le but étant de spécifier où placer la donnée)
 
p::after{
   content:attr(data-badges);
}

 

Mon Github

slhuilli1's GitHub repositories

  • ongletvide
    Rajoute une icone sir le content de l'onglet contien la constante [[[onglet_vide]]], constante déclarée dans RL content templater
  • cssmodale
    Create un modal window full CSS
  • nl2br
    ce plugin tranforme automatiquement vos retours à la ligne de vos articles en BR grâce à la fonction PHP dédiée nl2br(). - this plugin automatically transforms your newlines of your articles into BR thanks to the dedicated PHP function nl2br().
  • hidenatifs
    Hide from a links data-natifs="..."
  • targetpdf
    Add "_blank" automatically when href ils a pdf file !
  • zippage
    Zipper tous les PDF internes d'une page Joomla Content
  • legendeimg
    No description
  • antispam
    Plugin qui génère une chaine mais avec le symbole @ dans le css, évitant de se faire aspirer son mail !
  • modallightbox
    No description
  • titrearticle
    Remplace affiche le titre de l'article.
  • provisoire
    Lister des documents marqués comme "provisioires"
  • cssmodal
    Plugin Joomla pour lancer une fenetre modale
  • modalpdf
    No description
  • demandeajoutdoc
    This pligin add a mailto: link info Regular Labs Tabs (for intranet whithout spam)
  • natif
    Ce plugin prend en compte ou pas l'affichage des fichiers natifs (word/excel) en sus de liens vers des PDF
  • nouveau
    Un plugin joomla qui affiche une mention "nouveau" sur un lien hypertext avannt une date butoire - A Joomla plugin that displays a “new” mention on a hyperlink before a deadline
  • lastdocsupdates
    Plugin d'affichage des derniers fichiers modifiés dans un répertoire donné
  • noteitv2
    No description
  • NoCache
    No description
  • addIdToHn
    Ce plugin ajoute automatiquement un id calculé (compté) aux balises Hn
  • ReadFirefoxBookmarks
    reading Firefox bookmak with PHP using SQLite library
  • externalcssandlib
    Add external CSS and javascript libraries in your projets
  • qr
    Ce plugins affiche une liste de questions reponses - This plugin for Joomla show a list of questions, when clicked, the answer is showed
  • dataarchives
  • attachments
    No description
  • mod_vacances
    Ce module Joomla affiche les congés français. Basé sur des OpenDatas du minitère de l'éducation nationale
  • noteit
    Ce plugin permet l'ajout de Post it (format graphique) dans un article
  • nbonlineusers
    No description
  • removehtmlcomment
    Delete all html comment in a joomla article
  • rechercheget
    Recherche en GET dans Joomla Content