jQuery Mobile sida

Kom igång med jQuery Mobile

Tips:Trots att jQuery Mobile är kompatibel med alla mobila enheter, kan det fortfarande finnas kompatibilitetsproblem på datorer (på grund av begränsat stöd för CSS3).

Därför rekommenderar vi i denna handledning att du använder Googles Chrome-webbläsare för att få bästa läsupplevelsen.

Exempel

<body>
<div data-role="page">
  <div data-role="header">
    <h1>Välkommen till min hemsida</h1>
  </div>
  <div data-role="content">
    <p>Jag är en mobilutvecklare!</p>
  </div>
  <div data-role="footer">
    <h1>Fotnotstext</h1>
  </div>
</div>
</body>

Prova själv

Exempel förklaring:

  • data-role="page" är sidan som visas i webbläsaren
  • data-role="header" skapar en verktygsrad ovan på sidan (vanligtvis används för rubriker och sökknappar)
  • data-role="content" definierar sidans innehåll, t.ex. text, bilder, formulär och knappar etc.
  • data-role="footer" skapar en verktygsrad på sidans botten

I dessa behållare kan du lägga till vilka HTML-element som helst - paragrafer, bilder, rubriker, listor etc.

Tips:HTML5 data-*-egenskaper används för att skapa "touchvänliga" interaktionsutseenden för mobila enheter med hjälp av jQuery Mobile.

Lägg till sidor i jQuery Mobile

I jQuery Mobile kan du skapa flera sidor i en enda HTML-fil.

Använd unika id för att skilja upp varje sida och använd href-egenskapen för att länka dem:

Exempel

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">Gå till sida två</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Gå till sida ett</a>
  </div>
</div>

Prova själv

Kommentar:En webbapplikation med mycket innehåll kan påverka laddningstiden (t.ex. text, länkar, bilder och skript etc.). Om du inte vill använda interna länksidor, använd externa filer:

<a href="externalfile.html">Gå till extern sida</a>

Använd sidan som en dialogruta

En dialogruta är en fönstertyp som används för att visa information eller be om inmatning.

Om du vill skapa en dialogruta när användaren klickar (tipp) på en länk, lägg till data-rel="dialog" till länken:

Exempel

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">Gå till sida två</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Gå till sida ett</a>
  </div>
</div>

Prova själv