250
Maîtrise des CSS
Pour. remplacer. l’icône. par. l’icône. de. chargement,. la. manière. la. plus. légère. (que. je. n’ai.
pourtant. pas. encore. vue. sur. d’autres. sites). consiste. à. combiner. l’image. d’arrière-plan.
pour.le.champ.de.saisie.et.l’icône.de.chargement.dans.une.unique.image.GIF.animée.(voir.
Figure 10.16)..Le.code.CSS.est.ensuite.utilisé.pour.positionner.l’image.en.fonction.de.l’état.
de.l’interaction,.en.la.décalant.vers.le.haut.ou.vers.le.bas.quand.l’utilisateur.tape.dans.le.
champ,.afin.de.permuter.entre.l’icône.de.la.loupe.et.l’icône.de.chargement.
Figure 10.16
search-bg.gif, un
unique GIF animé qui
inclut deux états.
Voici.le.fichier.CSS.pour.le.champ.de.saisie :.
#header form input[type="text"] {
...
padding: 6px 0 0 28px;
height: 20px;
background: url(../img/search-bg.gif) no-repeat;
}
Par.défaut,.l’image.d’arrière-plan.est.positionnée.en.haut.à.gauche.et.nous.restreignons.la.
hauteur.à.20 pixels..Ajoutez-y.6 pixels.de.remplissage.supérieur.et.cela.donne.26 pixels.de.
l’image.qui.s’affichent.–.soit.exactement.la.moitié.de.la.hauteur.de.l’image..Seule.la.portion.
correspondant.à.la.loupe.apparaît..
Lorsque.l’utilisateur.commence.à.taper,.plusieurs.choses.se.passent..Tout.d’abord,.chaque.
fois.qu’il.tape.un.caractère,.quatre.fichiers.sont.concernés :.autocomplete.css,.jquery.plugins.js,. jquery.autocomplete.js. et. search.php.. Lorsque. la. saisie. commence,. class="ac_
loading".est.ajouté.dynamiquement.au.champ.de.saisie.puis.supprimé.lorsque.la.recherche.
automatique.affiche.les.résultats..Ce.sélecteur.se.trouve.dans.autocomplete.css,.où.il.reçoit.
le.style.suivant :
.ac_loading {
background: url(../img/search-bg.gif) no-repeat 0 -26px !important;
}
Vous. remarquerez. que. l’image. d’arrière-plan. est. maintenant. positionnée. à. –26 pixels. du.
haut,. ce. qui. la. décale. vers. le. haut. et. révèle. sa. seconde. moitié. (l’icône. de. chargement)..
Nous.indiquons.ainsi.à.l’utilisateur.que.des.données.sont.récupérées.de.manière.asynchrone.
auprès.du.serveur.(search.php)..
Ensuite,. pendant. que. l’icône. de. chargement. tournoie,. des. données. sont. échangées. avec.
search.php.afin.que.soient.localisés.les.résultats.correspondant.aux.caractères.que.l’utilisateur.a.tapés..Si.vous.ouvrez.search.php,.vous.trouverez.certains.des.termes.avec.lesquels.j’ai.
rempli.le.fichier :.Ancient.Ostia,.Ancient.Rome,.Arch.of.Constantine, etc.
Les.résultats.correspondants.sont.renvoyés.à.la.page.et.un.petit.menu.de.sélection.est.affiché.
sous.le.champ.de.saisie.avec.la.liste.des.résultats.(voir.Figure 10.17)..Ce.menu,.qui.n’est.
Maîtrise des CSS
Pour. remplacer. l’icône. par. l’icône. de. chargement,. la. manière. la. plus. légère. (que. je. n’ai.
pourtant. pas. encore. vue. sur. d’autres. sites). consiste. à. combiner. l’image. d’arrière-plan.
pour.le.champ.de.saisie.et.l’icône.de.chargement.dans.une.unique.image.GIF.animée.(voir.
Figure 10.16)..Le.code.CSS.est.ensuite.utilisé.pour.positionner.l’image.en.fonction.de.l’état.
de.l’interaction,.en.la.décalant.vers.le.haut.ou.vers.le.bas.quand.l’utilisateur.tape.dans.le.
champ,.afin.de.permuter.entre.l’icône.de.la.loupe.et.l’icône.de.chargement.
Figure 10.16
search-bg.gif, un
unique GIF animé qui
inclut deux états.
Voici.le.fichier.CSS.pour.le.champ.de.saisie :.
#header form input[type="text"] {
...
padding: 6px 0 0 28px;
height: 20px;
background: url(../img/search-bg.gif) no-repeat;
}
Par.défaut,.l’image.d’arrière-plan.est.positionnée.en.haut.à.gauche.et.nous.restreignons.la.
hauteur.à.20 pixels..Ajoutez-y.6 pixels.de.remplissage.supérieur.et.cela.donne.26 pixels.de.
l’image.qui.s’affichent.–.soit.exactement.la.moitié.de.la.hauteur.de.l’image..Seule.la.portion.
correspondant.à.la.loupe.apparaît..
Lorsque.l’utilisateur.commence.à.taper,.plusieurs.choses.se.passent..Tout.d’abord,.chaque.
fois.qu’il.tape.un.caractère,.quatre.fichiers.sont.concernés :.autocomplete.css,.jquery.plugins.js,. jquery.autocomplete.js. et. search.php.. Lorsque. la. saisie. commence,. class="ac_
loading".est.ajouté.dynamiquement.au.champ.de.saisie.puis.supprimé.lorsque.la.recherche.
automatique.affiche.les.résultats..Ce.sélecteur.se.trouve.dans.autocomplete.css,.où.il.reçoit.
le.style.suivant :
.ac_loading {
background: url(../img/search-bg.gif) no-repeat 0 -26px !important;
}
Vous. remarquerez. que. l’image. d’arrière-plan. est. maintenant. positionnée. à. –26 pixels. du.
haut,. ce. qui. la. décale. vers. le. haut. et. révèle. sa. seconde. moitié. (l’icône. de. chargement)..
Nous.indiquons.ainsi.à.l’utilisateur.que.des.données.sont.récupérées.de.manière.asynchrone.
auprès.du.serveur.(search.php)..
Ensuite,. pendant. que. l’icône. de. chargement. tournoie,. des. données. sont. échangées. avec.
search.php.afin.que.soient.localisés.les.résultats.correspondant.aux.caractères.que.l’utilisateur.a.tapés..Si.vous.ouvrez.search.php,.vous.trouverez.certains.des.termes.avec.lesquels.j’ai.
rempli.le.fichier :.Ancient.Ostia,.Ancient.Rome,.Arch.of.Constantine, etc.
Les.résultats.correspondants.sont.renvoyés.à.la.page.et.un.petit.menu.de.sélection.est.affiché.
sous.le.champ.de.saisie.avec.la.liste.des.résultats.(voir.Figure 10.17)..Ce.menu,.qui.n’est.