jQuery Mobile Sider

Kom i gang med jQuery Mobile

Tip:Selvom jQuery Mobile er kompatibel med alle mobile enheder, kan der stadig være kompatibilitetsproblemer på stationære computere (på grund af begrænset CSS3-støtte).

Derfor anbefaler vi i denne trin-for-trin guide, at du bruger Googles Chrome-browsere for at få den bedste læseoplevelse.

eksempel

<body>
<div data-role="page">
  <div data-role="header">
    <h1>Velkommen til min hjemmeside</h1>
  </div>
  <div data-role="content">
    <p>Jeg er en mobiludvikler!</p>
  </div>
  <div data-role="footer">
    <h1>Fodtekst</h1>
  </div>
</div>
</body>

Prøv det selv

Eksempel Forklaring:

  • data-role="page" er den side, der vises i browseren
  • data-role="header" opretter en værktøjslinje i toppen af siden (bruges ofte til titler og søgeknapper)
  • data-role="content" definerer indholdet på siden, såsom tekst, billeder, formulær og knapper osv.
  • data-role="footer" opretter en værktøjslinje i bunden af siden

I disse containere kan du tilføje hvilke HTML-elementer som helst - afsnit, billeder, titler, lister osv.

Tip:HTML5 data-*-egenskaber bruges til at skabe "berøringsevnemmelige" interaktionsflader for mobile enheder med jQuery Mobile.

Tilføj sider i jQuery Mobile

I jQuery Mobile kan du oprette flere sider i én enkelt HTML-fil.

Brug en unik id til at adskille hver side, og brug href-egenskaben til at forbinde dem med hinanden:

eksempel

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">Gå til side to</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Gå til side en</a>
  </div>
</div>

Prøv det selv

Bemærk:En web-applikation med meget indhold kan påvirke indlædstiden (f.eks. tekst, links, billeder og scripts osv.). Hvis du ikke ønsker at bruge interne links på siden, skal du bruge eksterne filer:

<a href="externalfile.html">Gå til ekstern side</a>

Brug af siden som en dialog

En dialog er en vindue-type, der bruges til at vise information eller anmode om input.

Hvis du vil oprette en dialog, når brugeren klikker (trykker) på et link, skal du tilføje data-rel="dialog" til dette link:

eksempel

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">Gå til side to</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Gå til side en</a>
  </div>
</div>

Prøv det selv