IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

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


Sujet :

jQuery

  1. #1
    Rédacteur

    Avatar de khayyam90
    Homme Profil pro
    Architecte de système d’information
    Inscrit en
    Janvier 2004
    Messages
    10 369
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Architecte de système d’information

    Informations forums :
    Inscription : Janvier 2004
    Messages : 10 369
    Points : 40 164
    Points
    40 164
    Par défaut [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

  2. #2
    Inactif  
    Avatar de Kerod
    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    11 672
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2004
    Messages : 11 672
    Points : 20 778
    Points
    20 778
    Par défaut
    É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


  3. #3
    Membre à l'essai
    Profil pro
    Inscrit en
    Septembre 2009
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2009
    Messages : 14
    Points : 11
    Points
    11
    Par défaut 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 : 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);
    Ici l'appel du plugin:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("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 : Sélectionner tout - Visualiser dans une fenêtre à part
    $("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.

  4. #4
    Membre à l'essai
    Inscrit en
    Décembre 2008
    Messages
    109
    Détails du profil
    Informations forums :
    Inscription : Décembre 2008
    Messages : 109
    Points : 21
    Points
    21
    Par défaut
    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 :


    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)');
     
     
             };
    Pouvez vous m'éclairer SVP.

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

  5. #5
    Nouveau membre du Club
    Inscrit en
    Septembre 2006
    Messages
    48
    Détails du profil
    Informations forums :
    Inscription : Septembre 2006
    Messages : 48
    Points : 36
    Points
    36
    Par défaut
    Utilises

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(".dropdownCell").attr("value")
    Pour récupérer la valeur de l'élément sélectionné dans la liste déroulante

Discussions similaires

  1. Réponses: 0
    Dernier message: 23/06/2014, 12h21
  2. Créer une liste déroulante avec jquery et json
    Par beegees dans le forum jQuery
    Réponses: 2
    Dernier message: 30/04/2012, 12h46
  3. [VB6]Créer une liste déroulante dans une dataGrid
    Par mcay dans le forum VB 6 et antérieur
    Réponses: 2
    Dernier message: 11/05/2006, 10h32
  4. Réponses: 3
    Dernier message: 20/02/2006, 19h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo