249
Étude de cas : Roma Italia
Voici.une.description.de.chaque.composant :
•. $()..Cette.construction.(ou.fonction).jQuery.de.base.est.utilisée.pour.sélectionner.des.
parties.du.document..Dans.cet.exemple,.nous.sélectionnons.un.élément.dont.l’ID.est.
alert.
•. .slideUp..L’une.des.nombreuses.méthodes.jQuery,.qui.sont,.en.réalité,.des.raccourcis.
de.longs.blocs.de.code.JavaScript..La.méthode.slideUp.fait.glisser.l’élément.que.nous.
ciblons.(#alert).vers.le.haut..
•. (‘slow’)..Cette.chaîne.prédéfinie.détermine.le.fonctionnement.de.la.méthode..Ici,.elle.
indique.que.l’élément.doit.glisser.lentement..
Ce.code.peut.être.ajouté.directement.dans.le.code.ou.dans.un.fichier..js.séparé.(ou.incorporé.
de.manière.dynamique)..La.seconde.méthode.est.préférable..Mais.attendez.la.suite :.je.n’ai.
pas.eu.à.programmer.le.moindre.code.de.mon.côté..La.construction,.la.méthode.et.la.chaîne.
étaient.toutes.prédéfinies.dans.jQuery !.Il.me.suffisait.de.savoir.que.l’élément.devait.glisser.
lentement.vers.le.haut..J’ai.ensuite.retrouvé.les.références.appropriées.dans.la.bibliothèque.
jQuery.qui.correspondaient.à.l’animation.et.au.mouvement.que.je.recherchais..Point.final.
Utilisation d’Ajax et de jQuery pour la fonctionnalité
de recherche
Maintenant.que.nous.nous.sommes.occupés.du.ménage.au.niveau.des.instructions,.considérons.un.exemple.d’Ajax.et.de.jQuery.combinés.dans.le.site.Roma.Italia..La.fonctionnalité.
que.nous.allons.explorer.concerne.le.champ.de.recherche..Nous.avons.précédemment.vu.
comment. le. sélecteur. d’attribut. pouvait. être. utilisé. pour. cibler. des. éléments. spécifiques.
enclos.dans.le.formulaire.pour.le.champ.de.recherche..À présent,.nous.allons.examiner.les.
autres.composants.en.action..
Le. code. de. la. fonctionnalité. de. recherche. est,. en. fait,. l’un. des. plus. complexes. du. site..
Lorsque.l’utilisateur.tape.une.requête.de.mot-clé,.l’icône.de.la.loupe.est.remplacée.par.une.
icône.de.chargement.et.les.résultats.correspondants.sont.affichés..On.appelle.parfois.cette.
fonctionnalité.suggestions automatiques (ou.autocomplétion)..Ajax.et.jQuery.œuvrent.d’arrache-pied.à.l’arrière-plan.pour.articuler.ce.mécanisme..Malgré.sa.complexité,.l’assemblage.
des.composants.est.plus.simple.qu’il.n’y.paraît..
Tout.d’abord,.voici.le.code.HTML :
Étude de cas : Roma Italia
Voici.une.description.de.chaque.composant :
•. $()..Cette.construction.(ou.fonction).jQuery.de.base.est.utilisée.pour.sélectionner.des.
parties.du.document..Dans.cet.exemple,.nous.sélectionnons.un.élément.dont.l’ID.est.
alert.
•. .slideUp..L’une.des.nombreuses.méthodes.jQuery,.qui.sont,.en.réalité,.des.raccourcis.
de.longs.blocs.de.code.JavaScript..La.méthode.slideUp.fait.glisser.l’élément.que.nous.
ciblons.(#alert).vers.le.haut..
•. (‘slow’)..Cette.chaîne.prédéfinie.détermine.le.fonctionnement.de.la.méthode..Ici,.elle.
indique.que.l’élément.doit.glisser.lentement..
Ce.code.peut.être.ajouté.directement.dans.le.code.ou.dans.un.fichier..js.séparé.(ou.incorporé.
de.manière.dynamique)..La.seconde.méthode.est.préférable..Mais.attendez.la.suite :.je.n’ai.
pas.eu.à.programmer.le.moindre.code.de.mon.côté..La.construction,.la.méthode.et.la.chaîne.
étaient.toutes.prédéfinies.dans.jQuery !.Il.me.suffisait.de.savoir.que.l’élément.devait.glisser.
lentement.vers.le.haut..J’ai.ensuite.retrouvé.les.références.appropriées.dans.la.bibliothèque.
jQuery.qui.correspondaient.à.l’animation.et.au.mouvement.que.je.recherchais..Point.final.
Utilisation d’Ajax et de jQuery pour la fonctionnalité
de recherche
Maintenant.que.nous.nous.sommes.occupés.du.ménage.au.niveau.des.instructions,.considérons.un.exemple.d’Ajax.et.de.jQuery.combinés.dans.le.site.Roma.Italia..La.fonctionnalité.
que.nous.allons.explorer.concerne.le.champ.de.recherche..Nous.avons.précédemment.vu.
comment. le. sélecteur. d’attribut. pouvait. être. utilisé. pour. cibler. des. éléments. spécifiques.
enclos.dans.le.formulaire.pour.le.champ.de.recherche..À présent,.nous.allons.examiner.les.
autres.composants.en.action..
Le. code. de. la. fonctionnalité. de. recherche. est,. en. fait,. l’un. des. plus. complexes. du. site..
Lorsque.l’utilisateur.tape.une.requête.de.mot-clé,.l’icône.de.la.loupe.est.remplacée.par.une.
icône.de.chargement.et.les.résultats.correspondants.sont.affichés..On.appelle.parfois.cette.
fonctionnalité.suggestions automatiques (ou.autocomplétion)..Ajax.et.jQuery.œuvrent.d’arrache-pied.à.l’arrière-plan.pour.articuler.ce.mécanisme..Malgré.sa.complexité,.l’assemblage.
des.composants.est.plus.simple.qu’il.n’y.paraît..
Tout.d’abord,.voici.le.code.HTML :