Permet de mettre en forme une balise select en la transformant en code html avec une structure et la présence de class aux endroits adéquats pour que les intégrateurs puissent la mettre en forme, mais aussi les bonnes fonctionnalités pour que les devs puissent l'utiliser de manière transparente.
Pas de fonctionnalités superflues, juste celles d'une balise select de type dropdown en accord avec les recommandations du w3c. Keep It Simple.
Chaque balise select cible doit posséder un id (id et name doivent être similaires)
Scripts à placer en bas de page avant </body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/path/vers/freeselect.js"></script>
Structure de base une fois la balise transformée (pour le reste firebug peut aider pour visualiser les class disponibles)
<div>
<a>
<span>Libellé sélectionné</span>
<span>Icone</span>
</a>
<ul>
<li rel="valeur">Libellé</li>
...
</ul>
<input />
</div>
Le plugin n'applique pas de mise en forme dans le but de laisser une totale liberté à l'intégrateur. La div principale reçoit la class .fs_freeSelect et son id devient #fs_[id du select]
Un exemple de fichier css :
/* Permet de masquer les balises avant leur reconstruction par le plugin */
select { visibility: hidden; }
.fs_freeSelect { display: inline-block; border: 1px solid lightgray; background-color: white; text-align: left; position: relative; }
/* le style des optgroup */
.fs_optg { font-weight: bold; font-style: italic; padding-left: 3px; }
.fs_optg_child a { padding-left: 10px; }
.fs_freeSelect a { color: black; text-decoration: none; }
.fs_freeSelect > a { display: block; padding: 3px; min-width: 150px; }
.fs_icon { float: right; }
.fs_freeSelect ul { list-style-type: none; position: absolute; display: none; border: 1px solid lightgray; z-index: 1000;
min-height: 20px; max-height: 200px; min-width: 200px; overflow-y: auto; overflow-x: hidden; background-color: white; }
.fs_freeSelect li a { display: block; padding: 0px 10px 5px 10px; }
/* le surlignement des options en sélection (permet à ie7 de combler l'absence du :focus) */
.fs_focus { color: white; background-color: lightgray; }
/* balise et options en mode disabled */
.fs_disabled { background-color: grey!important; cursor: default!important; }
Et le hack pour ie7 à mettre dans un [if lte IE 7]
.fs_freeSelect { display: inline; zoom: 1; }
.fs_freeSelect > a { display: block; width: 150px; }
.fs_libelle { display: inline-block; width: 90%; cursor: pointer; }
.fs_icon { display: inline-block; float: none; cursor: pointer; }
/* corrige un bug lors de la disparition du scroll si on enlève une option (mettre le width du ul) */
.fs_freeSelect ul { width: 200px; }
.fs_freeSelect li a { width: 100%; }
Initialisation du plugin :
$(document).ready(function(){
//(optionnel) variable qui permet de laisser (mettre à true) ou non la balise select intact (ici la valeur par défaut du plugin)
$.fn.freeSelect.isMobile = false;
//l'option icon permet de renseigner le contenu du span dont la class est .fs_icon (ici la valeur par défaut du plugin)
$("select").freeSelect({icon: "∇"});
});
Manipulations de la liste (ici une liste dont l'id était test)
Toutes ces méthodes fonctionnent quel que soit la valeur de la variable $.fn.freeSelect.isMobile
//récupère la valeur
$("#test").val();
//récupère le libellé de l'item sélectionné
$("#test").freeSelectGetSelectedString();
//ajoute des items à la liste
var tab_options = [{value: "4", text: "Quatre"}, {value: "5", text: "Cinq"}];
var tab_options = [{group_text: "Indonesia", options: [{value: "B1", text: "Bali"}
, {value: "L2", text: "Lombok"}, {value: "F3", text: "Flores"}]}
,{value: "HG", text: "Hors groupe"}]; //pour un optgroup
$("#test").freeSelectAdd(tab_options);
//retrait d'items de la liste
var tab_values = [4, 5];
$("#test").freeSelectRemove(tab_values);
//vide la liste
$("#test").freeSelectRemoveAll();
//rend la liste disabled
$("#test").freeSelectDisable();
//rend la liste enable
$("#test").freeSelectEnable();
//disabled des items
var tab_values = [1, 2, 3];
$("#test").freeSelectDisable(tab_values);
//enable des items
var tab_values = [1, 2, 3];
$("#test").freeSelectEnable(tab_values);
Le plugin n'a pas été totalement refactorisé (et ne le sera sans doute jamais). Il ne respecte pas non plus tous les codes et standards jQuery, nul n'est parfait.
En revanche ça a été testé, a subi de nombreux retours d'expérience et demande de fonctionalités. Le plugin est aussi utilisé en prod sur plusieurs sites.
Niveau licence c'est du domaine public, donc faites en ce que vous voulez si ça peut vous être utile (ne dites quand même pas que c'est le votre vu que ce n'est pas le cas)
Bon dev et merci à tout ceux qui ont laché du code et de l'info dans le domaine informatique.
Thierry