Страницы jQuery Mobile

Введение в jQuery Mobile

Совет:Хотя jQuery Mobile подходит для всех мобильных устройств, на компьютерах он может иметь проблемы с совместимостью (из-за ограниченной поддержки CSS3).

Таким образом, в этом руководстве мы рекомендуем вам использовать браузер Google Chrome для наилучшего опыта чтения.

Пример

<body>
<div data-role="page">
  <div data-role="header">
    <h1>Добро пожаловать на мою домашнюю страницу</h1>
  </div>
  <div data-role="content">
    <p>Я разработчик мобильных приложений!</p>
  </div>
  <div data-role="footer">
    <h1>Текст подвал</h1>
  </div>
</div>
</body>

Попробуйте сами

Пример объяснения:

  • data-role="page" - это страница, отображаемая в браузере
  • data-role="header" создает инструментальную панель в верхней части страницы (часто используется для заголовков и кнопок поиска)
  • data-role="content" определяет содержимое страницы, например, текст, изображения, формы и кнопки и т.д.
  • data-role="footer" создает инструментальную панель в нижней части страницы

В этих контейнерах вы можете добавить любые HTML-элементы - параграфы, изображения, заголовки, списки и т.д.

Совет:HTML5 атрибуты data-* используются для создания "дружественного к касанию" интерфейса для мобильных устройств с помощью jQuery Mobile.

Добавление страниц в jQuery Mobile

В jQuery Mobile вы можете создавать несколько страниц в одном HTML-файле.

Пожалуйста, разделяйте каждую страницу уникальным id и используйте атрибут href для их соединения:

Пример

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">Перейти на страницу два</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Перейти на страницу один</a>
  </div>
</div>

Попробуйте сами

Комментарий:Веб-приложения с большим количеством контента могут влиять на время загрузки (например, текст, ссылки, изображения и скрипты и т.д.). Если вы не хотите использовать внутренние ссылки на странице, используйте внешние файлы:

<a href="externalfile.html">Перейти на внешнюю страницу</a>

Использование страницы в качестве диалогового окна

Диалоговое окно - это тип окна, используемого для отображения информации или запроса ввода.

Чтобы создать диалоговое окно при нажатии (легком касании) на ссылку, добавьте к этой ссылке data-rel="dialog":

Пример

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">Перейти на страницу два</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Перейти на страницу один</a>
  </div>
</div>

Попробуйте сами