Strony jQuery Mobile

Wejście w jQuery Mobile

Wskazówka:Chociaż jQuery Mobile jest kompatybilny z wszystkimi urządzeniami mobilnymi, może nadal istnieć problem z kompatybilnością na komputerach stacjonarnych (z powodu ograniczonej obsługi CSS3).

Dlatego w tym kursie zalecamy użycie przeglądarki Google Chrome, aby uzyskać najlepsze doświadczenie czytania.

przykład

<body>
<div data-role="page">
  <div data-role="header">
    <h1>Witaj na mojej stronie głównej</h1>
  </div>
  <div data-role="content">
    <p>Jestem deweloperem mobilnym!</p>
  </div>
  <div data-role="footer">
    <h1>Tekst stopki</h1>
  </div>
</div>
</body>

Spróbuj sam

Przykład wyjaśnienia:

  • data-role="page" to strona wyświetlana w przeglądarce
  • data-role="header" tworzy pasek narzędzi na górze strony (zwykle używane do tytułów i przycisków wyszukiwania)
  • data-role="content" definiuje treść strony, np. tekst, obrazy, formularze i przyciski itp.
  • data-role="footer" tworzy pasek narzędzi na dole strony

W tych kontenerach możesz dodać dowolne elementy HTML - akapity, obrazy, nagłówki, listy itp.

Wskazówka:Atrybuty data-* HTML5 służą do tworzenia "przyjaznych dla dotyku" interfejsów interaktywnych za pomocą jQuery Mobile.

Dodanie strony w jQuery Mobile

W jQuery Mobile możesz utworzyć wiele stron w jednym pliku HTML.

Proszę, oddziel każda stronę unikalnym id i użyj atrybutu href, aby połączyć je ze sobą:

przykład

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">Przejdź do strony drugiej</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Przejdź do strony jednej</a>
  </div>
</div>

Spróbuj sam

Uwaga:Wielkie ilości treści w aplikacjach webowych mogą wpłynąć na czas ładowania (np. tekst, linki, obrazy i skrypty itp.). Jeśli nie chcesz używać wewnętrznych linków na stronie, użyj pliku zewnętrznego:

<a href="externalfile.html">Przejdź do zewnętrznej strony</a>

Użycie strony jako okna dialogowego

Okno dialogowe to rodzaj okna, który służy do wyświetlania informacji lub prośb o wprowadzenie danych.

Jeśli chcesz utworzyć okno dialogowe po kliknięciu (dotknięciu) linku, dodaj do tego linku data-rel="dialog":

przykład

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">Przejdź do strony dwóch</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Przejdź do strony jednej</a>
  </div>
</div>

Spróbuj sam