X-Space

Aller au contenu | Aller au menu | Aller à la recherche

Yahoo! User Interface Library

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:

// Indiquons l'adresse du script php
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(myServermySchema); 
// 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 initialise l'auto completion sur le champ myInput, les solutions seront proposées dans la div myContainer. 
// 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

1. Le lundi, octobre 16 2006, 10:18 par TitaX

Très très interessant en effet !!!
J'espère que tu en feras bon usage ;)

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

Fil des commentaires de ce billet