JARIA est une bibliothèque de fonctions développées pour faciliter l'intégration de JavaScript.

     
IE 6+
FF 2+
Opera 9+
Safari 2+
Chrome

Les listes personnalisables

fichiers nécessaires <link href=jaria/jaria.css rel=stylesheet type=text/css />
<script src=jaria/jaria.js type=text/javascript></script>
<script src=jaria/jaria_list.js type=text/javascript></script>

La fonction oEl.list() gère les listes personnalisées
oEl.list.init() ajoute les évènements aux listes et utilise la valeur du title de chaque option
oEl.list.get (element) affiche les options de la liste
oEl.list.set (element, value) affecte l'option sélectionnée à une liste
oEl.list.setm (element, value) affecte l'option sélectionnée à une liste multiple
oEl.list.getindex (id) retourne l'index de la liste à partir de zéro
oEl.list.setindex (id, index) sélectionne la liste par l'index à partir de zéro
oEl.list.setbyvalue (id, value) sélectionne l'option par la valeur de la liste
oEl.list.setbytext (id, texte) sélectionne l'option par le texte de la liste
oEl.list.setmbyvalue (id, value(s)) sélectionne une ou plusieurs options d'un liste multiple (séparées par des virgules)
oEl.list.getcountoptions (parent) retourne le nombre d'options de l'élément parent d'une liste
oEl.list.getoptionvalue (element) retourne la valeur de l'élément option d'une liste
oEl.list.gettext (id) retourne le texte sélectionné par l'identifiant de la liste
oEl.list.addoption (id, value, text, [style], [function]) ajoute une option à la fin de la liste simple ou multiple
oEl.list.delalloptions (id) supprime toutes les optionsde la liste simple ou multiple

exemple de code JavaScript <script type=text/javascript>
<!--
 function Load(){
  /* initialise les listes du document */
  oEl.list.init();
  /* sélectionne la liste par le texte */
  oEl.list.setbytext (sel1, Option 4);
  /* sélectionne la liste par la valeur */
  oEl.list.setbyvalue (sel2, Option 11);
 }
 /* ajoute la fonction Load() au chargement de la page Web */
 oNav.addevent (onload, Load);
-->
</script>
Listes simples
Option 1
Option 2
Option 3
Option 4
Option 5

Vérifier Ajouter une option Supprimer toutes les options

Liste simple avec évènement onchange
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
Option 10
Option 11
Option 12
Option 13
Option 14
Option 15

Ajouter une option Supprimer toutes les options

Les listes sont accessibles par la touche tabulation et par les touches du clavier.
exemple de code HTML <div>
 <input class=jaria_listlock style=width:150px value= readonly=readonly onchange=alert(oEl.get('sel1').value) /><br />
 <div class=jaria_liste>
  <div data-value=1>
Option 1</div>
  <div data-value=2>
Option 2</div>
  <div data-value=3>
Option 3</div>
  <div data-value=4>
Option 4</div>
  <div data-value=5>
Option 5</div>
 </div>
 <input type=hidden name=sel1 id=sel1 value= />
</div>
Listes multiples
toutes ou aucune
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6

Vérifier

Option 1
Option 2
Option 3
Option 4
Option 5
Option 6

Vérifier

exemple de code HTML <div>
 <div class=jaria_mliste>
  <div data-value=*>toutes ou aucune </div>
  <div data-value=1>
Option 1</div>
  <div data-value=2>
Option 2</div>
  <div data-value=3>
Option 3</div>
  <div data-value=4>
Option 4</div>
  <div data-value=5>
Option 5</div>
  <div data-value=6>
Option 6</div>
</div>
Listes de données serveur
exemple de code HTML <div>
<input type=text id=txtsearch class=jaria_input jaria_upper style=width:150px; value= onkeyup=oEl.list.search(this, event, 'host/xml_champ.php', 'CHAMP') />
</div>

Code PHP du retour XML