Yahoo! User Interface Library
Par jeanseb le dimanche, octobre 15 2006, 20:28 - Dev's Blog - Lien permanent
J'ai découvert récemment la Yahoo! User Interface Library. Cette bibliothèque fournit un ensemble de fonctions pour construire une interface JavaScript.
On peut y trouver différents scripts:
Outre le nombre intéressant de fonctions déjà implanté, cette bibliothèque est très simple d'utilisation et très bien documenté. Pour chaque script, on peut trouver de multiples exemples d'application, une documentation des fonctions mais aussi un petit tutoriel de présentation du script.
Auto Complete
J'ai personnellement testé l'auto completion sur une base de données des villes conçss grâce à la Liste des communes existantes au 1er janvier 2006 publiée par l'INSEE.
Je passerais sur la création de la liste et le coté PHP du script. Il suffit de générer une page de résultat XML basé sur une valeur de départ comme ici.
Regardons le code html.
Tout d'abord, insérons les liens vers les scripts nécessaires:
<!-- Dependencies -->
<script type="text/javascript" src="yahoo.js"></script>
<script type="text/javascript" src="dom.js"></script>
<script type="text/javascript" src="event.js"></script>
<!-- OPTIONAL: Connection (required only if using XHR DataSource) -->
<script type="text/javascript" src="connection.js"></script>
<!-- OPTIONAL: Animation (required only if enabling animation) -->
<script type="text/javascript" src="animation.js"></script> <
<!-- Source file -->
<script type="text/javascript" src="autocomplete.js"></script>
Maintenant au chargement de la page, initialisons le module:
var myServer = "./xhr_script.php";
// Précisons la structure XML
var mySchema = ["option","desc"];
// Initialisons le système
var myDataSource = new YAHOO.widget.DS_XHR(myServer, mySchema);
// On récupère des données de type XML
myDataSource.responseType = myDataSource.TYPE_XML;
// Le paramètre de requête a utiliser est debut
myDataSource.scriptQueryParam = "debut";
Ensuite rattachons les données à l'élément HTML:
// On raccroche aux données myDataSource
var myAutoComp = new YAHOO.widget.AutoComplete("myInput","myContainer", myDataSource);
// Pas dé délai entre la modification du champ et la proposition
myAutoComp.queryDelay = 0;
// Paramètre de style divers:
myAutoComp.prehighlightClassName = "yui-ac-prehighlight";
myAutoComp.useShadow = true;
Et le résultat est la.
Pour conclure
Cette bibiothèque est très intéressante, je vous conseille vivement d'y jeter un coup d'oeil. J'y ai découvert des choses que je ne pensais pas réalisable en JavaScript et cela réalisable simplement.
Commentaires
Très très interessant en effet !!!
J'espère que tu en feras bon usage ;)