[Historique] FAQ jQuery : boîte à idées, suggestions, et petites contributions.

Version imprimable

Voir 40 message(s) de cette discussion en une page

18/03/2011, 14h49
vermine

Ici ?

Citation:

Envoyé par Faq jQuery

Avant jQuery 1.5, j'utilisais et je recommandais l'usage de la méthode de Mike Alsup. On peut voir des exemples de plugin écrits avec cette méthode sur Mon cahier d'exercices sur jQuery.

Avec jQuery 1.5, il est recommandé d'utiliser une copie de jQuery afin de protéger l'intégrité et l'espace de nom de l'original.

D'ailleurs, Daniel, que dois-je faire avec les messages 18 et 19 de ce thread ? Ils sont à intégrer dans la Faq ?
18/03/2011, 22h07
danielhagnoul

Citation:

Envoyé par vermine

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 ..." :mouarf:

@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.
18/03/2011, 22h24
gwinyam

Oups...:mrgreen:
Au temps pour moi;)
21/04/2011, 23h04
FrankOVD

[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.
22/04/2011, 11h02
danielhagnoul

[FAIT] Bonjour

Concerne : http://www.developpez.net/forums/d89...y/#post5932744

Bonne idée de Q/R, mais...

Citation:

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/

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.

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 ?

1 pièce(s) jointe(s)

[FAIT]

Petite Contribution : Menu minimaliste

Voici un petit script pour un menu avec pointeur animé:

Code:

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>

l'image du curseur jointe est à placer dans un répertoire Pics

[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:

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>

Plugin Blinker => faire alterner deux styles en itération

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:

Code:

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)

[edit]
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:

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é:

Code:

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>

chaque classe étant rattachée à un objet ou un groupe d'objet pour l'alternance de style

29/07/2011, 01h13
danielhagnoul

[FAIT] Construire un plugin qui applique un effet CSS, au choix de l'utilisateur, pendant une durée indéterminée
29/07/2011, 08h01
Bovino

Citation:

Envoyé par SpaceFrog

Yet another one dreamt by SpaceFrog

Dis-moi, c'est pas vrai à chaque fois quand même ? 8O

Sinon, très sympa les effets, vintage à souhait... histoire d'alimenter les worst of des site 80's :aie:
29/07/2011, 08h36
SpaceFrog

Citation:

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 souris :(

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" ... :langue:

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 ^^

Voir 40 message(s) de cette discussion en une page