Страницы jQuery Mobile

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

Начало работы с jQuery Mobile

Для постов этой рубрики рекомендуется использовать Браузер 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.

Отделите каждую страницу уникальным идентификатором и используйте атрибут 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>

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

Далее: Ползунки Формы jQuery Mobile

Смотрите также
Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)