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
Sharktech（$49/月），10G端口 32GB内存，鲨鱼机房新用户赠送$50
Sharktech 鲨鱼机房商家我们是不是算比较熟悉的，因为有很多的服务商渠道的高防服务器都是拿他们家的机器然后部署高防VPS主机的，不过这几年Sharktech商家有自己直接销售云服务器产品，比如看到有新增公有云主机有促销活动，一般有人可能买回去自己搭建虚拟主机拆分销售的，有的也是自用的。有看到不少网友在分享到鲨鱼机房商家促销活动期间，有赠送开通公有云主机$50，可以购买最低配置的，$49/月的...
腾讯云爆款秒杀：1C2G5M服务器38元/年,CDN流量包6元起
农历春节将至，腾讯云开启了热门爆款云产品首单特惠秒杀活动，上海/北京/广州1核2G云服务器首年仅38元起，上架了新的首单优惠活动，每天三场秒杀，长期有效，其中轻量应用服务器2G内存5M带宽仅需年费38元起，其他产品比如CDN流量包、短信包、MySQL、直播流量包、标准存储等等产品也参与活动，腾讯云官网已注册且完成实名认证的国内站用户均可参与。活动页面：https://cloud.tencent.c...
瓜云互联：全场9折优惠,香港CN2、洛杉矶GIA高防vps套餐,充值最高返300元
瓜云互联怎么样?瓜云互联之前商家使用的面板为WHMCS，目前商家已经正式更换到了魔方云的面板，瓜云互联商家主要提供中国香港和美国洛杉矶机房的套餐，香港采用CN2线路直连大陆，洛杉矶为高防vps套餐，三网回程CN2 GIA，提供超高的DDOS防御，瓜云互联商家承诺打死退款，目前商家提供了一个全场9折和充值的促销，有需要的朋友可以看看。点击进入：瓜云互联官方网站瓜云互联促销优惠：9折优惠码：联系在线客...
jqueryfind为你推荐
-
三星itunes之路android支持ipad重庆宽带测速重庆联通宽带测速的网址是好多呢？fusionchartsfusioncharts怎么生成图片至excel联通版iphone4s苹果4s是联通版，或移动版，或全网通如何知道？迅雷雷鸟啊啊，想下载《看门狗》可13GB的大小，我每秒才450KB，我该怎么样才能大幅度地免费提高电脑下载苹果5.1完美越狱iphone 5.1版本怎么越狱？chrome18怎么关闭chrome的自动更新，稳定版要18了，mactype要悲剧了bitchina《绝对计划》蓝野明写的 我们的曲子 谁有啊？录音也行呵 谢谢啦！~~