Виджет pagecontainerверсия добавлена: 1.4
Описание: Управляет коллекцией страниц.
Плавная навигация между страницами
body. Это ограничение будет устранено в будущих версиях jQuery Mobile.Центральной абстракцией jQuery Mobile является использование нескольких страниц внутри одного HTML-документа. Все дочерние элементы body — это элементы div, которые были улучшены до виджетов page. Это страницы jQuery Mobile.
Одновременно видна только одна страница. При навигации текущая видимая страница скрывается, а другая страница отображается. Переход с одной страницы на другую выполняется с помощью перехода. Это невозможно при навигации между HTML-документами через HTTP, так как браузер отбрасывает все состояния, связанные с исходной страницей при переходе на целевую страницу, что делает невозможным выполнение этой задачи с помощью плавного эффекта перехода, такого как плавное затемнение или сдвиг.
Документы с несколькими страницами
В самом простом виде HTML-документ, полученный браузером, имеет body, состоящий из нескольких элементов div, которые улучшены с помощью виджета page. Каждая такая страница имеет атрибут id, чтобы отличить ее от других страниц.
Страницы могут быть взаимосвязаны с помощью якорей. При нажатии пользователя на такой якорь создается новая запись в истории, а страница, на которую ссылается якорь, отображается с помощью плавного перехода с предыдущей страницы. Пример ниже иллюстрирует многостраничную настройку. Примечание: Если пример ниже анимирует с помощью перехода плавного затемнения вместо перехода сдвига, запрошенного в якоре, это потому, что ваш браузер не поддерживает 3D-трансформации CSS.
<!doctype html>
<html>
<head>
<title>Multipage example</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
<a href="#page2" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go To Page 2</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div role="main" class="ui-content">
<a href="#page1" data-rel="back" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go Back To Page 1</a>
</div>
</div>
</body>
</html> Навигация по страницам с помощью Ajax
jQuery Mobile позволяет заменить стандартную навигацию браузера навигацией на основе Ajax. Он переопределяет стандартное поведение обработки ссылок браузера. Он перехватывает нажатия на якоря, содержащие ссылки на другие документы, и при каждом таком нажатии проверяет, можно ли получить документ с помощью Ajax. Ссылка должна соответствовать следующим критериям, чтобы документ, на который она ссылается, мог быть получен с помощью Ajax:
- Глобальный параметр конфигурации
$.mobile.linkBindingEnabledдолжен бытьtrue. - По умолчанию событие клика не должно быть предотвращено, и оно должно быть левым щелчком.
- Ссылка не должна иметь ни одного из следующих атрибутов:
data-rel="back"data-rel="externaldata-ajax="false"- Атрибут
targetне должен присутствовать
- Глобальный параметр конфигурации
$.mobile.ajaxEnabledдолжен бытьtrue. - Ссылка должна быть на том же домене или на разрешенном месте для кросс-доменных запросов.
Если эти критерии выполнены, jQuery Mobile получает документ с помощью Ajax. Важно понимать, что, хотя документ извлекается полностью, отображается только первая страница jQuery Mobile. Заголовок и остальная часть тела отбрасываются. Таким образом, невозможно получить многостраничный документ с помощью Ajax, а также нельзя выполнить скрипты, расположенные в заголовке.
После получения Ajax jQuery Mobile отображает страницу с помощью перехода. Переход может быть указан в ссылке, которая открывает страницу, с помощью атрибута data-transition. Если переход не указан, используется $.mobile.defaultPageTransition, или, если входящая страница является диалоговым окном, используется $.mobile.defaultDialogTransition.
Если браузер поддерживает API replaceState, адресная строка обновляется так, чтобы отображать URL документа, полученного с помощью Ajax. Последний шаг имеет следующие последствия для проектирования сайта/приложения:
- Поскольку пользователь может скопировать URL страницы, отличной от стартовой, приложение должно быть спроектировано так, чтобы оно могло начинаться с любой из своих страниц. Лучший способ добиться этого — включить jQuery Mobile и код вашего приложения в заголовок всех страниц сайта/приложения и обеспечить согласованность начального состояния во время события
pagecreate. - Если ваше приложение включает в себя виджеты, общие для нескольких страниц, например, глобальное меню навигации, содержащееся в всплывающем окне, то вы должны убедиться, что каждая страница содержит копию разметки всплывающего окна, чтобы первая загруженная страница определяла всплывающее окно и делала его доступным для последующих страниц, загружаемых в DOM с помощью Ajax.
Параметры
классы
{} classes.Инициализируйте pagecontainer с заданным параметром classes, изменяя тему для класса ui-pagecontainer.
$( ".selector" ).pagecontainer({
classes: {
"ui-pagecontainer": "highlight"
}
}); Получите или установите свойство параметра classes, после инициализации, здесь читая и изменяя тему для класса ui-pagecontainer:
// Getter var themeClass = $( ".selector" ).pagecontainer( "option", "classes.ui-pagecontainer" ); // Setter $( ".selector" ).pagecontainer( "option", "classes.ui-pagecontainer", "highlight" );
значения по умолчанию
false true указывает, что у других параметров виджетов есть значения по умолчанию, и заставляет код автоматического улучшения виджетов jQuery Mobile опустить шаг, на котором он извлекает значения параметров из атрибутов данных. Это может улучшить время запуска. Этот параметр также доступен в качестве атрибута данных: data-defaults="true".
Инициализируйте pagecontainer с заданным параметром defaults:
$( ".selector" ).pagecontainer({
defaults: true
}); Получить или установить параметр defaults, после инициализации:
// Getter var defaults = $( ".selector" ).pagecontainer( "option", "defaults" ); // Setter $( ".selector" ).pagecontainer( "option", "defaults", true );
выключено
false true. Этот параметр также доступен в качестве атрибута данных: data-disabled="true".
Инициализируйте pagecontainer с заданным параметром disabled:
$( ".selector" ).pagecontainer({
disabled: true
}); Получить или установить параметр disabled после инициализации:
// Getter var disabled = $( ".selector" ).pagecontainer( "option", "disabled" ); // Setter $( ".selector" ).pagecontainer( "option", "disabled", true );
тема
a Возможные значения: буква палитры (a-z).
Этот параметр также доступен в качестве атрибута данных: data-theme="b".
Инициализируйте pagecontainer с заданным параметром theme:
$( ".selector" ).pagecontainer({
theme: "b"
}); Получить или установить параметр theme после инициализации:
// Getter var theme = $( ".selector" ).pagecontainer( "option", "theme" ); // Setter $( ".selector" ).pagecontainer( "option", "theme", "b" );
