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-*.

Exemple

Faisons un peu de biologie aquatique !

Le code correspondant

Code HTML :

... <img src ="../images/bispire.jpg" data-nom = "bispire" data-description ="ver annélidé polychète tubicole" > <button onclick ="info()">Infos sur cette image !</button> ...

data-nom qui contient "bispire" (nom du ver)
data-description qui contient "ver annélidé polychète tubicole" (description succincte de l'espèce)

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 nom =image.dataset.nom; 
	var description =image.dataset.description ; 
	alert("nom espèce : " + nom + " description espèce : " + description); 
}

La fonction affiche deux fois le nom et la description de l'animal.
Une première fois avec la méthode getAttribute(nomattribut) puis avec l'API dataset. Attention dans cette syntaxe l'attribut doit être débarassé du préfixe "data-" .

L'API dataset n'est pas encore implémentée sur tous les navigateurs.

Les attributs data-* et jQuery Mobile

Le célèbre framework JS et CSS qui permet de créer rapidement la version mobile d'un site exploite systématiquement les attributs data-* !
La bibiothèque jQuery Mobile est évoquée dans le tuto "JavaScript & jQuery" dans ce site ! Découvrez jQuery Mobile

Rendre une boite éditable

Avec HTML5 on peut désormais modifier le texte d'une boite.

Exemple politique (lol)

Si vous n'êtes pas d'accord avec cette insertion vous la modifier.

Macron est un bon président !

Rassurez le texte que vous saisissez n'est pas conservé. Voir script.

Le code correspondant

Le CSS :

	div {border : 1px solid red ; width :80% ; min-height : 100px ; overflow : hidden ; resize : both; }

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.

Le code HTML :

... <div contenteditable ='true'> Macron est un bon président ! </div> ... <button onclick ="fafficher()">Afficher le texte de la boîte</button> ...

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