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
香港服务器多少钱一个月?香港云服务器最便宜价格
香港服务器多少钱一个月?香港服务器租用配置价格一个月多少，现在很多中小型企业在建站时都会租用香港服务器，租用香港服务器可以使网站访问更流畅、稳定性更好，安全性会更高等等。香港服务器的租用和其他地区的服务器租用配置元素都是一样的，那么为什么香港服务器那么受欢迎呢，香港云服务器最便宜价格多少钱一个月呢?阿里云轻量应用服务器最便宜的是1核1G峰值带宽30Mbps，24元/月，288元/年。不过我们一般选...
哪里购买香港云服务器便宜?易探云2核2G低至18元/月起;BGP线路年付低至6.8折
哪里购买香港云服务器便宜?众所周知，国内购买云服务器大多数用户会选择阿里云或腾讯云，但是阿里云香港云服务器不仅平时没有优惠，就连双十一、618、开年采购节这些活动也很少给出优惠。那么，腾讯云虽然海外云有优惠活动，但仅限新用户，购买过腾讯云服务器的用户就不会有优惠了。那么，我们如果想买香港云服务器，怎么样购买香港云服务器便宜和优惠呢？下面，云服务器网(yuntue.com)小编就介绍一下！我们都知道...
SugarHosts糖果主机商更换域名
昨天，遇到一个网友客户告知他的网站无法访问需要帮他检查到底是什么问题。这个同学的网站是我帮他搭建的，于是我先PING看到他的网站是不通的，开始以为是服务器是不是出现故障导致无法打开的。检查到他的服务器是有放在SugarHosts糖果主机商中，于是我登录他的糖果主机后台看到服务器是正常运行的。但是，我看到面板中的IP地址居然是和他网站解析的IP地址不同。看来官方是有更换域名。于是我就问 客服到底是什...
jqueryfind为你推荐
-
centrescss支持ipad支持ipad支持ipad重庆网通重庆联通网上营业厅手机版netbios端口怎么关闭8909端口！其他端口就不用了ipad连不上wifiipad2 wifi连接不上,刚连上就弹出一个 success页面google中国地图谷歌卫星地图中文版下载在哪下？？360chrome360的chrome浏览器进程有点多哦？？？icloudiphone苹果6显示已停用请连接itunes什么意思