[Article] Créer un plugin jQuery : une liste déroulante personnalisée

Version imprimable

30/03/2009, 08h56
khayyam90

[Article] Créer un plugin jQuery : une liste déroulante personnalisée

Bien le bonjour,

Cet article va vous présenter l'écriture d'un plugin pour jQuery, qui vous servira à développer des listes déroulantes personnalisées.

N'hésitez pas à me faire part de vos remarques/questions
Bonne lecture
16/04/2009, 14h23
Kerod

Étant un grand utilisateur de jQuery (et je ne le cache pas :aie:), c'est un bon petit tutoriel que tu nous proposes là, surtout l'exemple qui peut s'avérer utile

:merci:

Petit Retour

Bonjour, je te remerci pour ce super article.
Une petite question est-il possible lors de la definition des valeurs par defaut de faire comprendre que la fonction executé par selectEvent comprenne des arguments.

Voici le code du plugin très peu modifié:

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
(function($) {
//Définition du plugin
    $.fn.imgDropDown = function(options) {   
 
        // définition des paramètres par défaut
        var defaults = {
			idSelect:"",
            title: "",
           selectEvent: null
        };   
        // mélange des paramètres fournis et des paramètres par défaut
        var opts = $.extend(defaults, options);       
 
        // création d'une liste
        function createList(f){
            // créer la première zone, affichant l'option sélectionnée
            var cell = $('<div class="dropdownCell" alt="0" id='+opts.idSelect+' onclick="show_hide_border(\'click_v\');" onmouseover="show_hide_border(\'mouse_v\');" onmouseout="show_hide_border(\'mouse_u\');">' + opts.title + '</div>');
 
            // créer la seconde zone, affichant toutes les options
            var dropdown = $('<div class="dropdownPanel" onclick="show_hide_border(\'click_b\');"></div>');               
 
            $(this).find("li").each(function(){
                dropdown.append($('<div class="dropdownOpt"></div>')
                    .click(onSelect)
                    .attr("value", $(this).attr("value"))
                    .append($(this).html())       
                    .hover(function(){$(this).addClass("dropdownOptSelected");},
                           function(){$(this).removeClass("dropdownOptSelected");})
                );
            });
 
            // on masque la zone déroulante
            dropdown.hide();
            $.data(cell, "visible", false);
 
            // on remplace la balise ul par notre liste personnalisée
            $(this).after(dropdown);
            $(this).after(cell);
            $(this).remove();
 
            // on positionne l'évènement de déroulage de la liste
            cell.click(function(){       
                // si la liste est déroulée
                if ($.data(cell, "visible")){
                    dropdown.slideUp("fast");
                    $.data(cell, "visible", false);
                }else{
                    dropdown.slideDown("fast");
                    $.data(cell, "visible", true);
                }
            });
 
            // fonction appelée à chaque sélection d'un élément
            function onSelect(){           
                cell.html($(this).html());
                cell.attr("value", $(this).attr("value"));
                dropdown.slideUp("fast");
 
                $.data(cell, "visible", false);
 
                // appel d'une fonction personnalisée
                if (opts.selectEvent)
                    opts.selectEvent($(this));
            }               
        }
 
        // création d'une liste déroulante personnalisée pour tous les éléments de l'objet jQuery
        $(this).each(createList);   
 
        // interface fluide
        return $(this);
    };   
})(jQuery);

Ici l'appel du plugin:

Code:

$("ul#select_types").imgDropDown({idSelect:"select_types" ,title:"Choix",selectEvent:traitement_liste_deroulante});

Et le code que je voudrai réaliser et qui ne marche pas pour l'instant:

Code:

$("ul#select_types").imgDropDown({idSelect:"select_types" ,title:"Choix",selectEvent:traitement_liste_deroulante("mon_parametre")});

Je pense qu'il doit falloir modifier la definition de selectEvent mais je ne trouve pas comment.
Merci de votre réponse.

Bonjour,

J'ai un problème très gênant avec une liste déroulante jquery.

J'utilise également AJAX dans mon code qui est supposé me renvoyer 2 variables sur une page cible php.
Or je n'en reçois qu'une seule, il me manque celle que je sélectionne dans ma liste déroulante.

Voici le code JavaScript qui me définit ma liste déroulante :

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
(function($) {
//Définition du plugin
	$.fn.imgDropDown = function(options) {  
		// définition des paramètres par défaut
		var defaults = {
			title: "",
			selectEvent: null
		};   
		// mélange des paramètres fournis et des paramètres par défaut
		var opts = $.extend(defaults, options);       
 
		// création d'une liste
		function createList(f){
			// créer la première zone, affichant l'option sélectionnée
			var cell = $('<div class="dropdownCell">' + opts.title + '</div>');
 
			// créer la seconde zone, affichant toutes les options
			var dropdown = $('<div class="dropdownPanel"></div>');               
 
			$(this).find("option").each(function(){
				dropdown.append($('<div class="dropdownOpt"></div>')
					.click(onSelect)
					.attr("value", $(this).attr("value"))
					.append($(this).html())       
					.hover(function(){$(this).addClass("dropdownOptSelected");},
						   function(){$(this).removeClass("dropdownOptSelected");})
				);
			});
			// on masque la zone déroulante
			dropdown.hide();
			$.data(cell, "visible", false);
 
			// on remplace la balise ul par notre liste personnalisée
			$(this).after(dropdown);
			$(this).after(cell);
			$(this).remove();
 
			// on positionne l'évènement de déroulage de la liste
			cell.click(function(){       
				// si la liste est déroulée
				if ($.data(cell, "visible")){
					dropdown.slideUp("fast");
					$.data(cell, "visible", false);
				}else{
					dropdown.slideDown("fast");
					$.data(cell, "visible", true);
				}
			});
 
			// fonction appelée à chaque sélection d'un élément
			function onSelect(){  
 
				cell.html($(this).html());
				cell.attr("value", $(this).attr("value"));
				dropdown.slideUp("fast");
 
				$.data(cell, "visible", false);
 
				var id_vil = $(this).val();
 
				$('body').css('background-image','url(fond/' + id_vil + '.jpg)');
 
				// appel d'une fonction personnalisée
				if (opts.selectEvent)
					opts.selectEvent($(this));
			}  
 
		}
 
		// création d'une liste déroulante personnalisée pour tous les éléments de l'objet jQuery
		$(this).each(createList);   
		// interface fluide
		return $(this);
	};   
})(jQuery);

Et enfin mon code ajax supposé me renvoyé les 2 variables idVille et idCateg, or je ne reçois que idCateg, j'ai donc un réel doute sur la class ou l'id que j'indique à idVille :

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
function AffichageCarrouselAjax() {
 
		 		   // alert('url(fond/' + idselect + '.jpg)');
				   		   // alert('TEST');
 
 
           var idVille = $('.dropdownOpt option:selected').val();
           var idCateg = $('#categ input:checked').val();
		   // alert(':' + idCateg + ':' + idCateg );
		   		   // alert(':' + idVille + ':' + idCateg );
 
 
           $.ajax({
             type: "POST",
             url: "_inclus/afficher-carrousel-ville-ajax.php",
             data: "idville="+idVille+"&idcateg="+idCateg,
             dataType: "html",
             cache: false,
             success: function(html) {
               $("#idcarrousel").html(html);linkTooltips();
               return false; // arrêt de la propagation de l'évènement dans le DOM
             }
 
           });
			$('body').css('background-image','url(fond/' + idVille + '.jpg)');
 
 
         };

Pouvez vous m'éclairer SVP.

Un grand merci à vous pour prendre connaissance de mon problème.

20/01/2012, 19h46
ambe_fr

Utilises

Code:

$(".dropdownCell").attr("value")

Pour récupérer la valeur de l'élément sélectionné dans la liste déroulante