Ici ?
Envoyé par Faq jQuery
D'ailleurs, Daniel, que dois-je faire avec les messages 18 et 19 de ce thread ? Ils sont à intégrer dans la Faq ?
Ici ?
Envoyé par Faq jQuery
D'ailleurs, Daniel, que dois-je faire avec les messages 18 et 19 de ce thread ? Ils sont à intégrer dans la Faq ?
Bonsoir
@mathieu et @vermine :
Pour moi, il y a une différence évidente entre "Avant X" et "Avec X", non ?
Exemple : "Avant Martine, je ..." et "Avec Martine, je ..."
@toutes et tous :
S'il vous plaît, relire le premier message de "Contribuez à la FAQ jQuery !" et de "FAQ jQuery : boîte à idées, suggestions, et petites contributions", avant de poster un nouveau message.
"FAQ jQuery : boîte à idées, suggestions, et petites contributions" sert à poster des idées et à travailler sur les sujets retenus.
C'est seulement lorsqu'il y a consensus sur le contenu d'une contribution entre les auteurs travaillant un sujet (procédure décrite dans le premier message de "FAQ jQuery : boîte à idées, suggestions, et petites contributions") que l'on poste une contribution dans la discussion "Contribuez à la FAQ jQuery !".
Bien entendu, on peut poster directement une contribution finale dans "Contribuez à la FAQ jQuery !" si on estime qu'elle est aboutie. Les discussions sur cette proposition de contribution se font toujours dans "FAQ jQuery : boîte à idées, suggestions, et petites contributions".
@vermine :
Ne confondons pas vitesse et précipitation , je pense qu'une nouvelle Q/R dans la FAQ doit être le résultat d'un travail en deux étapes, au minimum.
Tu ne dois donc jamais reprendre directement le contenu de "FAQ jQuery : boîte à idées, suggestions, et petites contributions" dans la FAQ jQuery.
J'aimerais aussi que tu n'ajoutes pas directement un nouvelle Q/R dans la FAQ sans l'avoir postée dans "Contribuez à la FAQ jQuery !" et d'avoir attendu un minimum de 8 jours pour laisser le temps à chacun de la lire et de poster ses critiques et propositions de modification dans "FAQ jQuery : boîte à idées, suggestions, et petites contributions"
J'aimerais aussi que tu ne reprennes les contributions de "Contribuez à la FAQ jQuery !" qu'après un échange de MP entre nous, à cause des mises à jour dues à l'évolution rapide de jQuery par exemple.
On avait convenu d'attendre d'avoir un paquet (5 à 10) de nouvelles contributions dans "Contribuez à la FAQ jQuery !" pour mettre à jour la FAQ jQuery.
Oups...
Au temps pour moi
[FAIT] Cela peut peut-être sembler idiot mais je trouve qu'il pourrait être très utile de répondre à la question "Où puis-je trouver la documentation en ligne?" tant pour JQuery que pour ses principaux plugins. Parfois c'est simple, parfois ça l'est moins, parfois même il y a plus d'une doc dont certaines sont trop souvent erronées.
[FAIT] Bonjour
Concerne : http://www.developpez.net/forums/d89...y/#post5932744
Bonne idée de Q/R, mais...
Ce passage ne me convient pas, en effet, même si la documentation de jQuery n'est pas à jour, il n'y a officiellement plus de plugins officiels.Du côté des plugins officiels, voici une liste non exhaustive des liens de documentation :
jQuery-cookie : https://github.com/carhartl/jquery-cookie
jQuery-tmpl : http://api.jquery.com/jquery.tmpl/
Mais il y a des plugins "soutenus par" (anciennement dits "officiels") voir la liste dans http://www.developpez.net/forums/d10...iciels-jquery/
Il serait donc utile de corriger ta proposition de Q/R en fonction des dernières décisions de jQuery. De donner un lien vers chacun de ces plugins "soutenus par" à l'exception des plugins Microsoft qui sont en beta1. De plus jQuery-tmpl va être retiré de la documentation jQuery voir le lien ci-dessus.
Pour le titre, il n'est pas inutile de dire qu'il s'agit de la documentation officielle et en anglais.
Suggestion : Où puis-je trouver la documentation officielle (en anglais) en ligne ?
[FAIT]
Petite Contribution : Menu minimaliste
Voici un petit script pour un menu avec pointeur animé:
l'image du curseur jointe est à placer dans un répertoire Pics
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- <script type="text/javascript" src="JQScripts/jquery-1.4.3.min.js"></script>--> <title>Nouvelle page 1</title> <script type="text/javascript"> $(function(){ //initialisation de la position du curseur $('#menucursor').css({left:$('.active').position().left+50+'px'}) //animation du curseur pour rejoindre le li survolé $(".menu li").hover(function(){ $('#menucursor').stop(true,false).animate({left: $(this).position().left+50+'px'}) }) //retour du cursor au dessu sdu li class active $(".menu").mouseleave(function(){ $('#menucursor').stop(true,false).animate({left:$('.active').position().left+50+'px'}) }) //modification de la classe active attribuée $(".menu li").click(function(){ $(".menu li").removeClass('active'); $(this).addClass('active'); }) }) </script> <style type="text/css"> html, body { width:100%} body { margin:0; padding; } #menubar { position: relative; border:0; width:750px; margin:0 auto; } .menu { width:750px; border:0;} .menu li { position :relative; text-align:center; border:0; width: 150px; float:left; cursor:pointer; list-style:none; } #menucursor { position: relative; border:0; top:15px; } </style> </head> <body> <div id="menubar"> <img id="menucursor" src="Pics/cursor.gif" /> <ul class="menu"> <li>menu1</li> <li class="active">menu2</li> <li>menu3</li> <li>menu4</li> <li>menu5</li> </ul> </div> </body> </html>
[danielhagnoul, 2011-07-10]
Proposition pour "Menu minimaliste avec un pointeur animé' de SpaceFrog.
Généralisation du code jQuery (permettre l'utilisation d'une autre image comme curseur, se passer du +50px) et amélioration du CSS.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94 <!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'> <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; } </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> $(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 cursor 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(); }); </script> </body> </html>
Dans la série "je manipule les styles dynamiquement", voici un petit plugin que j'ai appelé Blinker car à la base c'est sur une idée de Toine.pro, qui cherchait à faire clignoter des éléments.
La petite page de démo :
http://sk-martin.developpez.com/Arti...ementBlink.htm
le code du plugin:
[edit]
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71 <script type="text/javascript"> //<![CDATA[ /* * Yet another one dreamt by SpaceFrog * * L'auteur décline toutes responsabilités ! * ------------------------------------------ * * Code by SpaceFrog * Sur une idée de Toine.Pro * * Plugin jquery.Blinker-1.0.1.js * * Version v1.0.0 2011-07-29 * ------------------------------------------ * Usage : * Pour lancer * $( [selecteur] ).Blinker( [paramètres]) * selecteur = selecteur jquery (id class tagname ...) * paramètre = json de propriétés css * $( [selecteur] ).Blinker( {stop:true}) * Pour Stopper * * ------------------------------------------*/ (function($) { var increment =0; $('head').append($('<style type="text/css" id="BlinkersStyles"></style>')); $.fn.Blinker = function(params) { defaut={ BlinkStyle: {"color": "#ff0000"}, speed: 500, // vitesse de clignotement stop: false }; //modification des parmètres this.opts= $.extend(defaut,params); //arret if(this.opts.stop){ clearInterval( $(this).data('timer') ); $(this).data('timer',false) $(this).removeClass('blink'+$(this).data('fixclass')); return $(this); } if($(this).data('timer') && !this.opts.stop ){return true;} //init if(!$(this).data('blinked')){ $(this).data('fixclass',++increment) ; //this.fixrule =++increment //$('*').index($(this)); } //creation des rules css (classes) if(!$(this).data('blinked')){ var newstyletext = '\n.blink'+$(this).data('fixclass')+'{\n'; for(blinkstyle in this.opts.BlinkStyle){ newstyletext+=blinkstyle+':'+this.opts.BlinkStyle[blinkstyle]+' !important;\n'; } newstyletext+='}\n'; $('#BlinkersStyles').append(newstyletext); $(this).data('blinked',$(this).data('blinked')+1); } //code du blink alterner le style var Blinkspeed=this.opts.speed; var elem=$(this); $(this).data ('timer', setInterval( function(){ elem.toggleClass('blink'+elem.data('fixclass'), !elem.hasClass('blink'+elem.data('fixclass'))) }, Blinkspeed) ); } return $(this); })(window.jQuery)
rajout d'un petit oubli : le return $(this) afin d'assurer l'enchainement des instructions ...
par exemple le dernier bouton de la page de démo:
Code : Sélectionner tout - Visualiser dans une fenêtre à part onclick="$(this).Blinker({stop:true}).val('OUF !!!')"
[edit]
Une petite rationalisation du plugin qui ne créé plus qu'une seule balisie script pour y ajouter tous les styles d'alternance.
(a noter que les \n dans le texte des styles sont superfux et ne sont là que pour la lisibilité du code généré )
exemple de style généré:chaque classe étant rattachée à un objet ou un groupe d'objet pour l'alternance de style
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 <style type="text/css" id="BlinkersStyles"> .blink1{ background-position:0 -59px !important; } .blink2{ font-style:italic !important; color:red !important; font-size:12px !important; } .blink3{ font-style:italic !important; color:red !important; font-size:12px !important; } .blink4{ backgroundColor:red !important; color:white !important; } .blink5{ border:outset 3px gold !important; } .blink6{ font-style:italic !important; color:red !important; font-size:12px !important; } .blink7{ visibility:hidden !important; } .blink8{ font-style:italic !important; color:red !important; font-size:12px !important; } .blink9{ font-style:italic !important; color:red !important; font-size:12px !important; } </style>
Dis-moi, c'est pas vrai à chaque fois quand même ?Envoyé par SpaceFrog
Sinon, très sympa les effets, vintage à souhait... histoire d'alimenter les worst of des site 80's
Oui ben chui pas graphiste ^^ j'ai pris les premières couleurs qui me sont tombées sous sourisSinon, très sympa les effets, vintage à souhait... histoire d'alimenter les worst of des site 80's
Juste pour te faire plaisir Beef j'ai rajouté un bouton en bas de page de démo avec un look un peu plus "moderne" ...
Sinon si ça peut te rassurer, non celles là je ne les ai pas rêvées. C'est juste un copier coller des commentaires des autres ^^
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager