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

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" name="liRadio" type="radio" value="ok" /> <label for="ok1">Ok</label></li>
    <li><input id="ok2" checked="checked" name="liRadio" type="radio" value="okStr" /> <label for="ok2">ok <strong>Ok strong</strong></label></li>
    <li><input id="ok3" name="liRadio" type="radio" value="okEm" /> <label for="ok3">ok <em>Ok Em</em></label></li>
    <li><input id="ok4" name="liRadio" type="radio" 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

Essayer et télécharger le plugin

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

Change Log

Version 0.1 : 4 avril 2010

Article en rapport :