Strona jQuery komórkowy
Rozpocząć naukę jQuery Mobile,
 | Chociaż jQuery Mobile jest kompatybilny ze wszystkimi urządzeniami mobilnymi, ale nie jest w pełni kompatybilny z PC (ze względu na ograniczoną obsługę CSS3). W celu lepszego przeczytać ten poradnik, zaleca się korzystanie z przeglądarki Google Chrome. |
|---|
Przykłady
<body>
<div data-role="page" >
<div data-role="header" >
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content" >
<p>我现在是一个移动端开发者!!</p>
</div>
<div data-role="footer" >
<h1>底部文本</h1>
</div>
</div>
</body>
<div data-role="page" >
<div data-role="header" >
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content" >
<p>我现在是一个移动端开发者!!</p>
</div>
<div data-role="footer" >
<h1>底部文本</h1>
</div>
</div>
</body>
Spróbuj »
Przykłady analizy:
- data-role = "Strona" oznacza stronę w przeglądarce do wyświetlenia.
- data-role = "header" to pasek narzędzi w górnej części strony jest tworzony (zazwyczaj używany do tytułu lub przycisku wyszukiwania)
- data-role = "main" definiuje zawartość strony, takie jak tekst, obrazy, formularzy, przyciski i tak dalej.
- Klasa "Ui-content" dla tej strony padding i marże.
- data-role = "footer" służy do tworzenia dno pasku strony.
- W tych kontenerach można dodawać żadnych elementów HTML - ustępy, ilustracje, nagłówki, listy, etc.
| jQuery Komórka polegać na HTML5 teleinformatyczny * atrybuty wspierać różne elementy interfejsu użytkownika, przejścia i strukturę strony. Przeglądarka nie zostaną one usunięte po cichu wspierać. |
|---|
Dodawanie jQuery Mobile w stronę
Użyj jQuery Mobile, można następnie utworzyć pojedynczy plik HTML w wielu różnych stron.
Można użyć innego atrybutu href rozróżnić stosując ten sam unikalny identyfikator strony:
Przykłady
<Div data-role = "Strona " id = "pageone">
<Div data-role = "main" class = "ui-content">
href="#pagetwo"> <a przeskoczyć na drugą stronę </a>
</ Div>
</ Div>
<Div data-role = "Strona " id = "pagetwo">
<Div data-role = "main" class = "ui-content">
href="#pageone"> <a aby przejść do pierwszej strony </a>
</ Div>
</ Div>
<Div data-role = "main" class = "ui-content">
href="#pagetwo"> <a przeskoczyć na drugą stronę </a>
</ Div>
</ Div>
<Div data-role = "Strona " id = "pagetwo">
<Div data-role = "main" class = "ui-content">
href="#pageone"> <a aby przejść do pierwszej strony </a>
</ Div>
</ Div>
Spróbuj »
Uwaga: Gdy aplikacje internetowe mają dużo treści (tekst, obrazy, skrypty itp) poważnie wpłynie na czas ładowania. Jeśli nie chcesz korzystać z łącza w treści strony można użyć zewnętrznego pliku:
<a href="externalfile.html">访问外部文件</a>
Strona w zastosowaniach dialogowych
Okno dialogowe służy do wyświetlania informacji wyświetlania informacji strony lub formularz wejściowego.
Dodaj w linku pole danych rel = "Okno" wyskakujące okno umożliwia użytkownikom kliknij na link:
Przykłady
<Div data-role = "Strona" id = "pageone">
<Div data-role = "main" class = "ui-content">
<a href="#pagetwo"> skok na drugą stronę </a>
</ Div>
</ Div>
<Div data-role = "Strona " Dane-dialog = "true" id = "pagetwo">
<Div data-role = "main" class = "ui-content">
<a href="#pageone"> skok do pierwszej strony </a>
</ Div>
</ Div>
<Div data-role = "main" class = "ui-content">
<a href="#pagetwo"> skok na drugą stronę </a>
</ Div>
</ Div>
<Div data-role = "Strona " Dane-dialog = "true" id = "pagetwo">
<Div data-role = "main" class = "ui-content">
<a href="#pageone"> skok do pierwszej strony </a>
</ Div>
</ Div>
Spróbuj »