mSelect : Plugin Jquery de liste html personnalisé

mSelect est un plugin qui permet de personnaliser totalement l’apparence d’une liste de formulaire (select). Se qui permet en css de personnalisé la boite, la fleche et chaque option. Le plugin mSelect permet aussi de faire un boite de sélection enrichie de 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

  • Le select ou la element ul serra entierement remplacer par la nouvelle interface
  • L’attribut « name » de l’élément select ou input est conservé
  • Les attributs « value » sont conservé, si il n’existe pas il est crée avec le contenu texte le l’option ou du label
  • L’id de l’élément select ou ul est conservé
  • Les class aplliqué au élément option ou li sont conservé
  • Si un élément à un attribut selected ou checked il est conservé
  • Si fireBug est activé les erreurs sont affiché dans la console
  • Développé avec jQuery 1.42, le plugin utilise des fonctions de la version 1.4
  • Le script à été essayé sur quelque navigateur :
    • 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ésiter 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, c’est éléments sont des div en position absolue avec le curseur main, les informations top et left sont renseigné à 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

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.