Magazine Graphisme

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

Publié le 04 avril 2010 par Mandonnaud

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 :


    Vous pourriez être intéressé par :

    Retour à La Une de Logo Paperblog

    Ces articles peuvent vous intéresser :

    • Plugin WP Super Cache

      Nous allons terminer notre tour d’horizon des plugins d’optimisation de Wordpress par l’un leader : Wp-Super Cache. A mon sens, sans doute le plus stable et plu... Lire la suite

      Par  4h18
      INTERNET, WEB2.0
    • Plugin Gzip Enable

      Voici un façon toute simple, mais redoutablement efficace pour réduire le temps de chargement de ses pages. En effet,  après quelques semaines, plus quelques... Lire la suite

      Par  4h18
      INTERNET, WEB2.0
    • Plugin W3 Total Cache

      Un bon nom bien technique comme les débutants les aiment ! De quoi se flanquer une belle peur, pas vrai Pas de panique, derrière ce nom se planque un bien beau... Lire la suite

      Par  4h18
      INTERNET, WEB2.0
    • Plugin WP Super Cache

      Nous allons terminer notre tour d’horizon des plugins d’optimisation de WordPress par l’un leader : Wp-Super Cache. A mon sens, sans doute le plus stable et plu... Lire la suite

      Par  4h18
      INTERNET, WEB2.0
    • Plugin Wp-minify

      Toujours en quête de performance, je vais vous présenter ici leplugin WP-Minify. Certes, ce n’est pas celui qui propose les résultats les plus spectaculaires,... Lire la suite

      Par  4h18
      INTERNET, WEB2.0
    • Plugin Gzip Enable

      Voici un façon toute simple, mais redoutablement efficace pour réduire le temps de chargement de ses pages. En effet,  après quelques semaines, plus quelques... Lire la suite

      Par  4h18
      INTERNET, WEB2.0
    • Plugin W3 Total Cache

      Un bon nom bien technique comme les débutants les aiment ! De quoi se flanquer une belle peur, pas vrai Pas de panique, derrière ce nom se planque un bien beau... Lire la suite

      Par  4h18
      INTERNET, WEB2.0

    A propos de l’auteur


    Mandonnaud 30 partages Voir son profil
    Voir son blog

    l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte