Wiki CgX

Parce que j'ai un cerveau, mais pas trop.

Outils pour utilisateurs

Outils du site


code:js:data-toggle

data-toggle

Attention, c'est dépendant de jQuery, évidemment !

C'est quoi ?

Parfait pour activer des classes au click, uniquement piloté par des attributs HTML :

dataToggle.js
	$('*[data-toggle]').click(function ()
		{
		if ($(this).data("toggledest"))
			$($(this).data("toggledest")).toggleClass($(this).attr("data-toggle"));
		else
			$(this).toggleClass($(this).attr("data-toggle"));
		});

Utilisation

Activer une classe au click

<div data-toggle="actif">
     Clique moi !
</div>

Le div activera ou désactivera sa classe “actif” à chaque click.

Activer la classe d'un autre élément au click

<div id="click" data-toggle="actif" data-toggledest="#coucou">
     Clique moi !
</div>
 
<div id="coucou">
     Coucou toi.
</div>

Le div activera ou désactivera la classe “actif” de l'élément #coucou à chaque click sur le div #click . A noter qu'il faut préciser dans data-toggledest le # ou le . selon si l'élement ciblé est un id ou une classe.

Multi selectors

On peut également cibler plusieurs élements, en les séparant par des virgules, et (dés)activer plusieurs classes, en les séparant par des espaces :

<div id="click" data-toggle="actif selectionne" data-toggledest="#coucou,#aussi">
     Clique moi !
</div>
 
<div id="coucou">
     Coucou toi.
</div>
<div class="aussi">
     Toi aussi.
</div>
code/js/data-toggle.txt · Dernière modification: 29 Nov 2020 :: 14:45 de CgX