FAQ jQuery
FAQ jQueryConsultez toutes les FAQ
Nombre d'auteurs : 12, nombre de questions : 46, dernière mise à jour : 15 juin 2021
Sommaire→Divers scripts utiles- Comment puis-je imposer une saisie monétaire dans un input ?
- Comment puis-je surligner des mots identiques ?
- Comment puis-je filtrer dynamiquement une table ?
- Comment puis-je interrompre une boucle each ?
- Comment puis-je ajuster une image à son conteneur ?
- Comment puis-je différer la fermeture d'un menu ?
- Menu minimaliste avec curseur animé
- Construire un plugin qui applique un effet CSS, au choix de l'utilisateur, pendant une durée indéterminée
- Réaliser un plugin de slider automatique
- Comment trier et classer des li dans un ul ?
- Comment fixer la vitesse par défaut d'un effet ?
- Comment appliquer un fadeIn ou fadeOut à une image png avec une semi transparence ?
[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 :
- http://fr.wikipedia.org/wiki/RegExpRegExp
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExpRegExp
- http://www.w3schools.com/jsref/jsref_obj_regexp.aspRegExp
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.
[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;"> </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;"> </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;"> </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.
À 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.
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>[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>
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>
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