IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

FAQ jQuery

FAQ jQueryConsultez toutes les FAQ

Nombre d'auteurs : 12, nombre de questions : 46, dernière mise à jour : 15 juin 2021 

 
OuvrirSommaireDivers scripts utiles

[jQuery 1.5]

Cet exercice permet d'éliminer tous les caractères non compatibles avec une saisie monétaire dans une zone de texte (input) ayant la classe money :

 
Sélectionnez
<input class="money" type="text" />


On n'autorise que les chiffres de 0 à 9 et la série doit se terminer par un point ou une virgule suivit par deux chiffres décimaux, par exemple : 73.25

 
Sélectionnez
$(function(){
	var half = 1/2;
 
	/*
	 * On détermine le séparateur décimal du système (O.S.) de l'utilisateur
	 * et on impose la valeur de dec et d'alpha en fonction des besoins.
	 * Si le résultat contient une virgule le séparateur
	 * décimal est la virgule sinon le point.
	 */
	var dec = (half.toString().match(/,/)) ? ',' : '.';
 
	// Par opposition, on détermine celui qui ne l'est pas.
	var alpha = (dec == '.') ? ',' : '.';
 
	/*
	 * On teste, au moment de la frappe, chaque caractère saisi
	 * par l'utilisateur et on apporte les corrections nécessaires.
	*/ 
	$('.money').keyup(function(){
		var field = $(this);
		var valNum = field.val();
 
		/*
		 * On remplace le non séparateur par le séparateur.
		 * Si la chaîne commence par le séparateur, on met un zéro devant.
		 */ 
		valNum = valNum.replace(new RegExp("["+alpha+"]"), dec);
		valNum = valNum.replace(new RegExp("^["+dec+"]"), '0.');
 
		if (valNum != ''){
			/*
			 * Si la chaîne est au format monétaire (9999.99)
			 * alors on ne change rien
			 * sinon on teste si la chaîne comporte d'autres caractères que de 0 
			 * à 9 ou le séparateur
			 * alors, s'il la chaîne comporte d'autres caractères, on les supprime
			 * sinon on limite le nombre de décimales à 2
			 */ 
			valNum = (new RegExp("^[0-9]+("+dec+"[0-9]{,2})?$").test(valNum))
			       ? valNum 
			       : (valNum.match(new RegExp("[^0-9"+dec+"]"))) 
				    ? valNum.replace(new RegExp("[^0-9"+dec+"]","g"),'') 
				    : valNum.match(new RegExp("^[0-9]+(["+dec+"][0-9]{0,2})?"))[0];
		}
 
		field.val(valNum);
	});
 
	// On s'assure du format de la saisie en fixant le nombre de décimales à 2
	$('.money').blur(function(){
		var field = $(this);
		var valNum = (field.val() * 1).toFixed(2);
 
		field.val(valNum);
	});
});

Si vous désirez également éliminer les leading zeros (les zéros en début de chaîne), il existe une alternative au blur proposé ci-dessus. On passe alors par un keyup :

 
Sélectionnez
$(".money").keyup( function(){ 
    valNum = $(this).val().replace(/^(0+(?=[0-9]{1}))([.0-9]*)$/,"$2");
    $(this).val(valNum);})



Documentation

Mis à jour le 26 février 2013  par SpaceFrog

[jQuery 1.5]

Exemple :

 
Sélectionnez
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; 
		font-size:medium; font-style:normal; font-weight:normal; line-height:normal; 
		letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; 
		background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* Test */
		li {
			margin-left:24px;
		}
		span.surligne {
			background-color:#FFFF00;
		}
	</style>
</head>
<body>
	<h1>FAQ jQuery</h1>
	<div id="conteneur">
		<p>
			Vestibulum ac nisl sit amet odio lobortis pellentesque. Quisque eu nisl. 
			In ipsum metus, congue in, porta non, luctus ac, dolor. Ut suscipit, 
			metus id blandit scelerisque, dolor nunc varius velit, sit amet feugiat 
			magna neque ut lorem. Ut ut lacus. Curabitur eget magna iaculis tellus 
			pulvinar sagittis. Maecenas eget urna. Nunc scelerisque, justo ultricies 
			luctus consectetur, enim ante aliquam urna, sed ullamcorper quam orci 
			nec arcu. Sed volutpat ligula quis elit. Donec vitae neque vel ipsum 
			ultricies accumsan. Aenean imperdiet tincidunt augue. Morbi elementum 
			metus a dui. Nunc non turpis. Maecenas vel odio non justo bibendum 
			varius. Morbi tincidunt orci et purus. Duis mattis ullamcorper odio.			
		</p>
		<ul>
			<li>
				Vestibulum ac nisl sit amet odio lobortis pellentesque. Quisque 
				eu nisl. In ipsum metus, congue in, porta non, luctus ac, dolor. 
				Ut suscipit, metus id blandit scelerisque, dolor nunc varius velit, 
				sit amet feugiat magna neque ut lorem. Ut ut lacus. Curabitur eget 
				magna iaculis tellus pulvinar sagittis. Maecenas eget urna. Nunc 
				scelerisque, justo ultricies luctus consectetur, enim ante aliquam 
				urna, sed ullamcorper quam orci nec arcu. Sed volutpat ligula quis 
				elit. Donec vitae neque vel ipsum ultricies accumsan. Aenean imperdiet 
				tincidunt augue. Morbi elementum metus a dui. Nunc non turpis. 
				Maecenas vel odio non justo bibendum varius. Morbi tincidunt orci 
				et purus. Duis mattis ullamcorper odio.
				<ul>
					<li>
						Vestibulum ac nisl sit amet odio lobortis pellentesque. 
						Quisque eu nisl. In ipsum metus, congue in, porta non, 
						luctus ac, dolor. Ut suscipit, metus id blandit scelerisque, 
						dolor nunc varius velit, sit amet feugiat magna neque ut 
						lorem. Ut ut lacus. Curabitur eget magna iaculis tellus 
						pulvinar sagittis. Maecenas eget urna. Nunc scelerisque, 
						justo ultricies luctus consectetur, enim ante aliquam urna, 
						sed ullamcorper quam orci nec arcu. Sed volutpat ligula 
						quis elit. Donec vitae neque vel ipsum ultricies accumsan. 
						Aenean imperdiet tincidunt augue. Morbi elementum metus 
						a dui. Nunc non turpis. Maecenas vel odio non justo bibendum 
						varius. Morbi tincidunt orci et purus. Duis mattis 
						ullamcorper odio.
					</li>
				</ul>
			</li>
		</ul>
		<p>
			Vestibulum ac nisl sit amet odio lobortis pellentesque. Quisque eu nisl. 
			In ipsum metus, congue in, porta non, luctus ac, dolor. Ut suscipit, 
			metus id blandit scelerisque, dolor nunc varius velit, sit amet feugiat 
			magna neque ut lorem. Ut ut lacus. <span>Vestibulum ac nisl sit amet 
			odio lobortis pellentesque. Quisque eu nisl. In ipsum metus, congue 
			in, porta non, luctus ac, dolor. Ut suscipit, metus id blandit 
			scelerisque, dolor nunc varius velit, sit amet feugiat magna neque 
			ut lorem. Ut ut lacus. Curabitur eget magna iaculis tellus pulvinar 
			sagittis. Maecenas eget urna. Nunc scelerisque, justo ultricies luctus 
			consectetur, enim ante aliquam urna, sed ullamcorper quam orci nec arcu. 
			Sed volutpat ligula quis elit. Donec vitae neque vel ipsum ultricies 
			accumsan. Aenean imperdiet tincidunt augue. Morbi elementum metus a dui. 
			Nunc non turpis. Maecenas vel odio non justo bibendum varius. Morbi 
			tincidunt orci et purus. Duis mattis ullamcorper odio.</span> Curabitur 
			eget magna iaculis tellus pulvinar sagittis. Maecenas eget urna. 
			Nunc scelerisque, justo ultricies luctus consectetur, enim ante aliquam 
			urna, sed ullamcorper quam orci nec arcu. Sed volutpat ligula quis elit. 
			Donec vitae neque vel ipsum ultricies accumsan. Aenean imperdiet 
			tincidunt augue. Morbi elementum metus a dui. Nunc non turpis. Maecenas 
			vel odio non justo bibendum varius. Morbi tincidunt orci et purus. 
			Duis mattis ullamcorper odio.			
		</p>
	</div> 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
	<script>
		$(function(){
			// Comment puis-je surligner des mots identiques ?
			var surligner = function(id, str, surligneClass){
				$("#"+id).children().each(function(i, item){
					$(item).html($(item).html().replace(str, "<span class='" 
					           + surligneClass +"'>" + str + "</span>", "gim"));
				});
			};
 
			surligner("conteneur", "Morbi", "surligne");
		});
 	</script>
</body>  
</html>
Créé le 1er février 2011  par danielhagnoul

[jQuery 1.5.2]

Un filtre est un programme capable de traiter un ensemble d'informations pour en extraire un sous-ensemble d'informations pertinentes.

Ici, par filtrer, on entend l'action d'afficher uniquement les cellules d'une colonne qui passent un test.
Dynamiquement, car l'on doit recommencer le filtrage lorsque l'utilisateur change le critère ou la colonne de test.
Pour un tableau comprenant plusieurs colonnes on affiche la ligne contenant la cellule qui passe le test.
Le critère de test sera une expression rationnelle : RegExp (également dénommée "expression régulière" en traduction littérale).

Citation de http://fr.wikipedia.org/wiki/RegExpRegExp :

Une expression rationnelle est une chaîne de caractères que l'on appelle parfois un motif et qui décrit un ensemble de chaînes de caractères possibles selon une syntaxe précise.


Documentation :



Exemple :

Nota bene : la méthode de @SpaceFrog pour construire un tableau est la plus rapide que je connaisse, mais le tableau comportant, 2000 x 6 = 12000 cellules, le temps d'affichage va de l'instantané à quelques instants en fonction de la puissance de votre navigateur et de votre ordinateur.

 
Sélectionnez
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body {background-color:#dcdcdc; color:#000000; font-family:sans-serif; 
		font-size:medium; font-style:normal; font-weight:normal; line-height:normal; 
		letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:3px; padding-top:3px; }
        li {padding-bottom:3px; }
		label {display:block; }
		input {width:250px; }
		input[type="button"] {width:auto; }
		input[required] {border-right:3px solid orange; }
		td {padding:3px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; 
		background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* Filtrer une table */
		article {display:table-cell; }
		article:first-of-type {max-width:400px; }
    </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<article>
			<p>La table contient six colonnes numérotées de 0 à 5.</p>
			<p>Par défaut, on filtre les cellules de la troisième colonne. 
			   On affiche la ligne de la table pour laquelle la cellule de la troisième 
			   colonne contient le texte "Cellule 50" + un ou plusieurs chiffres après le 5.</p>
			<form>
				<p><label>Filtre : </label><input id="filtre" type="text" value="^Cellule 5\d*" required></p>
				<p><label>Colonne : </label><input id="col" type="number" min="0" max="5" step="1" value="2" required></p>
				<p><input id="btnTest" type="button" value="Test"/></p>
			</form>
		</article>
		<article id="tableTest">
		</article>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-04-25T15:45:00.000+02:00" pubdate>2011-04-25</time>  
		<span itemprop="name">Daniel Hagnoul</span> 
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script>
		/***************************
		* Speed Table By SpaceFrog *
		**************************/
		function buildTable(destObj, nbrLines, nbrCells){			
			var baliseTable = document.createElement('table'),
				baliseTbody = document.createElement('tbody');
 
			baliseTable.id = "foo";
 
			for(var i = 0; i < nbrLines; i++){
				new addLine(baliseTbody, nbrLines, nbrCells, i);
			}
 
			baliseTable.appendChild(baliseTbody);
			destObj.appendChild(baliseTable);
			document.close();
		}
 
		function addLine(destBody, nbrLines, nbrCells, contenu){
			var newLine = document.createElement('tr');
 
			for(var l=0; l < nbrCells; l++){
				new addCells(newLine, contenu + '_' + l);
			}
 
			destBody.appendChild(newLine);
		}
 
		function addCells(destLine, contenu){
			var newCell = document.createElement('td');
 
			newCell.style.border = "solid 1px gray";
			newCell.appendChild(document.createTextNode('Cellule ' + contenu));
			destLine.appendChild(newCell);
		}
		//-----------------------
 
		$(function(){
			/*
			 * On construit, très rapidement, une grande
			 * table de test d'ID "foo", en utilisant la
			 * fonction BuildTable de @SpaceFrog.
			 *
			 * (élément du DOM, nb de lignes, nb de colonnes)
			 */
			buildTable($("#tableTest")[0], 2000, 6);
 
			/*
			 * On filtre une colonne avec l'expression
			 * rationnelle contenue dans l'input
			 * d'ID filtre. $("#filtre").val().
			 *
			 * (l'index de la colonne de 0 à n)
			 */
			function bar(col){
				// construction de la RegExp
				var reg = new RegExp($("#filtre").val());
 
				/*
				 * Pour chaque ligne du corps de la table
				 * d'ID "foo" on modifie la propriété CSS
				 * display en fonction du résultat de la
				 * fonction match() sur le texte de la
				 * cellule de la colonne de test.
				 */
				$("#foo").children("tbody").children("tr").each(function(i, item){
					$(item).css("display", ($(item).children('td').eq(col).text().match(reg)) ? '' : 'none');
				});
			}
 
			/*
			 * On filtre la table chaque fois
			 * que l'utilisateur clique sur
			 * le bouton Test.
			 */
			$("#btnTest").click(function(){
				bar($("#col").val());
			});
        });
	</script>
</body>  
</html>



Nota bene : le 2011-04-19, cet exemple fonctionne correctement sur les navigateurs IE9, F4 et C10. Pour les navigateurs obsolètes, le code jQuery fonctionnera lorsque les codes HTML5, CSS 2.1 et CSS 3 auront été remplacés par des codes HTML4 et CSS2.

Créé le 30 mai 2011  par SpaceFrog, danielhagnoul

[jQuery 1.5.2]

Une boucle each ne peut être interrompue que par un return false !

Exemple :

 
Sélectionnez
$(function(){
	function maFonction(){
		var retour = "Je suis b";
 
		$("*").each(function(i, item){
			console.log(i, item);
 
			if (true){
				retour = "Je suis a";
 
				/*
				 * Une boucle each ne peut être interrompue
				 * que par un return false !
				 */
				return false;
			}
		});
 
		return retour;
	}
 
	console.log(maFonction());
});
Créé le 30 mai 2011  par danielhagnoul

[jQuery 1.5.2]

On souhaite que l'image occupe la place maximale, en tenant compte des bordures et du padding de l'élément conteneur, et en respectant son ratio optimum.

Le plugin dvjhImgRatio traite toutes les images possédant la classe dvjhClassImg et un attribut data-ratio = largeurOptimumImg/hauteurOptimumImg.

Exemple :

 
Sélectionnez
<img class="dvjhClassImg" src="http://danielhagnoul.developpez.com/images/badge.jpg" data-ratio="1.4848"/>


Exemple (testé avec succès sur IE9, C10 et F4) :

 
Sélectionnez
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		body {background-color:#dcdcdc; color:#000000; font-family:sans-serif; 
		font-size:medium; font-style:normal; font-weight:normal; line-height:normal; 
		letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		label {display:block; }
		input {width:250px; }
		input[type="button"] {width:auto; }
		input[required] {border-right:3px solid orange; }
		td {padding:3px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; 
		background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* Plugin */
		div {float:left; border:1px dotted grey; overflow:hidden; word-wrap:break-word; padding:6px;}
		.classDiv1 {width:100px; max-width:100px; height:100px; max-height:100px; }
		.classDiv2 {width:150px; max-width:150px; height:100px; max-height:100px; }
		.classDiv3 {width:200px; max-width:200px; height:100px; max-height:100px; }
		.classDiv4 {width:250px; max-width:250px; height:400px; max-height:400px; }
		.classDiv5 {width:350px; max-width:350px; height:400px; max-height:400px; }
		.classDiv6 {width:450px; max-width:450px; height:400px; max-height:400px; }
		.classDiv7 {width:550px; max-width:550px; height:400px; max-height:400px; }
		.classDiv8 {width:350px; max-width:350px; height:400px; max-height:400px; }
		.classDiv9 {width:150px; max-width:150px; height:400px; max-height:400px; }
    </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
        <div class="classDiv1">
            <img class="dvjhClassImg" src="http://danielhagnoul.developpez.com/images/twitter.png" data-ratio="1.00"/>
        </div>
        <div class="classDiv2">
            <img class="dvjhClassImg" src="http://danielhagnoul.developpez.com/images/Noël.jpg" data-ratio="0.6728"/>
        </div>
        <div class="classDiv3">
            <img class="dvjhClassImg" src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" data-ratio="1.00"/>
        </div>
        <p style="clear:both;">&nbsp;</p>
        <div class="classDiv4">
            <img class="dvjhClassImg" src="http://danielhagnoul.developpez.com/images/Noël.jpg" data-ratio="0.6728"/>
        </div>
        <div class="classDiv5">
            <img class="dvjhClassImg" src="http://danielhagnoul.developpez.com/images/imageTest.png" data-ratio="1.35"/>
        </div>
        <div class="classDiv6">
            <img class="dvjhClassImg" src="http://danielhagnoul.developpez.com/images/rotating.gif" data-ratio="0.9638"/>
        </div>
        <p style="clear:both;">&nbsp;</p>
        <div class="classDiv7">
            <img class="dvjhClassImg" src="http://danielhagnoul.developpez.com/images/badge.jpg" data-ratio="1.4848"/>
        </div>
        <div class="classDiv8">
            <img class="dvjhClassImg" src="http://danielhagnoul.developpez.com/images/voeux.gif" data-ratio="4.14"/>
        </div>
        <div class="classDiv9">
            <img class="dvjhClassImg" src="http://danielhagnoul.developpez.com/images/badge.jpg" data-ratio="1.4848"/>
        </div>
        <p style="clear:both;">&nbsp;</p>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-04-29T22:05:00.000+02:00" pubdate>2011-04-29</time> 
		<span itemprop="name">Daniel Hagnoul</span> 
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script>
		/*
		 * Daniel Hagnoul
		 * Plugin dvjhImgRatio
		 * Code v1.1.0 du 2011-04-29
		 *      v1.0.0 du 2011-04-25
		 * ------------------------------------------
		 * Usage : $(".dvjhClassImg").dvjhImgRatio();
		 *
		 * Pour un padding de 6px et une bordure de 1px :
		 *     $(".dvjhClassImg").dvjhImgRatio({
         *         padding: [6, 6, 6, 6]
         *     });
		 * ------------------------------------------
		 * Options par défaut :
         *         border: [1, 1, 1, 1], // [top, right, bottom, left], l'unité est le pixel exclusivement
         *         padding: [0, 0, 0, 0] // [top, right, bottom, left], l'unité est le pixel exclusivement
		 */
		(function($){
			$.fn.dvjhImgRatio = function(options){
                var opts = $.extend(true, {}, $.fn.dvjhImgRatio.defaults, options);
 
				return this.each(function(i, item){
					var photo = $(item),
                        ratio = photo.data("ratio"),
						photoParent = photo.parent(),
						photoParentWidth = photoParent.innerWidth() - opts.border[1] 
						       - opts.border[3] - opts.padding[1] - opts.padding[3],
						photoParentHeight = photoParent.innerHeight() - opts.border[0] 
						       - opts.border[2] - opts.padding[0] - opts.padding[2],
                        w = photoParentWidth,
                        h = w/ratio;
 
                    if (h > photoParentHeight){
                        h = photoParentHeight;
                        w = h*ratio;
                    }
 
                    // debug
                    /*
                    console.log("i = " + (i).toFixed(0), " | w = " + (w).toFixed(2),
                                " | h = " + (h).toFixed(2),
                                " | w/h = " + (w/h).toFixed(2), " | ratio = " + ratio);
                    */
 
					photo.css({width: w, height: h});
				});
			};
 
            $.fn.dvjhImgRatio.defaults = {
                border: [1, 1, 1, 1], // [top, right, bottom, left], l'unité est le pixel exclusivement
                padding: [0, 0, 0, 0] // [top, right, bottom, left], l'unité est le pixel exclusivement
            };
		})(jQuery);
 
		$(function(){
			/*
             * Pour des divisions ayant une bordure
             * de 1 px et un padding de 6px.
             */
			$(".dvjhClassImg").dvjhImgRatio({
                padding: [6, 6, 6, 6]  // [top, right, bottom, left], l'unité est le pixel exclusivement
            });
		});
	</script>
</body>  
</html>


Nota bene : la version 1.0.0 du plugin semblait fonctionner correctement, mais uniquement grâce à la collaboration active des navigateurs testés (C10, F4 et IE9) qui pour un élément bloc ayant une largeur (width et max-width) précise et une hauteur (height et max-height) précise se font une joie d'agrandir l'élément bloc pour y loger la totalité du contenu si vous oubliez de préciser : "overflow:hidden" !

Truc et astuce : Pour un élément ayant des dimensions fixées, n'oubliez pas de préciser les propriétés "overflow:hidden" et "word-wrap:break-word".

Créé le 30 mai 2011  par danielhagnoul

[jQuery 1.6]

Pour simplifier, prenons deux divisions. La première contient le titre du menu et la seconde le menu lui-même.

 
Sélectionnez
<div id="titre"></div>
<div id="menu"></div>


À l'ouverture de la page, la division menu est cachée par un "display:none;" ou par un hide().
Le menu doit se montrer au survol de son titre et le menu doit se cacher lorsque l'utilisateur le quitte.

 
Sélectionnez
$("#titre").mouseenter(function(){
	$("#menu").fadeIn("slow");
});
 
$("#menu").mouseleave(function(){
	$(this).fadeOut("slow");
});


C'est fonctionnel, mais à l'usage on constate rapidement que si l'utilisateur ne va pas sur le menu il ne se ferme jamais.

Naturellement, on pense alors qu'il suffit de fermer le menu lorsque l'utilisateur quitte le titre. Mais il est impossible d'entrer dans le menu sans quitter le titre, donc une commande simple n'est pas possible. On doit programmer la fermeture du menu après un délai raisonnable et annuler cette programmation si l'utilisateur entre dans le menu.

La méthode hover() est l'équivalent d'un mouseenter() plus un mouseleave().

 
Sélectionnez
$(function(){
 
	$("#menu").hide();
 
	var objMenuTimeout = null;
 
	$("#titre").hover(
		function(){
			$("#menu").fadeIn("slow");
		},
		function(){
			objMenuTimeout = setTimeout(function(){
				$("#menu").fadeOut("slow");
			}, 2000); // 2000 millisecondes = 2 secondes
		}
	);
 
	$("#menu").hover(
		function(){
			clearTimeout(objMenuTimeout);
		},
		function(){
			$(this).fadeOut("slow");
		}
	);
 
});


De cette manière :

  • si vous allez sur le titre et restez sur le titre, le menu devient et reste visible ;
  • si vous quittez le titre sans passer par le menu, le menu devient invisible après le délai imposé ;
  • si vous quittez le titre en allant dans le menu, il reste visible tant que vous y restez et devient invisible lorsque vous le quittez.
Créé le 30 mai 2011  par danielhagnoul

[jQuery 1.6.2]

Il s'agit d'un menu linéaire sans sous-menu, qui sert de support aux codes gérant l'animation du curseur.

Image non disponible
Menu avec curseur
 
Sélectionnez
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Redressed&subset=latin&v2' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgba(210, 214, 98, 0.5); color:#000000; font-family:sans-serif; 
		      font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
		.conteneur {width:95%; min-width:800px; min-height:300px; margin:12px auto; 
		            background-color:#ffffff; color:#000000; border:1px solid #666666; }
 
		/* curseur */
        ul,ol,dl {list-style:none; padding-top:3px; padding-bottom:3px; }
        li {padding:3px; }
		.menuBarre {width:800px; margin:0 auto; text-align:center; border:0; }
		.menuCurseur {position:relative; display:block; padding:3px; border:0; }
		.menuBarre ul > li {display:inline-block; width: 80px; text-align:center; 
		                    cursor:pointer;background-color:rgba(86, 211, 114, 0.35); border:1px solid green; }
		.menuActif {background-color:rgba(221, 106, 39, 0.35) !important; }
	</style>
</head>
<body>	
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<div class="menuBarre">
			<img class="menuCurseur" src="http://danielhagnoul.developpez.com/images/cursorSPF.gif" />
			<ul>
				<li>File</li>
				<li>Edit</li>
				<li class="menuActif">Code</li>
				<li>Navigation</li>
				<li>View</li>
				<li>Projet</li>
				<li>Tools</li>
				<li>Help</li>
			</ul>
		</div>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-07-10T01:15:00.000+02:00" pubdate>2011-07-10</time> 
		<span itemprop="name">Daniel Hagnoul</span> 
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>
		$(function(){
			/* curseur */
			var objMenuBarre = $(".menuBarre"),
				objCurseur = $(".menuCurseur"),
				objsLi = objMenuBarre.children("ul").children("li"),
				curseurHalfWidth = objCurseur.outerWidth()/2,
				startLeft = objCurseur.position().left,
				actifLeft = function(){
					// calcule la nouvelle position relative du curseur par rapport à l'élément actif
					return parseInt($(".menuActif").position().left + $(".menuActif").innerWidth()/2 
					                                                - startLeft - curseurHalfWidth, 10);
				},
				animLeft = function(item){
					// calcule la nouvelle position relative du curseur par rapport à l'élément survolé
					return parseInt($(item).position().left + $(item).innerWidth()/2 
					                                        - startLeft - curseurHalfWidth, 10);
				},
				initLeft = function(){
					// initialisation de la position du curseur
					objCurseur.css("left", actifLeft() + "px");
				};
 
			// animation du curseur pour rejoindre le li survolé
			objsLi.mouseenter(function(){
				objCurseur.stop(true, false).animate({left: animLeft(this) + 'px'});
			});
 
			// retour du curseur au dessus du li ayant la classe menuActif 
			objMenuBarre.mouseleave(function(){
				objCurseur.stop(true, false).animate({left: actifLeft() + 'px'});
			});
 
			// modification de l'attribution de la classe menuActif
			objsLi.click(function(){
				objsLi.removeClass('menuActif');
				$(this).addClass('menuActif');
				initLeft();
			});
 
			initLeft();
 
			/* jPicker : http://www.digitalmagicpro.com/jPicker/, outil pour choisir rapidement une couleur */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
			$(".conteneur").jPicker({window:{expandable:true,title:"jPicker : choissisez une couleur :",
			alphaSupport:true,position:{x:'screenCenter',y:'top'}}
			                 ,color:{ active:new $.jPicker.Color({ r: 210, g: 214, b: 98, a: 128 })}},
			function(color, context){var c = color.val("all");
			                         if (c){$("body").css("backgroundColor", "rgba(" +
			c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")");}});
		});
	</script>
</body>  
</html>
Créé le 16 octobre 2011  par SpaceFrog, danielhagnoul

[jQuery 1.6.2]

On utilise les méthodes setInterval et toggleClass pour appliquer alternativement l'effet CSS sur un élément du DOM. L'effet CSS et sa durée d'application (voir les options "class" et "speed") sont au choix de l'utilisateur.

L'utilisateur peut stopper le plugin Blinker en déclenchant l'événement "stopBlinker".

Toutes les options sont modifiables pour un usage particulier ou pour l'ensemble des usages.

 
Sélectionnez
// pour l'ensemble
$.fn.Blinker.defaults.stop = "suffit";
 
// pour un cas particulier
$(selecteur).Blinker({
   "class": "maClasse",
   "stop": "suffitEvent"
}):


Nota bene : "class" sans guillemets est un mot clé !


Plugin et exemple d'utilisation, voir les commentaires du code :

 
Sélectionnez
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery : plugin Blinker</title>
	<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Redressed&subset=latin&v2'>
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		body {background-color:rgba(255, 255, 86, 0.25); color:#000000; font-family:sans-serif; font-size:medium; 
				font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; 
		            background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
		footer {margin-left:36px; }
 
		/* Blinker */
		input {display:block; margin:6px; }
		.foo {
			-moz-transform: scale(2.50) rotate(11deg) translate(59px, 74px) skew(11deg, 0deg);
			-0-transform: scale(2.50) rotate(11deg) translate(59px, 74px) skew(11deg, 0deg);
			-webkit-transform: scale(2.50) rotate(11deg) translate(59px, 74px) skew(11deg, 0deg);
			-ms-transform: scale(2.50) rotate(11deg) translate(59px, 74px) skew(11deg, 0deg);
			transform: scale(2.50) rotate(11deg) translate(59px, 74px) skew(11deg, 0deg);
		}
		.bar {
			background-color:rgba(170, 255, 255, 0.25); color:#000000;
			zoom: 2;
		}
		#stopfoo, #stopbar {display: none; ]
	</style>
</head>
<body>
	<h1>plugin Blinker</h1>
	<section class="conteneur">
		<input id="launchfoo" type="button" value="appliquer le plugin sur foo" />
		<input id="stopfoo" type="button" value="stopper le plugin sur foo" />
		<input id="foo" value="id=foo" type="text" />
		<input id="launchbar" type="button" value="appliquer le plugin sur bar" />
		<input id="stopbar" type="button" value="stopper le plugin sur bar" />
		<input id="bar" value="id=bar" type="text" />
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-08-23T23:00:00.000+02:00" pubdate>2011-08-23</time> 
		<span itemprop="name">Daniel Hagnoul</span> 
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script>
		(function($){
			/*
				Blinker : un plugin qui applique un effet CSS, au choix de 
				l'utilisateur, pendant une durée indéterminée.
 
				On utilise les méthodes setInterval() et toggleClass() pour 
				appliquer alternativement l'effet CSS sur un élément du DOM.
 
				L'effet CSS et sa durée d'application (voir les options 
				"class" et "speed") sont au choix de l'utilisateur.
 
				L'utilisateur peut stopper le plugin Blinker en déclenchant 
				l'événement "stopBlinker".
 
				Toutes les options sont modifiables pour un usage particulier 
				ou pour l'ensemble des usages.
 
				Chaque sélecteur (item) utilise la méthode data() pour 
				conserver en mémoire la référence retournée par setInterval() 
				et la méthode bind() pour intercepter l'événement demandant 
				l'application de clearInterval()
			*/
			$.fn.Blinker = function(options){
				// options et méthode d'arrêt du plugin
				var opts = $.extend(true, {}, $.fn.Blinker.defaults, options),
					stop = function(self){
						clearInterval($(self).data("objInterval"));
						$(self).removeClass(opts.class);
						$(self).data("objInterval", "");
					};
 
				// si la classe par défaut n'existe pas dans la feuille de style, on la crée
				if ($("style").text().match("."+opts.class) === null){
					$("style").append("."+opts.class+" {background-color:red; color:white; )");
				}
 
				/*
					Pour chaque élément contenu dans le sélecteur, on
					toggle la classe opts.class pendant opts.speed
					millisecondes jusqu'à ce que l'utilisateur stoppe le
					plugin par un $(...).trigger(opts.stop).
				*/
				return this.each(function(i, item){
						$(item).data("objInterval",
							setInterval(function(){
								$(item).toggleClass(opts.class);
							}, opts.speed)
						);
 
						/*
							unbind indispensable pour ne pas intercepter
							le même événement plusieurs fois
						*/
						$(item).unbind(opts.stop).bind(opts.stop, function(){
							if ($(this).data("objInterval")){
								stop(this);
							}
						});
				});
			};
 
			$.fn.Blinker.defaults = {
				"class": "blinker", // classe par défaut
				"speed": 500, // vitesse d'application de toggleClass
				"stop": "stopBlinker" // non de l'événement déclenchant l'arrêt du plugin
			};
		})(jQuery);
 
		$(function(){
			$("#launchfoo").click(function(){
				$(this).css("display", "none");
				$("#stopfoo").css("display", "block");
 
				// déclenchement du plugin Blinker
				$("#foo").Blinker({
					"class": "foo",
					"speed": 2500
				});
			});
 
			$('#stopfoo').click(function(){
				$(this).css("display", "none");
				$("#launchfoo").css("display", "block");
 
				// arrêt du plugin Blinker
				$("#foo").trigger("stopBlinker");
			});
 
			$("#launchbar").click(function(){
				$(this).css("display", "none");
				$("#stopbar").css("display", "block");
 
				$("#bar").Blinker({
					"class": "bar",
					"speed": 1000
				});
			});
 
			$('#stopbar').click(function(){
				$(this).css("display", "none");
				$("#launchbar").css("display", "block");
 
				$("#bar").trigger("stopBlinker");
			});
		});
	</script>
</body>  
</html>
Créé le 16 octobre 2011  par SpaceFrog, danielhagnoul

Voici une proposition de plugin de slider minimaliste.

Le principe est simple : un ul et des li qui sont animés d'une translation vers la gauche par un setInterval. Une fois la translation terminée, le li est basculé en dernière position.
=> Les li se succèdent en boucle.
On peut ainsi faire défiler du texte ou des images.

Voici le code du plugin :

 
Sélectionnez
(function(SF){
	/* SpaceFrog's simplisitc Slider plugin
	 * Juste pour faire défiler des balises li et leur contenu de gauche à droite en boucle
	 */
	SF.fn.SF_SimpleSlider = function(options){
		/* en option la taille de la zone de défimement,
		* la vitesse des transitions
		* la durée de pause entre les transitions
		*/
		var defaults={sWidth:200,sHeight: 20,sSpeed: 2000, sPause:6000},
			pos=-defaults.sWidth,
			$this=SF(this);
 
		// Ajoute les options dans defaults (modifie defaults).
		SF.extend(defaults, options);
 
		//Encapsule le ul dasn un div (la fenetre de défilement)
		$this.wrap($("<div\/>").attr('id',"sHolder").css( {"border":"solid 1px grey",
		                                                   "border-bottom":"double 3px grey", 
							           "border-right":"double 3px grey",
							           "height":defaults.sHeight,
							           "width":defaults.sWidth,
							           "margin":0,
							           "padding":"0 5px",
							           "overflow":"hidden"}));
 
		//applique le style css aux li
		$this.children('li').css({"margin":"0 5px 0 0", 
		                          "padding":0,"border":0,
		                          "width":defaults.sWidth,
					  "height":defaults.sHeight,
					  "float":"left", 
					  "display":"inline-block"});
 
		//applique le style à l'ul
		$this.css({"margin":0, "padding":0, "border":0,
			   "width":defaults.sWidth*2, 
			   "list-style-position":"inside", 
			   "list-style-type":"none",
			   "display":"block"});
 
		//lance la rotation des lis
		setInterval(function(){
			$this.children(":eq(0)").animate( {"margin-left":-defaults.sWidth-10} , 
			                                     defaults.sSpeed, "swing",function(){
				$this.append($this.children(":eq(0)").css({"margin-left":0}));
			})
		}, defaults.sPause); // Temps de pause entre deux défilememnts
 
		return this;
	};
 })(jQuery);


Et voici son utilisation :

 
Sélectionnez
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	   
<title>Nouvelle page 1</title>
<style type="text/css">
#sfSlider {display:none;
           font-family:verdana;
           font-size:12px;}
 </style>
 
<script type='text/javascript' src='http://code.jquery.com/jquery.js'></script>
<script type='text/javascript'>
$(function(){
$('#sfSlider').SF_SimpleSlider({sWidth:400,sHeight:80})
})
</script>
</head>
<body>
 
<ul id="sfSlider">
	<li>
            <p>contenu 1 </p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porttitor 
			pretium tellus in hendrerit. Nunc in ante libero. 
        </li>
	<li> <p>contenu 2 </p>
            Cras vulputate massa ac nisi gravida in vestibulum dui tristique. 
			Pellentesque habitant morbi tristique senectus et netus.
        </li>
	<li> <p>contenu 3 </p>
            Cras vulputate massa ac nisi gravida in vestibulum dui tristique, 
			fames ac turpis egestas  et malesuada .  
        </li>
	<li> <p>contenu 4 </p>
            Pellentesque habitant morbi tristique senectus et netus et malesuada 
			fames ac turpis egestasfames ac turpis egestas. 
        </li>
	<li> <p ><strong>contenu 5</strong></p>
            Morbi lobortis enim in libero sodales cursus. Vestibulum non nisl nibh, 
			et viverra erat. Etiam ut sem eu urna sagittis porta vel.
        </li>
	<li> <p>contenu 6 </p>
            Mauris id orci neque. Ut rutrum tristique lacinia. Praesent elementum, 
			sem sed mattis facilisis, nibh nibh imperdiet augue.
        </li>
	<li><i>contenu 7</i><br/>
            Quis tortor vel dapibus magna tortor eleifend turpis. Aenean fringilla 
			urna eu nisi dictum ut egestas dolor suscipit. 
        </li>
	<li> <p>contenu 8 </p>
            Et après ce contenu-ci on recommence au premier contenu... !
        </li>
</ul>
</body>
</html>
Créé le 5 novembre 2011  par SpaceFrog

Ce script montre comment on peut manipuler une liste de li pour en faire une liste triée et ensuite une liste alphabétique.

 
Sélectionnez
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <title>Nouvelle page 1</title>
    <style type="text/css">
html, body {
      margin:0;
	padding:0;
	}
</style> 
<script type='text/javascript'>
// Transformation en liste triée
$( '#alphaIndex' ).html(
	$( '#alphaIndex li' ).get().sort( function( a, b ){ return (
		a.innerHTML.replace( /^\s*/, '').toLowerCase() >= b.innerHTML.replace( /^\s*/, '').toLowerCase()
	) ? 1 : -1; })
 
	/*
	 * Pas de ; final car il s'agit d'insérer une suite
	 * de <li>...</li> en HTML.
	 * La liste des "li" est incluse dans le tableau (array) généré
	 * par get() et trié par sort().
	 * L'array est interprété implicitement comme un htmlString,
	 * voir http://api.jquery.com/html/.
	 */ 
);
 
// Transformation en liste alphabétique
$( '#alphaIndex li' ).each( function(){
	// On sélectionne la première lettre, en majuscule
	var letter = $(this).text().match( /^\s*([a-z])/im )[1].toUpperCase();
 
	/*
	 * Si cette lettre n'est pas déjà dans la liste
	 * alphabétique, on crée l'en-tête de la sous-liste
	 * alphabétique.
	 */
	if ( $( "#_" + letter ).length == 0 ){
		$( '#alphaIndex' ).append(
			$( '<li/>' ).text( letter ).css({ "font-weight": "bold", "text-decoration": "underline" }),
			$( '<ul/>' ).attr('id', '_' + letter)
		);
	}
 
	// On ajoute les éléments "li" à la sous-liste
	$( '#_' + letter ).append( $(this) );
});
</script>
</head>
<body>
<ul id="alphaIndex">
   <li>xavier	</li>
   <li>Alexia</li>
   <li>bernard</li>
   <li>sophie</li>
   <li>Alexandre</li>
   <li>Franck</li>
   <li>Zoé</li>  
   <li>Philippe</li>   
   <li> Thierry</li>   
   <li>Paul</li>
   <li>   Francoise</li>
   <li> Pauline</li>
   <li>Jacques</li>
   <li>Pierre</li>
   <li>Michel</li>
   <li>michèle</li>   
   <li>micheline</li>   
   <li>Hector</li>
   <li>Ernest</li>
   <li>Philibert</li>
   <li>hubert</li>
   <li>david</li>
   <li>john</li>
   <li>mustapha</li>
   <li>mariette</li>
   <li>arielle</li>
   <li> thomas</li>
   <li>céline</li>
   <li>stuart</li>
   <li>fernand</li>
   <li>patrick</li>
   <li>tom</li>
   <li> suzanne</li>
   <li> hélène</li>
   <li> séverine</li>
   <li>roland</li>
   <li>walter</li>
   <li>sam</li>
   <li>franz</li>
   <li>victor</li>
   <li>maire-rose</li>
</ul>
</body>
</html>
Créé le 7 décembre 2011  par SpaceFrog, danielhagnoul

Comme vous devez le savoir, il est possible de fixer la durée que prendra un effet de transition.
La durée de cet effet est passée en paramètre, soit sous forme d'une valeur numérique (en millisecondes), soit sous forme d'une des trois valeurs prédéfinies : slow, default ou fast. Ces trois valeurs sont fixées dans la propriété speeds de l'objet jQuery.fx.

En réalité, si vous passez une chaîne de caractères comme paramètre, jQuery va inspecter la propriété speeds (qui est précisément un objet) pour vérifier la présence de cette valeur. Si elle n'est pas trouvée (ou si ce paramètre est omis), alors c'est la valeur par défaut qui est utilisée.

En regardant de plus près, on constate que si fast et slow sont bien des valeurs prédéfinies, default, en fait, ne l'est pas. C'est la propriété _default qui est renseignée, comme le montre le code suivant :

 
Sélectionnez
for(var prop in $.fx.speeds){
    console.log(prop + ' : ' + $.fx.speeds[prop]);
}
//slow : 600
//fast : 200
//_default : 400


A partir de là, il devient facile de fixer sa propre valeur par défaut ou d'autres valeurs prédéfinies :

 
Sélectionnez
jQuery.fx.speeds._default = 500;
jQuery.fx.speeds.xtraSlow = 1500;
jQuery.fx.speeds.soFast = 50;
Créé le 7 décembre 2011  par Bovino

Toutes les versions d'IE ne gèrent pas la semi transparence des images au format png.
Effectivement, le fadeIn et le fadeOut ne rendent pas un beau résultat.

Il faut alors appliquer à l'image le CSS suivant :

 
Sélectionnez
img {
   background: transparent;
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)" !important; /* IE8 */   
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF) !important;   /* IE6 & 7 */      
   zoom: 1;
}
Créé le 22 août 2012  par SpaceFrog

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2011 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.