Utwórz stronę
Choć jQuery Mobile działa na wszystkich urządzeniach mobilnych, może mieć pewne problemy ze zgodnością na komputerach stacjonarnych (ze względu na ograniczoną obsługę CSS3).
W tym samouczku, zaleca się korzystanie z przeglądarki Google Chrome dla lepszego doświadczenia czytania.
Poniżej stworzyliśmy prostą, standardową stronę jQuery komórkowy:
Przykład
<body>
<div data-role="page" >
<div
data-role="header" >
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content" >
<p>I Am Now A Mobile Developer!!</p>
</div>
<div data-role="footer" >
<h1>Footer
Text</h1>
</div>
</div>
</body> Spróbuj sam " Przykład wyjaśnił:
- data-role="page" jest strona wyświetlona w przeglądarce
- data-role="header" tworzy pasek w górnej części strony (często wykorzystywane do wyszukiwania tytułowych lub przycisków)
- data-role="main" definiuje zawartość strony, podobnie jak tekst, obrazy, przyciski, formularze, itp
- "ui-content" Klasa dodaje dodatkową wyściółkę i margines wewnątrz treści strony
- data-role="footer" tworzy pasek na dole strony
- Wewnątrz tych pojemników można dodawać żadnych elementów HTML - ustępy, obrazy, nagłówki, listy, etc.
HTML5 data-* atrybuty są używane w całym jQuery Mobile, aby stworzyć "touch-friendly" i atrakcyjny wygląd dla urządzeń mobilnych.
Dodawanie stron w jQuery Mobile
W jQuery Mobile, można utworzyć wiele stron w jednym pliku HTML.
Oddziel każdą stronę z unikalnym identyfikatorem i użyć href atrybutu odwołuje się między nimi:
Przykład
<div data-role="page" id="pageone" >
<div data-role="main" class="ui-content">
<a href="#pagetwo" >Go to
Page Two</a>
</div>
</div>
<div data-role="page"
id="pagetwo" >
<div
data-role="main" class="ui-content">
<a href="#pageone" >Go to Page
One</a>
</div>
</div> Spróbuj sam " Wskazówka: Czas ładowania wpłynie aplikacji internetowych z dużą ilością treści (czyli tekst, linki, zdjęcia, skrypty itp). Za pomocą plików zewnętrznych, jeśli nie chcesz, aby połączyć strony wewnętrznej:
<a href="externalfile.html">Go To External Page</a>
Korzystanie ze stron jak Dialogi
Okno dialogowe jest rodzajem okna używany do wyświetlania specjalnej informacji lub żądania wejścia.
Aby utworzyć okno, które otwiera, gdy użytkownik kliknie na link, dodać data-dialog="true" do strony, którą chcesz wyświetlić jako dialog:
Przykład
<div data-role="page" id="pageone">
<div
data-role="main" class="ui-content">
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
<div data-role="page"
data-dialog="true" id="pagetwo">
<div
data-role="main" class="ui-content">
<a href="#pageone">Go to Page One</a>
</div>
</div> Spróbuj sam "