ainsijqueryfind
jqueryfind 时间:2021-05-17 阅读:()
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
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
- ainsijqueryfind相关文档
- 配置jqueryfind
- inlinejqueryfind
- Brayjqueryfind
- configurationjqueryfind
- AjaxBehaviorjqueryfind
- givejqueryfind
MineServer：洛杉矶CN2 GIA VPS/512MB内存/20GB NVME/800GB流量/200Mbps/KVM,58元/季
mineserver怎么样?mineserver是一家国人商家，主要提供香港CN2 KVM VPS、香港CMI KVM VPS、日本CN2 KVM VPS、洛杉矶cn2 gia端口转发等服务，之前介绍过几次，最近比较活跃。这家新推出了洛杉矶CN2 GIA VPS，512MB内存/20GB NVME/800GB流量/200Mbps/KVM,58元/季，并且进行了带宽升级，同时IP更改为美国IP。点击...
Gigsgigscloud（$9.8）联通用户优选日本软银VPS
gigsgigsCloud日本东京软银VPS的大带宽配置有100Mbps、150Mbps和200Mbps三种，三网都走软银直连，售价最低9.8美元/月、年付98美元。gigsgigscloud带宽较大延迟低，联通用户的好选择!Gigsgigscloud 日本软银(BBTEC, SoftBank)线路，在速度/延迟/价格方面，是目前联通用户海外VPS的最佳选择，与美国VPS想比，日本软银VPS延迟更...
两款半月湾 HMBcloud 春节88折日本和美国CN2 VPS主机套餐
春节期间我们很多朋友都在忙着吃好喝好，当然有时候也会偶然的上网看看。对于我们站长用户来说，基本上需要等到初八之后才会开工，现在有空就看看是否有商家的促销。这里看到来自HMBcloud半月湾服务商有提供两款春节机房方案的VPS主机88折促销活动，分别是来自洛杉矶CN2 GIA和日本CN2的方案。八八折优惠码：CNY-GIA第一、洛杉矶CN2 GIA美国原生IP地址、72小时退款保障、三网回程CN2 ...
jqueryfind为你推荐
-
上海工程技术大学支持ipadnetbios端口如何组织netbios端口的外部通信tracerouteLinux 下traceroute的工作原理是什么 ！ipad如何上网IPAD4怎样上网？ipadwifiipad wifi信号差怎么办ipad上网为什么ipad网速特别慢谷歌sb为什么搜索SB第一个是google？css选择器CSS的常见选择器有哪几种苹果5.1完美越狱iOS5.1.1完美越狱教程