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 :

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

Article en rapport

Mots-clefs :css, formulaire html, html select, javascript, Jquery

starker-xp

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

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

Cordialement
starker-xp

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

Bonjour,

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

Merci
admin

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

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

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

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()
http://www.agia3d.fr Agia3D

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

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

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

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

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

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

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

Elle est en ligne sur http://plugins.jquery.com/node/14163/release
Sophie

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

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

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

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

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

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

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

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

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

Bonjour,

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

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

Génial! merci beaucoup, ça fonctionne
Tita

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

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

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

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

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

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

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 !