Создать страницу
Даже несмотря на JQuery Mobile работает на всех мобильных устройствах, он может иметь некоторые проблемы совместимости на настольных компьютерах (из-за ограниченной поддержкой CSS3).
Для этого урока, мы рекомендуем использовать браузер Google Chrome для лучшего чтения.
Ниже мы создали простой, стандартный JQuery Mobile страницу:
пример
<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> Попробуй сам " Объяснение примера:
- data-role="page" страница отображается в браузере
- data-role="header" создает панель инструментов в верхней части страницы (часто используется для поиска материала или кнопок)
- data-role="main" определяет содержание страницы, как текст, изображения, кнопки, формы и т.д.
- "ui-content" класс добавляет дополнительные заполнения и полей внутри содержимого страницы
- data-role="footer" создает панель инструментов в нижней части страницы
- Внутри этих контейнеров, вы можете добавлять любые HTML-элементы - параграфы, изображения, заголовки, списки и т.д.
В HTML5 data-* атрибуты используются во всем JQuery Mobile для создания "touch-friendly" и привлекательный внешний вид для мобильных устройств.
Добавление страниц в JQuery Mobile
В JQuery Mobile, вы можете создать несколько страниц в одном файле HTML.
Разделите каждую страницу с уникальным идентификатором и использовать href атрибут , чтобы связать между ними:
пример
<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> Попробуй сам " Совет: Время загрузки будет зависеть от веб - приложений с большим количеством контента (то есть текст, ссылки, изображения, скрипты и т.д.). Используйте внешние файлы, если вы не хотите, чтобы внутренне связать страницы:
<a href="externalfile.html">Go To External Page</a>
Использование страниц диалогами
Диалоговое окно представляет собой тип окна используется для отображения специальной информации или ввода запроса.
Для того, чтобы создать диалоговое окно , которое открывается , когда пользователь нажимает на ссылку, добавить data-dialog="true" на страницу , которую отображается в виде диалога:
пример
<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> Попробуй сам "