jQuery Mobile Pagina

Start met jQuery Mobile

Tip:Hoewel jQuery Mobile geschikt is voor alle mobiele apparaten, kunnen er op desktopcomputers compatibiliteitsproblemen optreden (vanwege beperkte CSS3-ondersteuning).

Daarom raden we in dit handleiding aan om Google Chrome te gebruiken voor de beste leeservaring.

voorbeeld

<body>
<div data-role="page">
  <div data-role="header">
    <h1 Welkom op mijn homepage</h1>
  </div>
  <div data-role="content">
    <p Ik ben een mobiele ontwikkelaar!</p>
  </div>
  <div data-role="footer">
    <h1>Voettekst</h1>
  </div>
</div>
</body>

Probeer het zelf

Voorbeeldverklaring:

  • data-role="page" is de pagina die in de browser wordt weergegeven
  • data-role="header" maakt een werkbalk aan aan de bovenkant van de pagina (meestal gebruikt voor titels en zoekknoppen)
  • data-role="content" definieert de inhoud van de pagina, zoals tekst, afbeeldingen, formulieren en knoppen, enz.
  • data-role="footer" maakt een werkbalk aan aan de onderkant van de pagina

In deze containers kunt u willekeurige HTML-elementen toevoegen - paragrafen, afbeeldingen, titels, lijsten, enz.

Tip:HTML5 data-* eigenschappen worden gebruikt om met jQuery Mobile een "touchvriendelijke" interactie-uitstraling voor mobiele apparaten te creëren.

Pagina's toevoegen in jQuery Mobile

In jQuery Mobile kunt u meerdere pagina's in één HTML-bestand maken.

Gebruik unieke ids om elke pagina te onderscheiden en gebruik de href-eigenschap om deze met elkaar te verbinden:

voorbeeld

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">Ga naar pagina twee</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Ga naar pagina één</a>
  </div>
</div>

Probeer het zelf

Opmerking:Een webtoepassing met veel inhoud kan de laadtijd beïnvloeden (bijvoorbeeld tekst, links, afbeeldingen en scripts, enz.). Als u niet wilt dat interne linkpagina's worden gebruikt, gebruik dan externe bestanden:

<a href="externalfile.html">Ga naar externe pagina</a>

Gebruik een pagina als dialoogvenster

Een dialoogvenster is een venster dat wordt gebruikt om informatie weer te geven of om invoer te vragen.

Als u een dialoogvenster wilt weergeven bij het klikken (tasten) op een link, voeg dan data-rel="dialog" toe aan deze link:

voorbeeld

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">Ga naar pagina twee</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Ga naar pagina één</a>
  </div>
</div>

Probeer het zelf