JQuery Mobile страница
Начало обучения JQuery Mobile
 | Хотя JQuery Mobile совместим со всеми мобильными устройствами, но не полностью совместим с ПК (из-за ограниченной поддержкой CSS3). Для того, чтобы лучше читать этот учебник, мы рекомендуем использовать браузер Google Chrome. |
|---|
примеров
<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>
Попробуйте »
Примеры анализа:
- данных роли = "страница" страница в браузере, чтобы отобразить.
- данных роли = "заголовок" является панель инструментов в верхней части страницы создается (обычно используется для названия или кнопку поиска)
- данных роли = "основной" определяет содержание страницы, такие как текст, изображения, формы, кнопки и так далее.
- класс "Ui-контента" для этой страницы отступов и полей.
- данных роли = "сноска" используется для создания в нижней части панели инструментов страницы.
- В этих контейнерах можно добавлять любые HTML-элементы - параграфы, рисунки, заголовки, списки и т.д.
| JQuery Mobile полагаться на HTML5 данные- * атрибуты для поддержки различных элементов пользовательского интерфейса, переход, и структуру страницы. Браузер не поддерживает их, они будут отбрасываться молча. |
|---|
Добавление JQuery Mobile на странице
Используйте JQuery Mobile, вы можете создать один файл HTML в нескольких различных страницах.
Вы можете использовать другой атрибут HREF различать, используя тот же уникальный идентификатор страницы:
примеров
<DIV данных роли = "страница " ID = "pageone">
<Div данных роли = "основной" класс = "Пользовательский интерфейс-контент">
<a href="#pagetwo"> , чтобы перейти на вторую страницу </a>
</ Div>
</ Div>
<DIV данных роли = "страница " ID = "pagetwo">
<Div данных роли = "основной" класс = "Пользовательский интерфейс-контент">
<a href="#pageone"> , чтобы перейти к первой странице </a>
</ Div>
</ Div>
<Div данных роли = "основной" класс = "Пользовательский интерфейс-контент">
<a href="#pagetwo"> , чтобы перейти на вторую страницу </a>
</ Div>
</ Div>
<DIV данных роли = "страница " ID = "pagetwo">
<Div данных роли = "основной" класс = "Пользовательский интерфейс-контент">
<a href="#pageone"> , чтобы перейти к первой странице </a>
</ Div>
</ Div>
Попробуйте »
Примечание: Когда веб - приложения имеют много контента (текст, изображения, скрипты и т.д.) будет серьезно влиять на время загрузки. Если вы не хотите использовать в странице ссылки, которые вы можете использовать внешний файл:
<a href="externalfile.html">访问外部文件</a>
Страница в качестве диалоговых использования
Диалоговое окно используется для отображения информации о странице отображения информации или форма ввода.
Добавьте в ссылке данных отн = диалоговое окно всплывающее окно "Диалог" позволяет пользователям нажмите на ссылку:
примеров
<Div данных роли = "страница" ID = "pageone">
<Div данных роли = "основной" класс = "Пользовательский интерфейс-контент">
<a href="#pagetwo"> переход на вторую страницу </a>
</ Div>
</ Div>
<DIV данных роли = "страница " данных Диалог = "истина" ID = "pagetwo">
<Div данных роли = "основной" класс = "Пользовательский интерфейс-контент">
<a href="#pageone"> перейти к первой странице </a>
</ Div>
</ Div>
<Div данных роли = "основной" класс = "Пользовательский интерфейс-контент">
<a href="#pagetwo"> переход на вторую страницу </a>
</ Div>
</ Div>
<DIV данных роли = "страница " данных Диалог = "истина" ID = "pagetwo">
<Div данных роли = "основной" класс = "Пользовательский интерфейс-контент">
<a href="#pageone"> перейти к первой странице </a>
</ Div>
</ Div>
Попробуйте »