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
小白云 (80元/月),四川德阳 4核2G,山东枣庄 4核2G,美国VPS20元/月起三网CN2
小白云是一家国人自营的企业IDC，主营国内外VPS，致力于让每一个用户都能轻松、快速、经济地享受高端的服务，成立于2019年，拥有国内大带宽高防御的特点，专注于DDoS/CC等攻击的防护；海外线路精选纯CN2线路，以确保用户体验的首选线路，商家线上多名客服一对一解决处理用户的问题，提供7*24无人全自动化服务。商家承诺绝不超开，以用户体验为中心为用提供服务，一直坚持主打以产品质量用户体验性以及高效...
宝塔面板批量设置站点404页面
今天遇到一个网友，他在一个服务器中搭建有十几个网站，但是他之前都是采集站点数据很大，但是现在他删除数据之后希望设置可能有索引的文章给予404跳转页面。虽然他程序有默认的404页面，但是达不到他引流的目的，他希望设置统一的404页面。实际上设置还是很简单的，我们找到他是Nginx还是Apache，直接在引擎配置文件中设置即可。这里有看到他采用的是宝塔面板，直接在他的Nginx中设置。这里我们找到当前...
friendhosting：（优惠55%）大促销，全场VPS降价55%，9个机房，不限流量
每年的7月的最后一个周五是全球性质的“系统管理员日”，据说是为了感谢系统管理员的辛苦工作....friendhosting决定从现在开始一直到9月8日对其全球9个数据中心的VPS进行4.5折（优惠55%）大促销。所有VPS基于KVM虚拟，给100M带宽，不限制流量，允许自定义上传ISO...官方网站：https://friendhosting.net比特币、信用卡、PayPal、支付宝、微信、we...
jqueryfind为你推荐
-
状态微信5用户重庆如时间选项无法打开请更改"2014年全国民营企业招聘会现场A区域企业信息",,,,齐鲁工业大学高水平学科建设专项ipad上网ipad上网速度很慢怎么回事？ipad上网新买的ipad怎么用。什么装程序 怎么上网重庆电信网速测试电信100M下载速度多少M，为什么我家里电信100M下载速度最快5M美妙，是不是严重缩水phpecho为什么在PHP中使用echo FALSE;什么也输出不了？应该如何输出FALSE？谢谢！重庆电信宽带管家电信的宽带上网助手是什么？