mSelect

Plugin jQuery, Télécharger version 1.4.5

Caractéristique

Exemple de théme : Théme noir, Théme blanc ou Théme css3
Exemple liste de pays :
    • , Croatie, Danemark, Espagne, Estonie, Finlande, France, Grèce, Hongrie, Irlande, Islande, Italie, Kosovo, Lettonie, Liechtenstein, Lituanie, Luxembourg, Macédoine, Malte, Moldavie, Monaco, Monténégro, Norvège, Pays-Bas, Pologne, Portugal, République tchèque, Roumanie, Royaume-Uni, Saint-Marin, Serbie, Slovaquie, Slovénie, Suède, Suisse, Ukraine et Vatican.

L'élément select ou ul sera entièrement remplacé par la nouvelle interface Voir exemple

Après :

Avant :


<div class="mSelect" id="selectDemo1">
 <div class="mFleche"></div>
 <div class="mSelected">
   Teste 1
   </div>
 <div class="mOption">
   <input checked="checked" value="1" class="mRadio" type="radio">
   Teste 1
 </div>
 <div class="mOption">
   <input value="2" class="mRadio" type="radio">
   Teste 2
 </div>
</div>
<select id="selectDemo1">
 <option selected="selected" value="1">Teste 1</option>
 <option value="2">Teste 2</option>
</select>

<script type="text/javascript">
 $('#selectDemo1').mSelect();
</script>
Après :

Avant :

<div class="mSelect" id="ulDemo1">
 <div class="mFleche"></div>
 <div class="mSelected">ok <strong>Ok strong</strong></div>
 <div class="mOption">
  <input class="mRadio" name="liRadio" value="ok" type="radio">
  Ok
 </div>
 <div class="mOption">
  <input checked="checked" class="mRadio" name="liRadio" value="okStr" type="radio">
  ok <strong>Ok strong</strong>
 </div>
</div>
<ul id="ulDemo1">
 <li>
  <input type="radio" name="liRadio" value="ok" id="ok1" />
  <label for="ok1">Ok</label>
 </li>
 <li>
  <input type="radio" name="liRadio" value="okStr" id="ok2" checked="checked" />
  <label for="ok2">ok <strong>Ok strong</strong></label>
 </li>
</ul>

<script type="text/javascript">
  $('#ulDemo1').mSelect();
</script>

L'attribut name de l'élément select ou input est conservé, pour faciliter la transmition des données Voir exemple

Après :

Avant :


<div class="mSelect" id="selectDemo2">
 <div class="mFleche"></div>
 <div class="mSelected">Teste 1</div>
 <div class="mOption">
  <input value="1" class="mRadio" name="exemple" type="radio">
  Teste 1
 </div>
 <div class="mOption">
  <input value="2" class="mRadio" name="exemple" type="radio">
  Teste 2
 </div>
</div>
<select name="exemple" id="selectDemo2">
 <option value="1">Teste 1</option>
 <option value="2">Teste 2</option>
</select>

<script type="text/javascript">
 $('#selectDemo2').mSelect();
</script>
Après :

Avant :


<div class="mSelect" id="ulDemo2">
 <div class="mFleche"></div>
 <div class="mSelected">ok 2</div>
 <div class="mOption">
  <input value="ok" class="mRadio" name="example" type="radio">
  ok
 </div>
 <div class="mOption">
  <input checked="checked" value="ok2" class="mRadio" name="example" type="radio">
  ok 2
 </div>
</div>
<ul id="ulDemo2">
 <li>
  <input type="radio" name="example" value="ok" id="ok1" />
  <label for="ok1">ok</label>
 </li>
 <li>
  <input type="radio" name="example" value="okStr" id="ok2" checked="checked" />
  <label for="ok2">ok 2</label>
 </li>
</ul>

<script type="text/javascript">
  $('#ulDemo2').mSelect();
</script

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 Voir exemple

Après :

Avant :


<div class="mSelect" id="selectDemo3">
 <div class="mFleche"></div>
 <div class="mSelected">Teste 1</div>
 <div class="mOption">
  <input checked="checked" value="1" class="mRadio" name="exemple" type="radio">
  Teste 1
 </div>
 <div class="mOption">
  <input value="Teste 2" class="mRadio" name="exemple" type="radio">
  Teste 2
 </div>
</div>
<select name="exemple" id="selectDemo3">
 <option value="1" selected="selected">Teste 1</option>
 <option>Teste 2</option>
</select>

<script type="text/javascript">
 $('#selectDemo3').mSelect();
</script>
Après :

Avant :


<div class="mSelect" id="ulDemo3">
 <div class="mFleche"></div>
 <div class="mSelected">ok <strong>2</strong></div>
 <div class="mOption">
  <input value="ok" class="mRadio" name="example" type="radio">
  ok
 </div>
 <div class="mOption">
  <input checked="checked" value="ok 2" class="mRadio" name="example" type="radio">
  ok <strong>2</strong>
 </div>
</div>
<ul id="ulDemo3">
 <li>
  <input type="radio" name="example" value="ok" id="ok1" />
  <label for="ok1">ok</label>
 </li>
 <li>
  <input type="radio" name="example" id="ok2" checked="checked" />
  <label for="ok2">ok <strong>2</strong></label>
 </li>
</ul>

<script type="text/javascript">
  $('#ulDemo3').mSelect();
</script

L'attribut id de l'élément select ou ul est conservé Voir exemple

Après :

Avant :


<div class="mSelect" id="selectDemo4">
 <div class="mFleche"></div>
 <div class="mSelected">Teste 1</div>
 <div class="mOption">
  <input checked="checked" value="1" class="mRadio" name="exemple" type="radio">
  Teste 1
 </div>
 <div class="mOption">
  <input value="Teste 2" class="mRadio" name="exemple" type="radio">
  Teste 2
 </div>
</div>
<select name="exemple" id="selectDemo4">
 <option value="1" selected="selected">Teste 1</option>
 <option>Teste 2</option>
</select>

<script type="text/javascript">
 $('#selectDemo4').mSelect();
</script>
Après :

Avant :


<div class="mSelect" id="ulDemo4">
 <div class="mFleche"></div>
 <div class="mSelected">ok <strong>2</strong></div>
 <div class="mOption">
  <input value="ok" class="mRadio" name="example" type="radio">
  ok
 </div>
 <div class="mOption">
  <input checked="checked" value="ok 2" class="mRadio" name="example" type="radio">
  ok <strong>2</strong>
 </div>
</div>
<ul id="ulDemo4">
 <li>
  <input type="radio" name="example" value="ok" id="ok1" />
  <label for="ok1">ok</label>
 </li>
 <li>
  <input type="radio" name="example" id="ok2" checked="checked" />
  <label for="ok2">ok <strong>2</strong></label>
 </li>
</ul>

<script type="text/javascript">
  $('#ulDemo4').mSelect();
</script

Les attributs class appliqués aux éléments option ou li sont conservés Voir exemple

Après :

Avant :


<div class="mSelect" id="selectDemo5">
 <div class="mFleche"></div>
 <div class="mSelected">Teste 1</div>
 <div class="mOption">
  <input checked="checked" value="1" class="mRadio" name="exemple" type="radio">
  Teste 1
 </div>
 <div class="mOption fondRouge">
  <input value="Teste 2" class="mRadio" name="exemple" type="radio">
  Teste 2
 </div>
</div>
<select name="exemple" id="selectDemo5">
 <option value="1" selected="selected">Teste 1</option>
 <option class="fondRouge">Teste 2</option>
</select>

<script type="text/javascript">
 $('#selectDemo5').mSelect();
</script>
Après :

Avant :


<div class="mSelect" id="ulDemo5">
 <div class="mFleche"></div>
 <div class="mSelected">ok <strong>2</strong></div>
 <div class="mOption">
  <input value="ok" class="mRadio" name="example" type="radio">
  ok
 </div>
 <div class="mOption fondRouge">
  <input checked="checked" value="ok 2" class="mRadio" name="example" type="radio">
  ok <strong>2</strong>
 </div>
</div>
<ul id="ulDemo5">
 <li>
  <input type="radio" name="example" value="ok" id="ok1" />
  <label for="ok1">ok</label>
 </li>
 <li class="fondRouge">
  <input type="radio" name="example" id="ok2" checked="checked" />
  <label for="ok2">ok <strong>2</strong></label>
 </li>
</ul>

<script type="text/javascript">
  $('#ulDemo5').mSelect();
</script

Si un élément a un attribut selected ou checked il est conservé Voir exemple

Après :

Avant :


<div class="mSelect" id="selectDemo6">
 <div class="mFleche"></div>
 <div class="mSelected">Teste 1</div>
 <div class="mOption">
  <input value="1" class="mRadio" name="exemple" type="radio">
  Teste 1
 </div>
 <div class="mOption">
  <input value="Teste 2" class="mRadio" name="exemple5" type="radio">
  Teste 2
 </div>
</div>
<select name="exemple" id="selectDemo6">
 <option value="1">Teste 1</option>
 <option>Teste 2</option>
</select>

<script type="text/javascript">
 $('#selectdemoOption1').mSelect();
</script>
Après :

Avant :


<div class="mSelect" id="ulDemo6">
 <div class="mFleche"></div>
 <div class="mSelected">ok <strong>2</strong></div>
 <div class="mOption">
  <input value="ok" class="mRadio" name="example" type="radio">
  ok
 </div>
 <div class="mOption">
  <input checked="checked" value="ok 2" class="mRadio" name="example" type="radio">
  ok <strong>2</strong>
 </div>
</div>
<ul id="ulDemo6">
 <li>
  <input type="radio" name="example" value="ok" id="ok1" />
  <label for="ok1">ok</label>
 </li>
 <li>
  <input type="radio" name="example" id="ok2" checked="checked" />
  <label for="ok2">ok <strong>2</strong></label>
 </li>
</ul>

<script type="text/javascript">
  $('#ulDemo6').mSelect();
</script

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.

Options

defaut : Message par défaut (String) Par défaut vide.
Message par défaut quand aucune option n'est sélectionné. Voir exemple

Après :

Avant :


<div class="mSelect" id="ulDemoOption1">
 <div class="mFleche"></div>
 <div class="mSelected">Message par defaut</div>
 <div class="mOption">
  <input value="ok" class="mRadio" name="example" type="radio">
  ok
 </div>
 <div class="mOption">
  <input value="ok 2" class="mRadio" name="example" type="radio">
  ok <strong>2</strong>
 </div>
</div>
<ul id="ulDemoOption1">
 <li>
  <input type="radio" name="example" value="ok" id="ok1" />
  <label for="ok1">ok</label>
 </li>
 <li>
  <input type="radio" name="example" id="ok2" />
  <label for="ok2">ok <strong>2</strong></label>
 </li>
</ul>

<script type="text/javascript">
  $('#ulDemoOption1').mSelect({defaut:"Message par defaut"});
</script

radioHide : Afficher les éléments radio (Boolean) Par défaut : true
Si false affiche les éléments radio dans les options, true pour cacher Voir exemple

Après :

Avant :


<div class="mSelect" id="selectDemoOption2">
 <div class="mFleche"></div>
 <div class="mSelected">Teste 1</div>
 <div class="mOption">
  <input value="1" class="mRadio" name="exemple" type="radio">
  Teste 1
 </div>
 <div class="mOption">
  <input value="Teste 2" class="mRadio" name="exemple" type="radio">
  Teste 2
 </div>
</div>
<select name="exemple" id="selectDemoOption2">
 <option value="1">Teste 1</option>
 <option>Teste 2</option>
</select>

<script type="text/javascript">
 $('#selectDemoOption2').mSelect({radioHide:false});
</script>
Après :

Avant :


<div class="mSelect" id="ulDemoOption2">
 <div class="mFleche"></div>
 <div class="mSelected">ok <strong>2</strong></div>
 <div class="mOption">
  <input value="ok" class="mRadio" name="example" type="radio">
  ok
 </div>
 <div class="mOption">
  <input checked="checked" value="ok 2" class="mRadio" name="example" type="radio">
  ok <strong>2</strong>
 </div>
</div>
<ul id="ulDemoOption2">
 <li>
  <input type="radio" name="example" value="ok" id="ok1" />
  <label for="ok1">ok</label>
 </li>
 <li>
  <input type="radio" name="example" id="ok2" checked="checked" />
  <label for="ok2">ok <strong>2</strong></label>
 </li>
</ul>

<script type="text/javascript">
  $('#ulDemoOption2').mSelect({radioHide:false});
</script>

nbVisible : Nombre d'option visible (Int) Par défaut : 6.
Affiche une scrollbar si le nombre d'option est supérieure à nbVisible. Si 0 la scrollbar est désactivé. Voir exemple

scrollVitesse : Vitesse de la scrollbar, nombre de pixel à chaque évenement (int) Par défaut : 10.

Événements

eventClick : événement au click, Function(Valeur de l'option sélectionne,Html de l'option séléctionné)
Fonction lancer au clique sur une une option. Voir exemple

<script type="text/javascript">
  $('#ulDemo9').mSelect({
  eventClick:function(value,html) {
      $('#sortieEvent1value').text(value);
      $('#sortieEvent1html').text(html);
      $('#sortieEvent1this').text(String(this));
    }
  });
</script>
var value :
var html :
var this :
This : élément div qui à recu le click

eventOpen : événement à l'ouverture Function(Valeur de l'option sélectionne,Html de l'option sélectionné)
Fonction lancer à l'ouverture de la liste. Voir exemple

<script type="text/javascript">
  $('#ulDemo10').mSelect({
  eventOpen:function(value,html) {
      $('#sortieEvent2value').text(value);
      $('#sortieEvent2html').text(html);
      $('#sortieEvent2this').text(String(this));
    }
  });
</script>
var value :
var html :
var this :
This : élément div principale

eventClose : événement à la fermeture Function(Valeur de l'option sélectionne,Html de l'option sélectionné)
Fonction lancer à la fermeture de la liste, même si il n'y pas de changer de valeur.Voir exemple

<script type="text/javascript">
  $('#ulDemo11').mSelect({
  eventClose:function(value,html) {
      $('#sortieEvent3value').text(value);
      $('#sortieEvent3html').text(html);
      $('#sortieEvent3this').text(String(this));
    }
  });
</script>
var value :
var html :
var this :
This : élément div principale

Methodes

disable Voir exemple
Passe le select inactif et ajoute la class "disable" (Equivalent à disabled="disabled")

Après :

Avant :

<div class="mSelect mDisable" id="ulDemoMethode1">
 <div class="mFleche"></div>
 <div class="mSelected">ok <strong>2</strong></div>
 <div class="mOption">
  <input value="ok" class="mRadio" name="example" type="radio">
  ok
 </div>
 <div class="mOption">
  <input checked="checked" value="ok 2" class="mRadio" name="example" type="radio">
  ok <strong>2</strong>
 </div>
</div>
<ul id="ulDemoMethode1">
 <li>
  <input type="radio" name="example" value="ok" id="ok1" />
  <label for="ok1">ok</label>
 </li>
 <li>
  <input type="radio" name="example" id="ok2" checked="checked" />
  <label for="ok2">ok <strong>2</strong></label>
 </li>
</ul>

<script type="text/javascript">
  $('#ulDemoMethode1').mSelect({radioHide:false});
  $('#ulDemoMethode1').mSelect('disable');
</script>

activate Voir exemple
Passe le select en actif et supprime la class "disable"

Actif/Inactif

<script type="text/javascript">
  $('#ulDemoMethode2').mSelect();
  $('#demoMethodeChange').click(function() {
    if ($('#ulDemoMethode2').hasClass('mDisable')) {
      $('#ulDemoMethode2').mSelect('activate');
    } else {
      $('#ulDemoMethode2').mSelect('disable');
    }
  });
</script>

add (1.4+) Voir exemple
Ajoute une ou plusieurs options

<ul id="ulDemoMethode3">
  <li>
    <input type="radio" name="example33" value="ok" id="ok1" />
    <label for="ok1">ok</label>
  </li>
  <li>
    <input type="radio" name="example33" id="ok2" checked="checked" />
    <label for="ok2">ok <strong>2</strong></label>
  </li>
</ul>

<script type="text/javascript">
  $('#ulDemoMethode3').mSelect();
  $('#ulDemoMethode3').mSelect('add',[
    {
      value:'ajout',
      html:'Ajout via js'
    },{
      value:'ajout2',
      html:'<strong>Ajout2</strong> via js',
      cssClass:'rouge',
      selected:true
    }
  ]);
</script>

options (1.4+) Voir exemple
Remplace avec une ou plusieurs options

<ul id="ulDemoMethode4">
  <li>
    <input type="radio" name="example33" value="ok" id="ok1" />
    <label for="ok1">ok</label>
  </li>
  <li>
    <input type="radio" name="example33" id="ok2" checked="checked" />
    <label for="ok2">ok <strong>2</strong></label>
  </li>
</ul>

<script type="text/javascript">
  $('#ulDemoMethode4').mSelect();
  $('#ulDemoMethode4').mSelect('options',[
    {
      value:'ajout',
      html:'Ajout via js'
    },{
      value:'ajout2',
      html:'<strong>Ajout2</strong> via js',
      cssClass:'rouge',
      selected:true
    }
  ]);
</script>

selected (1.4+) Voir exemple
Sélectionne une option

<ul id="ulDemoMethode5">
  <li>
    <input type="radio" name="example34" value="ok" id="ok1" />
    <label for="ok1">ok</label>
  </li>
  <li>
    <input type="radio" name="example34" id="ok2" checked="checked" />
    <label for="ok2">ok <strong>2</strong></label>
  </li>
</ul>

<script type="text/javascript">
  $('#ulDemoMethode5').mSelect();
  $('#ulDemoMethode5').mSelect('selected',0);
</script>

Apparence

Class : mSelect
Le conteneur général de la liste, c'est un élément div en display inline-block. Voir exemple

<style type="text/css">
  .mSelect {
    border:#900 1px solid;
    background:#FF8080;
  }
</style>

Class : mSelected
Le conteneur de l'option sélectionne qui s'affiche toujours à l'intérieur de mSelect, c'est un élément div. Voir exemple

<style type="text/css">
  .mSelected {
    border:#900 1px solid;
    background:#FF8080;
  }
</style>

Class : mFleche
Element div permettant de personnalisé la flèche qui indique à l'utilisateur la possibilité de déployer la liste. Voir exemple

<style type="text/css">
  .mFleche {
    border:#900 1px solid;
    background:#FF8080;
  }
</style>

Class : mOptions
Conteneur des option, cet élément est un div en position absolue, les informations top et left sont renseignées à chaque ouverture de la liste Voir exemple

<style type="text/css">
  .mOptions {
    border:#900 1px solid;
    background:#FF8080;
  }
</style>

Class : mOption
Conteneur d'une option, ces éléments sont des div avec le curseur main Voir exemple

<style type="text/css">
  .mOption {
    border:#900 1px solid;
    background:#FF8080;
  }
</style>

Class : mCurrent (1.3+)
Conteneur d'une option actuellement selectionné, cet élément est div avec déjà la class mOption Voir exemple

<style type="text/css">
  .mCurrent {
    background:#FF8080;
  }
</style>

Class : mScrallBar
Conteneur de l'ensemble de la scrallbar, cet élément est un div en position absolue avec le curseur main, les informations top et left sont renseignées à chaque ouverture de la liste Voir exemple

<style type="text/css">
  .mScrallBar {
    border:#900 1px solid;
    background:#FF8080;
  }
</style>

Class : mScrollHaut
Bouton haut de la scrollbar, cet élément est un div. Voir exemple

<style type="text/css">
  .mScrollHaut {
    border:#900 1px solid;
    background:#FF8080;
  }
</style>

Class : mScrollBas
Bouton bas de la scrollbar, cet élément est un div. Voir exemple

<style type="text/css">
  .mScrollBas {
    border:#900 1px solid;
    background:#FF8080;
  }
</style>

Class : mScrollZone
Zone de defillement de barre, cet élément est un div. Voir exemple

<style type="text/css">
  .mScrollZone {
    border:#900 1px solid;
    background:#FF8080;
  }
</style>

Class : mBarre
Barre de la scrollbar, cet élément est un div. Voir exemple

<style type="text/css">
  .mBarre {
    border:#900 1px solid;
    background:#FF8080;
  }
</style>

Change Log

Version 1.4.4 : 03 octobre 2011

  • Correction d'un bug pour les listes riches

Version 1.4.4 : 16 juillet 2011

  • Correction d'un bug empéchant le checked/selected

Version 1.4.2 : 13 juillet 2011

  • Correction d'un bug sur eventClick

Version 1.4.1 : 12 juillet 2011

  • Ajout trois thémes d'exemple
  • Correction d'un bug min (mémorisation de la class)

Version 1.4 : 27 juin 2011

  • Ajout de la méthode add
  • Ajout de la méthode options
  • Ajout de la méthode selected

Version 1.3 : 24 juin 2011

  • 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.

Version 1.2 : 23 juin 2011

  • Ajout d'une scrollBar personnalisable
  • Ajout d'options
  • Optimisation

Version 1.1 : 15 avril 2010

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

Version 1.0 : 4 avril 2010

Commentaire et suggestion sur : http://www.le-pret-a-surfer.com/non-classe/jquery-mselect-ajout-dune-scrollbar-personnalisable/ Design des thémes blanc et noir : Gabriel Uribe