Hvordan bygge en grunnleggende jQuery-mobilside for HTML5 og CSS3-programmering - dummies <[SET:descriptionno]Hvordan lage en grunnleggende jQuery-mobilside for HTML5 og CSS3-programmering

Det er en svært populær tilnærming blant HTML5- og CSS3-programmører å bygge mobile, vennlige nettsteder med AJAX, og det er å bruke et tilleggsbibliotek til jQuery kalt jQuery Mobile . Jquery Mobile er en kraftig kombinasjon av JavaScript og CSS-kode bygget på toppen av biblioteket.

JQuery-biblioteket fungerer ved å ta en vanlig HTML5-side og endre den på måter som etterligner et innfødt utseende. Koden ser veldig ut som vanlig HTML:

Mobil Demo

JQuery Mobile Demo
jQuery Mobile nettsted

Dette er en vanlig liste
Kodet for å se ut som
en mobilliste

fra > HTML Alt i One for Dummies Noen detaljer gjør denne siden til en mobilundersøkelse:

Inkluder jQuery mobil CSS.

1. Dette er en spesiell CSS-fil som er utformet for å forvandle HTML-elementer til sine mobile motstykker. Selv om du kan laste ned det selv, kobler de fleste utviklere direkte til jQuery-siden.

   Inkluder standard jQuery-biblioteket.

2. Mye av koden er basert på jQuery, så integrer også jQuery-biblioteket. Igjen må du trekke jQuery fra hovedsiden jQuery.

   Inkluder jQuery-mobilbiblioteket.

3. Dette er et JavaScript-bibliotek som utvider biblioteket for å legge til ny mobilspesifikk oppførsel.

   Legg til et data-role = "side" attributt til hoved div.

4. Lag en hoved div på siden din og gi attributten til den. Dette er et egendefinert datarulleattributt som er lagt til av jQuery mobile. jQuery ser over datatrollene til de ulike elementene og bruker stil og atferd forandrer seg automatisk til disse elementene. Tilordne hoved div data rollen side. Dette forteller nettleseren å behandle hele diven som en side.

   Angi et datatema.

5. Du kan bruke et datatema til et hvilket som helst element, men du bruker nesten alltid et tema på siden. jquery mobile kommer med en rekke standard temaer innebygd, kalt "a" gjennom "e. "Eksperiment for å finne den du liker, eller du kan bygge din egen med den spesielle mobile versjonen av ThemeRoller.

   Legg til flere divs på siden din.

6. Legg til noen flere div i din div div. Vanligvis har du tre: header, innhold og bunntekst.

   Angi header div med data-roll = "header".

7. Ved å plassere noen av topptekstinformasjonen din i en div med en "header" datalog, forteller du jQuery å behandle dette elementet som en mobil topptekst og bruke de riktige stilene. Overskriften inneholder vanligvis en

   -kode.

   Vanligvis spesifiserer du overskriften som skal festes med dataposisjon = "fast" attributt. Dette sikrer at overskriften forblir på plass hvis resten av innholdet rulles, hvilket er typisk oppførsel i en mobilapplikasjon.

   Konfigurer et innholds div.

8. Legg til en div med data-role = "content" for å sette opp hovedinnholdsområdet på siden din. Noen av hovedelementene i nettstedet ditt bør gå i dette segmentet.

   Enhver lenke kan konverteres til en knapp.

9. Standardkonvensjonen i webapps er å slå koblinger til knapper som har et større mål enn musbasert inngang. Det er enkelt å konvertere hvilken som helst lenke til en knapp ved å legge til attributten data-roll = "knapp" til ankermerket.

   Konverter lister til mobil listevisninger.

10. Lister har også spesielle konvensjoner i mobilverdenen. Du kan bruke data-rolleattributtet til å slå en liste til en listeVis.

    Bygg en bunntekst.

11. Legg til en annen div med datasett satt til "footer". Normalt er bunnteksten (som toppteksten) festet med dataposisjonattributtet.