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
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
Étant un grand utilisateur de jQuery (et je ne le cache pas ), c'est un bon petit tutoriel que tu nous proposes là, surtout l'exemple qui peut s'avérer utile
Avant toutes questions : Développement Web, (X)HTML, CSS, JavaScript, AJAX, ASP, Flash/Flex, Webmarketing, XML, PHP
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é:
Ici l'appel du plugin:
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 (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);
Et le code que je voudrai réaliser et qui ne marche pas pour l'instant:
Code : Sélectionner tout - Visualiser dans une fenêtre à part $("ul#select_types").imgDropDown({idSelect:"select_types" ,title:"Choix",selectEvent:traitement_liste_deroulante});
Je pense qu'il doit falloir modifier la definition de selectEvent mais je ne trouve pas comment.
Code : Sélectionner tout - Visualiser dans une fenêtre à part $("ul#select_types").imgDropDown({idSelect:"select_types" ,title:"Choix",selectEvent:traitement_liste_deroulante("mon_parametre")});
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 : 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 (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 :
Pouvez vous m'éclairer SVP.
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 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)'); };
Un grand merci à vous pour prendre connaissance de mon problème.
Utilises
Pour récupérer la valeur de l'élément sélectionné dans la liste déroulante
Code : Sélectionner tout - Visualiser dans une fenêtre à part $(".dropdownCell").attr("value")
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