Attributs data-* et contenteditable

HTML5 c'est aussi de nouveaux attributs.

Les attributs data-*

C'est l'un des grandes nouveautés de HTML5. Le développeur peut associer à chaque élément des données en créant ses propres attributs.
Seule condition : le nom de chaque attribut doit commencer par "data-".
C'est pour cette raison que l'on parle des attributs data-*.
Ces attributs personnalisés peuvent ensuite être utilisés par CSS et JavaScript.

Exemple

Faisons un peu de biologie aquatique !

Les images apparaissent ombrées.

Le code CSS & HTML

... img[data-nom] {box-shadow : 10px 10px 10px gray; width : 50% ; height :auto ;} ... <img src ="../img_bio/bispire.jpg" data-nom = "Bispire" data-description ="ver annélidé polychète tubicole" > <img src ="../img_bio/lanice.jpg" data-nom = "Lanice" data-description ="ver annélidé polychète tubicole" > <button onclick ="info()">Infos sur ces deux images !</button> ...

L'attribut "data-nom" est utilisé pour mettre en forme les images de la page.

Le script

function info()
{
	var image =document.querySelector("img") ; 
	var nom = image.getAttribute("data-nom"); 
	var description =image.getAttribute("data-description"); 
	alert("nom animal : " + nom + " description : " + description); 
	
	var image =document.querySelectorAll("img")[1];
	var nom = image.dataset.nom; 
	var description = image.dataset.description ; 
	alert("nom espèce : " + nom + " description espèce : " + description); 
}

La fonction affiche des infos sur les deux images.
Pour la première image avec la méthode traditionnelle getAttribute()
Pour la deuxième image avec la nouvelle propriété JS dataset.
La syntaxe est alors : élément.dataset.attribut

Attention dans cette syntaxe l'attribut personnalisé doit être débarassé du préfixe "data-" .

Les attributs data-* et jQuery Mobile

JQuery Mobile est une extension de jQuery. Ce greffon (ou "plugin") permet de créer rapidement la version mobile d'un site et utilise systématiquement les attributs data-* ! Pour en savoir plus sur jQuery Mobile

Rendre une boite éditable

Avec HTML5 tous les éléments peuvent devenir éditable et non plus seulement les zones de texte des formulaires.

Exemple politique (lol)

Si vous n'êtes pas d'accord avec cette insertion vous pouvez la modifier puis vous cliquez sur le bouton.

Macron est un bon président !

Code CSS & HTML

... div {border : 1px solid red ; width :80% ; min-height : 100px ; overflow : hidden ; resize : both; } ... <div contenteditable ='true'>Macron est un bon président ! </div> ... <button onclick ="fafficher()">Afficher le texte de la boîte</button> ...

La nouvelle propriété CSS3 resize autorise le redimensionnement d'une boite à condition de lui avoir appliqué avant la propriété overflow.
Valeurs possibles de resize : none (valeur par défaut) : taille non modifiable ; both : modifiable dans les deux sens ; horizontal ; vertical.

La boîte DIV a l'attribut contenteditable= 'true' !

Jusqu'à présent seuls les champs de formulaire (input, textarea) étaient éditables.
Désormais toutes les éléments block peuvent devenir éditables à condition de leur attribuer conteneditable ='true' .

Le script

	function fafficher() 
	{
		var boite =document.querySelector('div');
		var texte = boite.textContent ; 
		alert("texte de la boîte :" + texte); 
	}

La fonction affiche le contenu de la boîte DIV (sans le balisage).
Retour menu