ainsijqueryfind

ricSarrionAveclacontributiondeThomasBertetjQueryMobileLabibliothèqueJavaScriptpourleWebmobileGroupeEyrolles,2012,ISBN:978-2-212-13388-2Ladatedu16novembre2011estunedateimportantedanslemondeduWebmobile.
C'estcejour-làqueToddParker,responsableduprojetjQueryMobile,annoncelasortiedelaversionofficielle1.
0tantattenduedelabibliothèque,aprèspresquedixversionsintermédiaires.
Ayantbénéficiéduretourd'expériencedemil-liersd'utilisateursàtraverslemondedurantl'annéeécoulée,ellefaitpreuved'unematuritécertaine.
S'appuyantsurlabibliothèqueJavaScriptjQuery,quiestuneréférencedansledomaine,jQueryMobileestaujourd'huiunebibliothèqueadaptéeaussibienpourlestéléphonesmobilesquepourlestablettestactiles.
Elleprendencomptetouteslesspécificitésdecesnouveauxsupports,dontlesfonctionnalitésetlesinterfacessedémarquentclairementduWebtraditionnel.
Conuepourêtrefaciled'utilisation,toutenétantperformanteetsurtoutportablesurlaplupartdestéléphonesoutablettes,onpeutdoncsupposerqu'ilseradifficiledelaconcurrencer.
D'ailleurs,unesemaineàpeineaprèslasortieofficielledelaversion1.
0,elleadéjàgagnéletitredeInnovationoftheyeardécernépar.
NetAwards.
Adresséaussibienauxdéveloppeurs,intégrateursetchefsdeprojet,qu'auxétudiants,celivreapourobjectifd'expliquertouteslesfacettesdecettebibliothèque,afindepermettrelaconstructiondesitesoud'applicationsquifonctionnerontsurlaplupartdessupportsmobilesactuels.
Alorsenroutepourdécouvrircettefabuleusebibliothèquequ'estjQueryMobile!
Avant-proposLIRELeguidezendudéveloppeurmobileAvecleWebmobile,denouveauxenjeux,aussibienfonctionnelsqu'ergonomiquesapparaissent,sanscompterlanécessitéd'adaptationàlavariétédesterminauxdisponiblessurlemarché.
Voiciunouvragequifaitlepointsurlasituation,prodiguantconseilsetbonnespratiquespouréviterlesécueilsetrépondreintelligemmentauxproblématiquesmobiles.
RF.
Daoust,D.
Hazal-Massieux,ReleverledéfiduWebmobile:Bonnespratiquesdeconceptionetdedéveloppement,Eyrolles,2011jQueryMobile.
bookPageVWednesday,December21,20111:10PMjQueryMobileVIStructuredel'ouvrageCelivreestdécoupéentroisparties.
Lapremièreconcernel'étudedejQueryMobiled'unpointdevuedesigndel'application.
VousyapprendrezàutiliserlescomposantsHTMLetlesattributscorrespondantspermettantd'afficherlesfenêtresetleurcontenuàl'écran.
l'issuedecettepartie,l'aspectdevotresiteoudevotreapplicationseraadaptéaumondemobile,vraimentdifférentd'unsitewebtraditionnel.
Ladeuxièmepartieestunepartieplustechniquequitraitedel'utilisationdeJavaScriptavecjQueryMobile.
Ellevousmontrecommentfairecommuniquervotreapplicationaveclemondeextérieur,parexemplepourafficherdesdonnéesd'unserveurouafficherunecarteGoogleMaps.
Enfin,latroisièmepartieproposeuneétudedecas,afindemettreenapplicationlesconceptsexposésdanslespartiesprécédentes.
Nousydétaillonslaréalisationd'uneapplicationdecommunicationentrepersonnes(messagerie).
Biensr,cettepartienepeutêtrecomprisequesilesprécédentesontétéassimilées.
LIREjQueryetjQueryUIPourmatrisertouteslesfonctionnalitésdelabibliothèquejQuery,ainsiquedesonmodulejQueryUI,permet-tantdecréerdescomposantsgraphiquesavancés,référez-vousàl'ouvragesuivant:R.
Sarrion,jQuery&jQueryUI,Eyrolles,2011jQueryMobile.
bookPageVIWednesday,December21,20111:10PMTabledesmatièresPREMIREPARTIEAfficherlescomposantsgraphiques1CHAPITRE1InstallationdejQueryMobile.
3Installationd'unserveurweb3InstallationdejQueryMobile4InstallationsousunserveurPHP5Installationindépendanted'untypedeserveur7Paramétragesspécifiquesàl'iPhone8Rendrel'applicationaccessibledepuislebureaudel'iPhone8Supprimerl'affichagedelabarred'adressedunavigateur9Définiruneimageaffichéeaudémarrage9CHAPITRE2Afficherdesfenêtres11Unepremièrefenêtre11Etsionn'utilisepasdefenêtres14Passerd'unefenêtreàl'autre16CasdesfenêtressituéesdansdespagesHTMLdifférentes19Conserverlesfenêtresenmémoirevial'attributdata-dom-cache20Anticiperlechargementdesfenêtresvial'attributdata-prefetch21Transitionsentrelesfenêtres23Fenêtressuperposées25Lafenêtresuperposéeestdéfinieparlesattributsdulien25Lafenêtresuperposéeestdéfinieparsespropresattributs27UtiliserlesthèmesCSS28Indiquerunnouveauthèmepourunefenêtre31Créersespropresthèmes36jQueryMobile.
bookPageVIIWednesday,December21,20111:10PMjQueryMobileVIIICHAPITRE3Afficherdeslistes.
39Afficherunelistesimple39Ajouterdesliens41Afficherunelistenumérotéecontenantdesliens43Insérerdesséparateursdansleslistes44Ajouterunefonctionderecherchedansuneliste46Afficheruncompteurdansunélémentdeliste48Inclureuneimage80*80danslesélémentsdeliste50Inclureuneimage20*15danslesélémentsdeliste54Personnaliserleslistes56Modifierl'icneaffichéedansleslistes56Supprimerl'icneaffichéedansleslistes58Afficherdeslistesavecdesbordsarrondis60Positionnerdutexteàdroitedanslesélémentsdeliste62UtiliserlesthèmesCSS65Plusieursthèmesdansuneliste65Personnaliserlesséparateursdansleslistes67Personnaliserlescompteursaffichésdansleslistes68CHAPITRE4Afficherdesboutons.
71DéfinirunboutonavecjQueryMobile71QuedeviennentlesanciensboutonsdéfinisparHTML73Associeruneicneàunbouton75Définirunboutonsousformed'icne(sanstexte)77Définirlalargeurdubouton79Juxtaposerlesboutonsverticalement81Juxtaposerlesboutonshorizontalement82Personnaliserlesboutons84UtiliserlesthèmesCSS86CHAPITRE5Afficherdesdonnéessousformedetables.
89Afficheruntableausurdeuxcolonnes89Afficheruntableausurplusieurscolonnes91Plusieurslignesdansletableau92Insérerdesboutonsdanslestableaux95Personnaliserlestableaux97Untableauaéréetcentré98jQueryMobile.
bookPageVIIIWednesday,December21,20111:10PMTabledesmatièresIXAlternerleslignespairesetimpaires(encréantsespropresstyles)99UtiliserlesstylesdéfinisparjQueryMobile101Alignerlesboutonscteàcte104UtiliserlesthèmesCSS106CHAPITRE6Afficherlesélémentsdeformulaires109Leschampsdesaisie109Saisiesuruneligne109Saisiesurplusieurslignes111Champsderecherche112Leslistesdesélection114Listesdesélectionsimple114Listesdesélectionmultiple118Grouperlesélémentsdanslaliste123Modifierl'icneaffichéepourlaliste124Lescasesàcocher126Afficherunecaseàcocher126Disposerlescasesàcocherverticalement128Disposerlescasesàcocherhorizontalement130Lesboutonsradio132Disposerlesboutonsradioverticalement132Disposerlesboutonsradiohorizontalement134Lesinterrupteurs136Lessliders138Mieuxdisposerlesélémentssurl'écran140Lesmenusenaccordéon140Espacerlesgroupesd'informations145UtiliserlesthèmesCSS146Etsionveutconserverl'aspectd'originedeséléments147CHAPITRE7Afficherlesbarresd'outils149Lesbarresd'outilsheaderetfooter150Header150Footer151Lesbarresd'outilsdetypefixe152Gérerlesfenêtresenmodepleinécran156Créerdesboutonsdansunebarred'outilsheader158Insérerunouplusieursboutons159jQueryMobile.
bookPageIXWednesday,December21,20111:10PMjQueryMobileXSimulerleboutonBack161RenommerleboutonBack162Créerdesboutonsdansunebarred'outilsfooter164Insérerunouplusieursboutons164Grouperlesboutons166Utiliserlesbarresdenavigation168Insertiondansunebarred'outilsheader168Insertiondansunebarred'outilsfooter172Insertionendehorsd'unebarred'outils175Répartirlesboutonsdansplusieurslignesdelabarredenavigation177Insérerdesicnesdanslesbarresdenavigation179Inséreruneicnestandard179Inséreruneicnepersonnalisée181Créerunfooterpersistantdanslesfenêtres183Barred'outilssimple183Barredenavigation186UtiliserlesthèmesCSS188DEUXIMEPARTIEManipulerlesélémentsavecJavaScript191CHAPITRE8ConventionsdejQueryMobile.
193L'objet$.
mobile193InitialisationdejQueryMobile195Optionsdeconfiguration197Optionsgérantlesfenêtres198Optionsgérantleslistes199Optionsgérantlesbarresdenavigation199Optionsgérantlesboutons200Optionsgérantleschampsdesaisie200Optionsgérantlescasesàcocheretlesboutonsradio201Optionsgérantleslistesdesélection201Optionsgérantlessliders202Optionsgérantlesmenusenaccordéon202Utilisationdesnamespaces203IndiquerlenamespacedanslapageHTML203Accéderàl'attributdanslecodeJavaScript205LesméthodesjqmData(name)etjqmData(name,value)206Accéderàl'attributdanslessélecteurs207vénementsvirtuels208jQueryMobile.
bookPageXWednesday,December21,20111:10PMTabledesmatièresXICHAPITRE9CréeruncomposantjQueryMobile.
211Créeretutiliseruncomposant211treprévenudelacréationducomposant214Transmettredesparamètresaucomposant215Utiliserlecomposantaumoyend'unappelAjax219Aveclaméthodedecréationducomposant219Avecl'événementcreate221Ajouterdesméthodesaucomposant222Créeretgérerdesévénementssurlecomposant226Remplacerdeuxévénementsparunseul229ComposantsdéfinisdansjQueryMobile230CHAPITRE10Manipulerlesfenêtres.
233Gérerlesattributsdesliens233Lienversuneadressee-mailouunnumérodetéléphone233LienversunefenêtresituéedanslamêmepageHTML235LienversunefenêtresituéedansuneautrepageHTMLsurlemêmeserveur.
.
.
.
236ConstructiondelafenêtreparleserveurPHP240LienversuneautrepageHTMLsituéesurunautreserveur241Inhiberlechargementd'unepageHTMLavecAjax242Casdesfenêtressuperposées243Laméthode$.
mobile.
changePage(toPage,options)245AfficherunefenêtresituéedanslamêmepageHTML246AfficherunefenêtresituéedansuneautrepageHTML248Transmettredesdonnéeslorsdel'affichagedelafenêtre250Modifierlatransitionaffichantlafenêtre252Créerunefenêtredynamiquement,puisl'affichersuiteàunclic252Laméthode$.
mobile.
loadPage(url,options)254Simulerl'attributdata-prefetchenutilisantlaméthode$.
mobile.
loadPage254Processusdecréationdesfenêtres256Traitementdel'événementpagecreate257CréationdescomposantsstandardsdansjQueryMobile259Synchronisationdelacréationdescomposantsdanslafenêtre259Fenêtressuperposées260Afficherunefenêtresuperposée260Fermerunefenêtresuperposée262Supprimerleboutondefermeturedelafenêtresuperposée263Autresméthodesetpropriétés265jQueryMobile.
bookPageXIWednesday,December21,20111:10PMjQueryMobileXIIGérerlesévénementssurlesfenêtres267Créationdelafenêtre267ChargementdelafenêtreviaAjax269SuppressiondelafenêtredansleDOM273Affichagedelafenêtre274vénementsliésàlaméthode$.
mobile.
changePage276Mouvementsdanslafenêtre277Changementd'orientationdel'écran281Personnaliserlesfenêtres283Exemplesdemanipulationdesfenêtres287Naviguerentreplusieursfenêtresgrceauxévénementsswipe287Créerunefenêtredynamiquementpuisl'afficher289CHAPITRE11Manipulerleslistes291Créerdynamiquementuneliste291Listesansimages291Listeavecimages293TransformerunelisteHTMLenunelistejQueryMobile295RécupérerunelisteparunappelAjax299Insérerunélémentdansuneliste302Supprimerunélémentdansuneliste304Gérerlesévénementssurleslistes306Personnaliserleslistes307Exemplesdemanipulationdeslistes309Créerdeslistescontenantdessous-listes309Modifierl'icned'unélémentdeliste311Gérerleclicsurl'icned'unélémentdansunelistestatique314Gérerleclicsurl'icned'unélémentdansunelistecrééedynamiquement.
.
.
317Solution1317Solution2318Permettrelasuppressiond'unélémentdelisteparunclicprolongé319Permettrelasuppressiond'unélémentdelisteparunswipe320Conserverl'aspectarrondiauxbordsdelaliste321CHAPITRE12Manipulerlesboutons325Créerdynamiquementunbouton325TransformerunélémentHTMLenunboutonjQueryMobile327InsérerdesboutonsviaAjax329jQueryMobile.
bookPageXIIWednesday,December21,20111:10PMTabledesmatièresXIIIGérerlesévénementssurlesboutons332Personnaliserlesboutons333Aspectgénéraldubouton333Aspectduboutonaprèsunclic335Exemplesdemanipulationdesboutons336Gérerunboutonàdeuxétats(enfoncé/nonenfoncé336Modifierdynamiquementletexteetl'icnedubouton337Afficherdynamiquementunboutondesuppressionsurunélémentdeliste.
.
.
339Cacherleboutondesuppressionparunclicàl'extérieurdubouton341CHAPITRE13Manipulerlesdonnéessousformedetables345Créerdynamiquementuntableau345TransformerunélémentHTMLenuntableaujQueryMobile346Tableausimple346Tableaucontenantdesboutons347InsérerdestableauxviaAjax351Tableausimple351Tableaucontenantdesboutons353Insérerdynamiquementunenouvellecolonne355Insérerdynamiquementunenouvelleligne357Gérerlesévénementssurlestableaux359Exempledemanipulationdestableaux361Unmenuprincipalsousformed'imagesdansuntableau361CHAPITRE14Manipulerleschampsdesaisie.
365Créerdynamiquementunchampdesaisie365Champdesaisied'uneseuleligne365Champdesaisiemultiligne367Champderecherche368TransformerunélémentHTMLenchampdesaisiejQueryMobile369Champdesaisied'uneseuleligne369Champdesaisiemultiligne370Champderecherche371InsérerdeschampsdesaisieparunappelAjax371Affecteretrécupérerlavaleurinscritedansunchampdesaisie373Champsdesaisiesimpleetmultiligne375Champsderecherche376Gérerlesévénementssurleschampsdesaisie378jQueryMobile.
bookPageXIIIWednesday,December21,20111:10PMjQueryMobileXIVPersonnaliserleschampsdesaisie382Modifierl'aspectd'unchampdesaisiequin'apaslefocus382Modifierl'aspectd'unchampdesaisiequialefocus383Exemplesdemanipulationdeschampsdesaisie384Transmettrelavaleurd'unchampdesaisiesurleserveurviaAjax384Afficherlaréponseduserveurdansunenouvellefenêtre386CHAPITRE15Manipulerleslistesdesélection.
389Créerdynamiquementunelistedesélection389TransformerunélémentHTMLenunelistedesélectionjQueryMobile.
.
.
.
391Utiliserl'affichagenatifdeslistesdesélection391Utiliserl'affichageaméliorédeslistesdesélection393InsérerunelistedesélectionparunappelAjax394Ouvriretfermerunelistedesélection397ListedesélectiondéjàprésentedanslecodeHTML397Listedesélectioncrééedynamiquement399Affecteretrécupérerlesélémentssélectionnésdansuneliste401ListedesélectiondéjàprésentedanslecodeHTML401Listedesélectioncrééedynamiquement403Inséreretsupprimerdesélémentsdansunelistedesélection406Gérerlesévénementssurleslistesdesélection408Personnaliserleslistesdesélection409Exemplesdemanipulationdeslistesdesélection413Transmettrelavaleurd'unelistedesélectionsurleserveurviaAjax413Utiliserunboutondetypesubmitpourtransmettrelesinformations416Ajouterunélémentdelistesuiteàunclicsurunbouton417Effectueruntraitementlorsd'unclicsurunélémentquelconquedelaliste.
.
.
.
418CHAPITRE16Manipulerlescasesàcocher421Créerdynamiquementdescasesàcocher421TransformerunélémentHTMLencaseàcocherjQueryMobile423InsérerdescasesàcocherviaAjax423Affecteretrécupérerlavaleurd'unecaseàcocher426CaseàcocherdéjàprésentedanslecodeHTML426Caseàcochercrééedynamiquement428Inséreretsupprimerunecaseàcocherdansunelisteexistante431Gérerlesévénementssurlescasesàcocher434Personnaliserlescasesàcocher435jQueryMobile.
bookPageXIVWednesday,December21,20111:10PMTabledesmatièresXVExemplesdemanipulationdescasesàcocher437Transmettrel'ensembledesvaleursdescasesàcocherauserveur,puisafficheruneautrefenêtre437Utiliserunboutondetypesubmitpourtransmettrelesinformations.
.
.
.
440CHAPITRE17Manipulerlesboutonsradio443Créerdynamiquementdesboutonsradio443TransformerunélémentHTMLenboutonradiojQueryMobile445InsérerdesboutonsradioviaAjax446Affecteretrécupérerlavaleurd'unboutonradio448BoutonradiodéjàprésentdanslecodeHTML448Boutonradiocréédynamiquement450Inséreretsupprimerunboutonradiodansunelisteexistante453Gérerlesévénementssurlesboutonsradio456Personnaliserlesboutonsradio457Exemplesdemanipulationdesboutonsradio459Transmettreleboutonradiosélectionnéauserveur,puisafficheruneautrefenêtre459Utiliserunboutondetypesubmitpourtransmettrelesinformations.
.
.
.
461CHAPITRE18Manipulerlesinterrupteurs465Créerdynamiquementuninterrupteur465TransformerunélémentHTMLeninterrupteurjQueryMobile467InséreruninterrupteurviaAjax468Affecteretrécupérerlavaleurd'uninterrupteur469InterrupteurdéjàprésentdanslecodeHTML469Interrupteurcréédynamiquement470Gérerlesévénementssurlesinterrupteurs473Personnaliserlesinterrupteurs474Exemplesdemanipulationdesinterrupteurs477Transmettrelavaleurdel'interrupteurauserveur,puisafficheruneautrefenêtre477Utiliserunboutondetypesubmitpourtransmettrelesinformations.
.
.
.
479CHAPITRE19Manipulerlessliders.
483Créerdynamiquementunslider483TransformerunélémentHTMLensliderjQueryMobile485jQueryMobile.
bookPageXVWednesday,December21,20111:10PMjQueryMobileXVIInsérerunsliderviaAjax485Affecteretrécupérerlavaleurd'unslider487SliderdéjàprésentdanslecodeHTML487Slidercréédynamiquement489Gérerlesévénementssurlessliders492Personnaliserlessliders494Exemplesdemanipulationdessliders496Transmettrelavaleurdusliderauserveur496Utiliserunboutondetypesubmitpourtransmettrelesinformations498Modifierl'opacitéd'uneimageavecunslider499CHAPITRE20Manipulerlesmenusenaccordéon501Créerdynamiquementunmenuenaccordéon501TransformerunélémentHTMLenunmenuenaccordéonjQueryMobile.
.
.
503InsérerdesmenusenaccordéonviaAjax504Ouvriretfermerunmenuenaccordéon507Vérifiersiunmenuenaccordéonestouvertoufermé509Gérerlesévénementssurlesmenusenaccordéon511Personnaliserlesmenusenaccordéon514Exemplesdemanipulationdesmenusenaccordéon516Chargerlecontenud'unmenuenaccordéonviaAjax516Modifierdynamiquementletitred'unmenuenaccordéon518Produireuneffetàl'ouvertureetàlafermeturedumenuenaccordéon520CHAPITRE21Manipulerlesbarresd'outils.
523Créerdynamiquementunebarred'outils523TransformerunélémentHTMLenunebarred'outilsjQueryMobile525Insérerdesbarresd'outilsviaAjax525InsérerdesbarresdenavigationviaAjax527Gérerlesévénementssurlesbarresd'outils530Personnaliserlesbarresd'outils531Méthodesdegestiondesbarresd'outilsdetypefixe534Exemplesdemanipulationdesbarresd'outils534Gérerunsystèmed'ongletsdansunebarredenavigation534GérerlecontenudesongletsviaAjax536jQueryMobile.
bookPageXVIWednesday,December21,20111:10PMTabledesmatièresXVIICHAPITRE22Basesdedonnéesctéclient.
539Stockagepermanentetstockagedanslasession540Créationd'unebasededonnées541Utilisationdelabasededonnées542Exempled'utilisationd'unebasededonnées543Améliorationduprogramme(suite)547CHAPITRE23GPSetGoogleMaps.
551UtiliserleGPSavecjQueryMobile551IntégrerunecarteGoogleMapsàl'application553TROISIMEPARTIEtudedecas:développeruneapplicationdemessagerie557CHAPITRE24Cinématiquedel'application559Enchanementdesfenêtres559Objectifsàtraiter561CHAPITRE25tapen°1:seconnecter.
563Ctéclient563Ctéserveur565CHAPITRE26tapen°2:afficherlesmembresconnectés569Ctéclient569Ctéserveur572CHAPITRE27tapen°3:envoyerdesmessages575Ctéclient575Ctéserveur578CHAPITRE28tapen°4:recevoirdesmessages581Ctéclient581Ctéserveur583jQueryMobile.
bookPageXVIIWednesday,December21,20111:10PMLebutdecelivreétantd'utiliserjQueryMobileafindecréerdessiteswebaccessi-blesdepuislestéléphonesmobilesoudestablettesgraphiquescommel'iPad,nousdevonspourcelacommencerparinstallerunserveurwebquicontiendralespagesHTMLdenotresite.
Nousverronsensuitecommentinstallerlabibliothèque,enajoutantquelquesprécisionsquantauxparamétragesspécifiquesaudéveloppementpouriPhone.
Installationd'unserveurwebPourhébergernotresite,n'importequeltypedeserveurwebfaitl'affaire(PHP,.
Net,Java,RubyonRails,etc.
).
Danscetouvrage,nousprenonsenexempleunserveurPHP.
LeserveurPHPinstalléseradifférentselonquel'onestsousWindowsousousMacOS:sousWindows,oninstalleraAppServ(http://www.
appservnetwork.
com);sousMacOS,oninstalleraMAMP(Mac,Apache,MySQL,PHP,http://www.
mamp.
info).
Unefoisleserveurinstalléetlancé,vérifiezquetoutestcorrectensaisissantl'URLhttp://localhostdanslabarred'adressedevotrenavigateur.
Vousdevriezvoirs'afficherla1InstallationdejQueryMobilejQueryMobile.
bookPage3Wednesday,December21,20111:10PMjQueryMobile4paged'accueilduserveur.
Lafigure1-1représentecettefenêtrepourAppServsousWindows,dansunnavigateurFirefox.
Siaucunnomdefichiern'estindiquéàlafindel'URL,ilcorrespondaufichierpardéfautindex.
html.
Doncl'URLhttp://localhostdésigneenfaitlefichierindex.
htmlsituédansappserv/www(sousWindows)ouMAMP/htdocs(sousMacOS).
InstallationdejQueryMobileVouspouveztéléchargerlefichierZIPcontenantlessourcesdelabibliothèque,àl'adressehttp://jquerymobile.
com/download/.
Vouspouvezégalementutiliserlesfichierssetrou-vantsurleserveurcode.
jquery.
com,commecelaestindiquédanslapagedetéléchargementaffichée(voirci-aprèslasectionInstallationindépendanted'untypedeserveur).
Quellequesoitl'installationquevouschoisissez(PHP,RubyOnRailsouautre),vousdevezutiliserlabibliothèquejQuerystandard(àpartirdelaversion1.
6),queFigure1–1Paged'accueilduserveurPHPREMARQUEEmplacementdesfichierssurleserveurSousAppServ,lesfichierssontsituésdansappserv/www.
SousMAMP,ilssontsituéssousMAMP/htdocs.
Dessous-répertoirespeuventêtrecréésàcesemplacementspourcontenirlespagesdenotresite(avectoutessescomposantes:images,etc.
).
jQueryMobile.
bookPage4Wednesday,December21,20111:10PMInstallationdejQueryMobileCHAPITRE15vouspouveztéléchargersurhttp://jquery.
com.
EllesetrouveégalementdanslerépertoiredemosdejQueryMobile.
InstallationsousunserveurPHPDécompressezlefichierZIPdanslerépertoireduserveur(ouunsous-répertoirequevouscréezdanscelui-ci):répertoireappserv/wwwsousWindows;répertoireMAMP/htdocssousMacOS.
Ici,nousdécompressonslesfichiersdansunrépertoiretestduserveurquicon-tiendralesfichiersdenotreapplication.
Aprèsdécompression,cerépertoirecontientunsous-répertoirecontenantjQueryMobile(icijquery.
mobile-1.
0,quel'onrenommeenjquery.
mobile).
LerépertoirecontenantjQueryMobilecontientunelistedefichiers:jquery.
mobile-1.
0.
css,quel'onrenommeenjquery.
mobile.
css:ilcorres-pondaufichierCSS(CascadingStyleSheet)dejQueryMobile,enversionnoncompressée.
CefichierserviraàstylerlespagesHTMLaffichéesdanslenaviga-teurdutéléphone;jquery.
mobile-1.
0.
js,quel'onrenommeenjquery.
mobile.
js:ilcorrespondaufichierJavaScriptdejQueryMobile,enversionnoncompressée.
CefichierserviraàutiliserducodeJavaScriptpouvants'exécuterdanslenavigateurdutéléphone;jquery.
mobile-1.
0.
min.
css:versioncompresséedejquery.
mobile-1.
0.
css;jquery.
mobile-1.
0.
min.
js:versioncompresséedejquery.
mobile-1.
0.
js;enfin,lerépertoireimages,contenantcertainesimagesquiserontaffichéesdanslespagesHTMLàl'aidededirectivesCSS(fonctionnementgéréeninterneparjQueryMobile).
Unexempledecoded'uneapplicationbasiquesousPHPseraitlesuivant(ilcorres-pondaufichierindex.
html).
Coded'uneapplicationsousPHP(fichierindex.
html)jQueryMobile.
bookPage5Wednesday,December21,20111:10PMjQueryMobile6NousincluonslefichierCSSdejQueryMobile,puislesdeuxfichiersJavaScriptcor-respondantàjQueryetjQueryMobile.
NotezquelefichierdejQuerydoitêtreinclusavantceluidejQueryMobile,lesecondayantbesoindupremierpourfonc-tionner.
Lefichierjquery.
jsestsupposéiciêtresituédanslemêmerépertoirequelefichierindex.
html.
Ladirectivepermetdes'assurerquelenavigateurutilisédansletéléphoneprendraencomptecertainesspécificitésinclusesdansjQueryMobile(qui,autrement,neleseraientpeutêtrepas).
OnincluradonccettedirectivedanschacunedenospagesHTML.
Ladirectiveetsesattributspermettentd'indiquerquel'affichagepeuts'effec-tuersurunécrandontlesdimensionssontinférieuresauxécranstraditionnels(parexemple,unécrandetéléphonemobile).
Ainsi,latailledescaractèresestajustéeenconséquence.
LesélémentsinclusdanslapageHTMLcorrespondentauxélémentsquiserontaffichésdanslafenêtredunavigateur.
Cesélémentssontexpliquésendétaildanslechapitresuivant.
Vérifionsquelapages'affichecorrectementdanslenavigateurd'untéléphonemobile(ici,surlafigure1-2,uniPhone,maislerésultatestidentiquepourlesautrestypesdetéléphonesprisenchargeparjQueryMobile).
Letestdoits'effectuerenindiquantl'adresseIPduserveur(icihttp://192.
168.
1.
30/test,carnotreapplicationestdanslerépertoiretestduserveur).
Titredelafenêtre