Section courante

A propos

Section administrative du site

Description

Cette bibliothèque complémentaire au jQuery permet d'exploiter des listes déroulante de cases à cocher, remplaçant ainsi facilement un <SELECT ... MULTIPLE> du HTML.

Les chaines de caractères de commande contenu dans les paramètres de «$("#identifiant").dropdownchecklist» :

Valeur Description
"destroy" Ce commande permet de supprimer l'objet.
"refresh" Ce commande permet de rafraichir l'objet.

Les options de configurations contenu dans les paramètres de «$("#identifiant").dropdownchecklist» :

Nom Description
bgiframe: function(options) {} Cette option permet d'effectuer l'initialisation des widgets avec Internet Explorer.
closeRadioOnClick: true/false Cette option permet d'activer un simple sélecteur avec l'affichage d'un bouton radio fermant la liste déroulante quand n'importe quel bouton est cliqué. La valeur par défaut «false».
emptyText: 'string' Cette option permet d'indiquer la chaine de caractères à afficher si aucune option n'est actuellement sélectionné.
explicitClose: 'string' Cette option permet d'indiquer l'item spécial à la fin de la liste que l'utilisateur peut cliquer pour fermer le contrôle.
firstItemChecksAll: true/false Cette option permet d'indiquer si lorsque le premier élément doit cocher tous les autres (true) ou perçu indépendant des autres (false). C'est option permet d'effectuer l'équivalent d'un «TOUS».
forceMultiple: true/false Cette option permet d'indiquer qu'il faut traiter l'objet comme une sélection multiple.
icon: { keyed-list } Cette option permet d'indiquer si un icône doit être afficher dans le coin de la liste déroulant afin d'indiquer si elle est ouvert ou fermé.
maxDropHeight: integerValue Cette option permet d'indiquer la hauteur maximal de la boite des items à cocher.
minWidth: integerValue Cette option permet d'indiquer largeur minimum de la boite de l'objet.
onComplete: function(selector) {} Cette option permet d'indiquer une fonction JavaScript à exécuter lorsque l'utilisateur a effectuer sa sélection de case à cocher.
positionHow: string Cette option permet de contrôle le positionnement de la fenêtre dans la page :
Valeur Description
'absolute' Cette valeur permet d'indiquer des coordonnées absolue à partir du début de la page. C'est la valeur par défaut.
'relative' Cette valeur permet d'indiquer des coordonnées partant de la position actuel.
textFormatFunction: function(options) { return 'string'; } Cette option permet d'indiquer une fonction permettant d'effectuer un formattage du texte à afficher.
width: integerValue Cette option permet d'indiquer la largueur de la boite de liste déroulante de case à cocher.

Exemples

Voici un petit exemple d'un programme permettant de choisir trois provinces au Canada  à l'aide de case à cocher (si vous avez les bibliothèques nécessaires dans le dossier «include/») :

  1. <link rel="stylesheet" type="text/css" href="include/jquery-ui-1.8.4.custom.css">
  2. <link rel="stylesheet" type="text/css" href="include/ui.dropdownchecklist.themeroller.css">
  3. <script type="text/javascript" src="include/jQuery/jquery-1.4.2.min.js"></script>
  4. <script type="text/javascript" src="include/jQuery/jquery-ui-1.8.4.custom.min.js"></script>
  5. <script type="text/javascript" src="include/jQuery/ui.dropdownchecklist.js"></script>
  6. <select id="mid_province" name="mid_province" style="width:100px;" multiple="multiple">
  7.      <option value="QC">Québec</option>
  8.      <option value="ON">Ontario</option>
  9.      <option value="BC">Colombie britannique</option>
  10. </select>
  11. <script language="JavaScript" type="text/javascript">
  12. $("#mid_province").dropdownchecklist( {icon: {}, width: 150 } );
  13. </script>

on obtiendra le résultat suivant :

Voici un autre exemple d'un programme permettant de retenir dans une variable du formulaire (listmid) les choix effectués dans la liste des cases à cocher (séparé par des points-virgules) :

  1. <link rel="stylesheet" type="text/css" href="include/jquery-ui-1.8.4.custom.css">
  2. <link rel="stylesheet" type="text/css" href="include/ui.dropdownchecklist.themeroller.css">
  3. <script type="text/javascript" src="include/jQuery/jquery-1.4.2.min.js"></script>
  4. <script type="text/javascript" src="include/jQuery/jquery-ui-1.8.4.custom.min.js"></script>
  5. <script type="text/javascript" src="include/jQuery/ui.dropdownchecklist.js"></script>
  6. <form name="currEdit">
  7. <input type="hidden" id="listmid" name="listmid" value="" />
  8. <select id="mid_province" name="mid_province" style="width:100px;" multiple="multiple">
  9.      <option value="QC">Québec</option>
  10.      <option value="ON">Ontario</option>
  11.      <option value="BC">Colombie britannique</option>
  12. </select>
  13. </form>
  14. <script language="JavaScript" type="text/javascript">
  15. $(document).ready(function() {
  16.      $("#mid_province").dropdownchecklist( {icon: {}, width: 150, 
  17.                     onComplete: function(selector) {
  18.                        var values = "";
  19.                        for( i=0; i < selector.options.length; i++ ) {
  20.                            if (selector.options[i].selected && (selector.options[i].value != "")) {
  21.                                if ( values != "" ) values += ";";
  22.                                values += selector.options[i].value;
  23.                            }
  24.                        }
  25.                          document.getElementById("listmid").value = values;
  26.                     }
  27.      } );
  28. });
  29. </script>

on obtiendra le résultat suivant :



Dernière mise à jour : Mercredi, le 28 octobre 2015