mSelect : Plugin Jquery pour réaliser des listes html personnalisées

4 Avr 2010 Jquery |

Le plugin est passé en version 1.4.2

Le plugin et la documentation complète est disponible sur : http://www.le-pret-a-surfer.com/mSelect/

mSelect est un plugin qui permet de personnaliser totalement l’apparence d’une liste de formulaire (select). Se qui permet en css de personnaliser la boite, la flèche et chaque option. Le plugin mSelect permet aussi de faire une boite de sélection enrichie en html.

Utilisation sur un élément html : select

Coté html :

<select name="selectHtml"> <option value="1">Demo 1</option> <option value="2">Demo 2</option> <option value="3">Demo 3</option> </select>

Coté javascript :

 $(document).ready(function() {
$('select').mSelect();
});

Utilisation sur une liste avec bouton radio

Coté html :

<ul id="demo">
    <li><input id="ok1" type="radio" name="liRadio" value="ok" /> <label for="ok1">Ok</label></li>
    <li><input id="ok2" type="radio" name="liRadio" value="okStr" checked="checked" /> <label for="ok2">ok <strong>Ok strong</strong></label></li>
    <li><input id="ok3" type="radio" name="liRadio" value="okEm" /> <label for="ok3">ok <em>Ok Em</em></label></li>
    <li><input id="ok4" type="radio" name="liRadio" value="okCoul" /> <label for="ok4">Ok <span style="color: #900;">Couleur</span></label></li>
</ul>

Coté javascript :

 $(document).ready(function() {
$('#demo').mSelect();
});

Caractéristique du plugin

  • L’élément select ou ul sera entièrement remplacé par la nouvelle interface
  • L’attribut name de l’élément select ou input est conservé
  • Les attributs value sont conservés, si ils n’existent pas ils sont crées avec le contenu texte de l’élément option ou label
  • L’attribut id de l’élément select ou ul est conservé
  • Les attributs class appliqués aux éléments option ou li sont conservés
  • Si un élément a un attribut selected ou checked il est conservé
  • Si fireBug est activé les erreurs sont affichées dans la console
  • Développé avec jQuery 1.42, le plugin utilise des fonctions de la version 1.4
  • Le script a été essayé sur quelques navigateurs :
    • Navigateur compatible : FireFox 3.6, Internet Explorer 8, Google chrome 3, Safari 4, Safari iPhone …
    • Navigateur incompatible : Aucun testé

    Si vous avez la possibilité de tester le plugin sur d’autre navigateur ou d’autre version n’hésitez pas à nous faire part de vos résultats.

Personnalisation en CSS des listes formulaire

Class : mSelect

Le conteneur général de la liste, c’est un élément div en display inline-block.

Class : mSelected

Le conteneur de l’option sélectionne qui s’affiche toujours à l’intérieur de mSelect, c’est un élément div.

Class : mFleche

Element div permettant de personnalisé la flèche qui indique à l’utilisateur la possibilité de déployer la liste.

Class : mOption

Conteneur d’une option, ces éléments sont des div en position absolue avec le curseur main, les informations top et left sont renseignées à chaque ouverture de la liste

Options du plugin

defaut : Message par défaut (String)

Message par défaut quand aucune option n’est sélectionné.

Par défaut vide.

radioHide : Afficher les éléments radio (Boolean)

Si true affiche les éléments radio dans les options, false pour cacher

Par défaut : false

eventClick : événement au click (Function(value,html))

Fonction lancer au clique sur une une option.

This : élément div qui à recu le click

Value : Valeur de l’option sélectionne

Html : Html de l’option séléctionné

Par défaut : null

<ul id="demo">
    <li><input id="ok2" type="radio" name="liRadio" value="okStr" checked="checked" /> <label for="ok2">ok <strong>Ok strong</strong></label></li>
</ul>
 $(document).ready(function() {

$('#demo').mSelect({
eventClick:function(value,html) {
alert(value); // retourne la valeur de l'option sur le quel le visiteur à cliqué. Exemple : "okStr"
alert(this); // retourne l'objet div sur le quel l'utilisateur à cliqué
alert(html); // retourne le html (String) de l'option sur la quel le visiteur à cliqué. Exemple : "ok <strong>Ok strong</strong>"

}
});
});

eventOpen : événement à l’ouverture (Function(value,html))

Fonction lancer à l’ouverture de la liste.

  • This : élément div principale
  • Value : Valeur de l’option sélectionne
  • Html : Html de l’option sélectionné

Par défaut : null

eventClose : événement à la fermeture (Function(value,html)

Fonction lancer à la fermeture de la liste, même si il n’y pas de changer de valeur.

  • This : élément div principale.
  • Value : Valeur de l’option sélectionne
  • Html : Html de l’option sélectionné

Par défaut : null

Essayer et télécharger le plugin

Demo
Télécharger : Version de production et version de développement

Change Log

Version 1.1 : 15 avril 2010

  • Ajout des options : eventClick, eventOpen, eventClose
  • Correction mineur

Version 1.0 : 4 avril 2010

Étiquettes : , , , ,

34 Comments

  • starker-xp dit :

    bonjour, le plugin est très utile mais je n’arrive pas à utiliser les options du plugin eventClick()
    débutant en javascript et jquery et ne sachant pas trop quoi chercher. Et t’il possible d’avoir un exemple plus concret ?

    merci d’avance

  • admin dit :

    J’ai modifier le poste en y ajoutant un exemple. En espérant que cela t’aidera.

    Cordialement

  • starker-xp dit :

    C’est parfait, merci beaucoup.
    Plugin très pratique et simple sinon ^^

  • Mag dit :

    Bonjour,

    Est-il possible d’ajouter un scroll et de limiter le nombre de ligne affichée ?

    Merci 😉

  • admin dit :

    C’est prévu mais je manque de temps pour le mettre en place :p L’idéal est que l’un de mes projets pro en ai besoin 🙂

  • Mag dit :

    Ok, je reste à l’affût ^^
    Bonne continuation 😉

  • apocalypse dit :

    Bonjour,

    Excellent plugin et très simple à utiliser, merci :).
    Par contre petit bémole, pas de limite dans la liste : une liste de 100 options sans scroll :(.

    J’aurai tout de même une question : comment faire pour récupérer la valeur des différentes liste ?

    J’ai essayé la même méthode utilisée lors d’une liste html simple :
    sel = document.getElementById(‘type’);
    id_type = sel.options[sel.selectedIndex].value;

    Cependant rien n’y fait…

  • admin dit :

    Bonjour,

    oui le scroll est dans ma liste des choses à faire 🙂

    Pour récupérer des valeurs, faut savoir que le plugin remplace la liste d’origine par une batterie de div donc voici l’arborescence

    div class=mSelect style=display: inline-block id=exemple
    + div class=mFleche
    + div class=mSelected
    + + Teste 1
    + div class=mOption
    + + input style=display: none; value=## class=mRadio name=## type=radio
    + + Teste 1
    + div class=mOption
    + + input style=display: none; value=## class=mRadio name=## type=radio
    + + Teste 2

    du coup en en jquery :
    $(‘#exemple input[checked= »checked »]’).val()

  • Agia3D dit :

    Bonjour admin 🙂

    Dans un projet que je développe actuellement, j’ai eu besoin d’une solution comme tu proposes là. Dans l’état actuel des choses, je vais me débrouiller avec le script en l’état, mais je serais également intéressé par un scroll dans les choix.

    Donc j’ai cherché à le faire. Mon niveau en jQuery n’est pas du tout au top. J’ai réussi à le faire, mais des bugs subsistent.

    Si jamais tu serais intéressé par mon début de brouillon (faut dire ce qu’il est), n’hésite pas à me contacter.

    En tout cas très bon script ! et très utile 😀

  • dufdufdam dit :

    Merci beaucoup pour ce plugin fort sympathique et les informations qui sont fournies avec, cependant ta solution :$(‘#exemple input[checked= »checked »]‘).val() ne marche que pour la 1ère valeur de ma liste. Dès que j’en sélectionne une autre et que je veux l’afficher dans un alert il me met « undefined ». J’ai trouvé une astuce qui consiste à afficher le contenu de la classe mSelected : $(‘#exemple .mSelected’).text().

  • Sophie dit :

    Bonjour

    Bravo pour ce plugin.
    Juste un petit push pour savoir si la gestion du scroll n’aurait pas été mise en place depuis décembre…car jai une liste de plus de 99 items.
    Merci.

  • admin dit :

    Je me suis fait submerger par le boulot et j’ai pas pu mettre en place cette fonctionnalité qui commence à devenir urgente 😉

  • Sophie dit :

    Bonjour
    Merci pour l’info.
    Tant mieux si vous avez plein de travail, c’est mérité.
    Je ne suis pas contre vous passer commande pro pour cette amélioration dont j’ai vraiment besoin mais je ne sais pas comment vous contacter en direct.

    Bien à vous
    Sophie

  • admin dit :

    La prochaine version (ainsi que la nouvelle doc) sont disponible ici : http://www.le-pret-a-surfer.com/mSelected/

    Deux nouveautés :
    – la scroll bar (personnalisable)
    – la méthode disable

    Un amélioration du code !

    Et surtout une vrai doc 😀
    je fais un article et un jolie pactage cette aprem !

  • Sophie dit :

    Génial !!!
    Moi qui dois livrer mon travail demain, c’est absolument génial.
    Je guette avec attention et encore bravo.

  • Sophie dit :

    Bonjour

    Un grand merci.
    Je viens de l’installer sur ma page. Tout va très bien tant qu’on ne dépasse pas le nombre d’items visibles (nbVisible:6,).
    On dirait que cela double la liste.
    Sur firebug, on voit clairement la 1° liste d’items sous l’ancien format puis la 2° liste d’items avec apparition des scrolls.
    Sur la page également, on voit les deux listes se superposer.
    Avez-vous essayer de dépasser les 6 items de votre côté ?
    Merci.

  • Sophie dit :

    Pardon de revenir vers vous encore
    Peut-être cela peut-il vous aider.
    Si on utilise le fichier jquery.mSelect.min.js, voici le détail de l’erreur :
    Message : Cet objet ne gère pas cette propriété ou cette méthode
    Ligne : 1
    Caractère : 3213
    Code : 0
    URI : […]/js/jquery.mSelect.min.js
    et le problème n’apparaît que pour les listes items plus longues que la valeur indiquée dans nbVisible

    Si on utilise jquery.mSelect.js
    Message : Message : Cet objet ne gère pas cette propriété ou cette méthode
    Ligne : 195
    Caractère : 3
    Code : 0
    URI : URI : […]/js/jquery.mSelect.js
    et là, le problème apparaît dès la 1° liste d’items qu’elle que soit sa longueur d’items.

    J’ai essayé avec jquery-1.4.2.js et jquery-1.6.1.min.js et le problème est le même.

  • Vincent dit :

    Bonjour,

    D’abord merci pour ce code.

    Mais j’ai le même problème que Sophie. Lorsqu’on ne dépasse pas le nbr d’item, ça marche. Mais sinon voici l’erreur :

    Erreur : $objMs.children(« .mScrallBar »).css({position: « absolute »}).hide().unbind(« click »).bind(« click », function (event) {event.stopPropagation();}).children(« .mScrollZone »).outerHeight(hauteurScroll).children is not a function
    Fichier Source : jquery.mSelect.js
    Ligne : 202

    Je vais essayer de résoudre mon problème mais si quelqu’un a une idée, je suis preneur.

  • Vincent dit :

    Re.

    Je viens de trouver. 😉

    Ma version de jquery-ui n’etait pas à jour. J’ai mis la version 1.8 et ça marche.

    Sophie, je pense que ça doit être le même problème.

    Encore merci.

    Bonne journée

  • admin dit :

    Bonjour je suis pas chez moi jusqu’a lundi … Je suis étonné par la dépendance à jquery ui … Je ferrai des testes lundi pour corrigé cela !

  • admin dit :

    Ps : sur la demo y a des exemple de longue liste ( dans l’onglet option puis nbExemple )

  • admin dit :

    Version 1.3 sur http://plugins.jquery.com/project/mSelect avec :
    Ajout d’une class mCurrent sur l’option sélectionné
    Correction du bug : mSelect plante en l’absence de jQuery-ui 1.8
    Correction du bug : variable html de l’événement click manquante
    Optimisation : réduction du nombre d’écouteur.

  • Sophie dit :

    C’est génial !!! Tout fonctionne à merveille.
    Parfait. Bravo et merci pour votre réactivité.

  • bluesky34 dit :

    Tout simplement magnifique, aucun bug.

    Mais si je veux gérer deux évènements eventOpen et eventClick en même temps je fais comment?

  • admin dit :

    Bonjour,

    Toutes les options et événements peuvent se cumuler.

    $(‘#demo’).mSelect({
    eventClick:function(value,html) { },
    eventOpen:function(value,html) { }
    });

  • bluesky34 dit :

    Génial! merci beaucoup, ça fonctionne 🙂

  • Tita dit :

    eventClick ne marche pas chez moi. Je suis allé sur le site « http://www.le-pret-a-surfer.com/mSelect/ » pour voir la démo mais ça n’a pas l’air de fonctionner non plus, même après avoir changé de navigateur.

  • admin dit :

    Il me Faudrai les noms et versions des navigateurs utilisés et du système. Je regarderai je pense en fin de journée.

  • Tita dit :

    La console de firebug dit:
    « second argument to Function.prototype.apply must be an array jquery….min.js (ligne 2) »

  • Tita dit :

    Merci!
    J’utilise Windows 7 / Firefox 5 / IE9 / Google Chrome 12.0.742.112

  • admin dit :

    Merci des infos, je vient de mettre en ligne la version 1.4.2 qui corrige le problème. Désolé une faute d’inattention de ma part !

    1.4.2 sur http://www.le-pret-a-surfer.com/mSelect/

  • Tita dit :

    Merci à vous, je l’ai essayé et l’évènement Click réagit à la perfection dans la nouvelle version.
    Par contre, eventOpen et eventClose ne retourne pas la variable « value » mais seulement « html » et « this ». Je ne sais pas si c’est normal ou non, en tout cas, ça ne me pose pas de problème particulier, c’est juste une petite remarque.
    Sinon j’aime ce que vous faites et je vous encourage à continuer 🙂
    Encore merci

  • admin dit :

    Merci ! enfaite le problème remonte de plus haut, dans mes testes (sur ff5) un submit de formulaire les donnés des mSelect était null, corrigé dans la version 1.4.4 !

    Faite la mise à jour !

Commenter

XHTML: You can use these tags:' <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Copyright © 2017 Le pret a surfer All rights reserved.
Desk Mess Mirrored v1.4.4.1 theme from BuyNowShop.com.