Виджет страницы

Виджет страницыверсия добавлена: 1.0

Описание: Основная единица контента.

Быстрое навигационное менюПримеры

Страницы

Виджет страницы отвечает за управление одним элементом в архитектуре страниц jQuery Mobile. Он разработан для поддержки как отдельных виджетов страниц в документе HTML, так и нескольких локальных внутренних связанных виджетов страниц в документе HTML.

Цель этой модели — позволить разработчикам создавать веб-сайты, используя лучшие практики — где обычные ссылки будут работать без специальной настройки — одновременно создавая богатый, похожий на родной опыт, которого нельзя добиться с помощью стандартных запросов HTTP.

Виджет страницы будет автоматически улучшать свой контент при создании. Это означает, что он будет инициализировать виджеты на своих дочерних элементах, вызывая .enhanceWithin() на самом себе.

Диалоги

Виджет страницы имеет опцию dialog , которую вы можете установить на true , чтобы получить страницу, оформленную как диалог, как в примере ниже:

<div data-role="page" data-dialog="true">
  <div data-role="header">
    <h2>Are you sure?</h2>
  </div>
  <div class="ui-content" role="main">
    <h2>Are you sure you wish to exit the application?</h2>
    <p>You have unsaved changes. If you exit without saving them, you will lose them.</p>
    <div class="ui-grid-a">
      <div class="ui-block-a">
        <a href="#" id="exit-button" class="ui-btn ui-btn-b ui-shadow ui-corner-all">Exit</a>
      </div>
      <div class="ui-block-b">
        <a href="#" id="cancel-button" class="ui-btn ui-shadow ui-corner-all">Cancel</a>
      </div>
    </div>
  </div>
</div>

Вы можете программно закрыть страницу, оформленную как диалог, перейдя на другую страницу. Например, вы можете использовать метод pagecontainer change:

$( ":mobile-pagecontainer" ).pagecontainer( "change", "somepage.html" );

Вы также можете просто вернуться назад:

$.mobile.back();

Параметры

classes

Тип: Object

По умолчанию:

{}

Укажите дополнительные классы для добавления к элементам виджета. Любые из классов, указанные в разделе Тема, могут быть использованы в качестве ключей для переопределения их значения. Чтобы узнать больше об этом параметре, ознакомьтесь со статьей статьей о параметре classes.

Примеры кода:

Инициализируйте страницу с указанным параметром classes, изменив тему для класса ui-page.

$( ".selector" ).page({
  classes: {
    "ui-page": "highlight"
  }
});

Получите или установите свойство параметра classes, после инициализации, здесь чтение и изменение темы для класса ui-page.

// Getter
var themeClass = $( ".selector" ).page( "option", "classes.ui-page" );
 
// Setter
$( ".selector" ).page( "option", "classes.ui-page", "highlight" );

closeBtn

Тип: String

По умолчанию: "left"

Этот параметр предоставляется расширением dialog.

Задает положение кнопки закрытия диалогового окна в заголовке.

Возможные значения:

"left": Кнопка будет размещена на левом краю строки заголовка.
"right": Кнопка будет размещена на правом краю строки заголовка.
"none": Диалоговое окно не будет иметь кнопки закрытия.

Этот параметр также доступен в виде атрибута данных: data-close-btn.

Примеры кода:

Инициализируйте страницу с указанным параметром closeBtn:

$( ".selector" ).page({
  closeBtn: "none"
});

Получите или установите параметр closeBtn, после инициализации:

// Getter
var closeBtn = $( ".selector" ).page( "option", "closeBtn" );
 
// Setter
$( ".selector" ).page( "option", "closeBtn", "none" );

closeBtnText

Тип: String

По умолчанию: "Close"

Этот параметр предоставляется расширением dialog.

Настраивает текст кнопки закрытия, что полезно для перевода на разные языки. Кнопка закрытия отображается как кнопка только с значком по умолчанию, поэтому текст не виден на экране, но читается программами для чтения с экрана, поэтому это важная функция доступности.

Этот параметр также доступен в виде атрибута данных: data-close-btn-text="Fermer".

Примеры кода:

Инициализируйте страницу с указанным параметром closeBtnText:

$( ".selector" ).page({
  closeBtnText: "Fermer"
});

Получите или установите параметр closeBtnText, после инициализации:

// Getter
var closeBtnText = $( ".selector" ).page( "option", "closeBtnText" );
 
// Setter
$( ".selector" ).page( "option", "closeBtnText", "Fermer" );

contentTheme

Тип: String

По умолчанию: null, inherited from parent

Примечание:Этот параметр устарел в версии 1.4.0 и будет удален в версии 1.5.0.

Задает цветовую схему (палитру) для содержимого div виджета страницы. Он принимает одну букву от a до z, которая соответствует палитрам, включенным в вашу тему.

Возможные значения: буква палитры (a-z).

Этот параметр также доступен в виде атрибута данных: data-content-theme="b".

(версия устарела: 1.4.0)

Примеры кода:

Инициализируйте страницу с указанным параметром contentTheme:

$( ".selector" ).page({
  contentTheme: "b"
});

Получите или установите параметр contentTheme, после инициализации:

// Getter
var contentTheme = $( ".selector" ).page( "option", "contentTheme" );
 
// Setter
$( ".selector" ).page( "option", "contentTheme", "b" );

corners

Тип: Boolean

По умолчанию: true

Этот параметр предоставляется расширением dialog.

Задает, следует ли рисовать диалоговое окно с закругленными углами.

Этот параметр также доступен в виде атрибута данных: data-corners="false".

Примеры кода:

Инициализируйте страницу с указанным параметром corners:

$( ".selector" ).page({
  corners: false
});

Получите или установите параметр corners, после инициализации:

// Getter
var corners = $( ".selector" ).page( "option", "corners" );
 
// Setter
$( ".selector" ).page( "option", "corners", false );

defaults

Тип: Boolean

По умолчанию: false

Установка этого параметра на true указывает на то, что другие параметры виджетов имеют значения по умолчанию и заставляет код автоматического улучшения виджетов jQuery Mobile опускать шаг, на котором он извлекает значения параметров из атрибутов данных. Это может улучшить время запуска.

Этот параметр также доступен в виде атрибута данных: data-defaults="true".

Примеры кода:

Инициализируйте страницу с указанным параметром defaults:

$( ".selector" ).page({
  defaults: true
});

Получите или установите параметр defaults, после инициализации:

// Getter
var defaults = $( ".selector" ).page( "option", "defaults" );
 
// Setter
$( ".selector" ).page( "option", "defaults", true );

degradeInputs

Тип:

По умолчанию:

Примечание:Этот параметр устарел, начиная с jQuery Mobile 1.4.0, и будет удален в версии 1.5.0. Используйте $.mobile.degradeInputs вместо него.

(версия устарела: 1.4.0)

dialog

Тип: Boolean

По умолчанию: false

Этот параметр предоставляется расширением dialog.

Задает, следует ли оформлять страницу как диалоговое окно.

Этот параметр также доступен в виде атрибута данных: data-dialog="true".

Примеры кода:

Инициализируйте страницу с указанным параметром dialog:

$( ".selector" ).page({
  dialog: true
});

Получите или установите параметр dialog, после инициализации:

// Getter
var dialog = $( ".selector" ).page( "option", "dialog" );
 
// Setter
$( ".selector" ).page( "option", "dialog", true );

disabled

Тип: Boolean

По умолчанию: false

Отключает страницу, если установлено значение true.

Этот параметр также доступен в виде атрибута данных: data-disabled="true".

Примеры кода:

Инициализируйте страницу с указанным параметром disabled:

$( ".selector" ).page({
  disabled: true
});

Получите или установите параметр disabled, после инициализации:

// Getter
var disabled = $( ".selector" ).page( "option", "disabled" );
 
// Setter
$( ".selector" ).page( "option", "disabled", true );

domCache

Тип: Boolean

По умолчанию: false

Задает, следует ли оставлять страницу в DOM после того, как пользователь перешел с неё.

Этот параметр также доступен в виде атрибута данных: data-dom-cache="true".

Примеры кода:

Инициализируйте страницу с указанным параметром domCache:

$( ".selector" ).page({
  domCache: true
});

Получите или установите параметр domCache, после инициализации:

// Getter
var domCache = $( ".selector" ).page( "option", "domCache" );
 
// Setter
$( ".selector" ).page( "option", "domCache", true );

initSelector

Тип: Selector

По умолчанию: See below

Значение по умолчанию initSelector для виджета страницы:

":jqmData(role='page')"

Примечание: Этот параметр устарел в версии 1.4.0 и будет удален в версии 1.5.0.
Начиная с jQuery Mobile 1.4.0, initSelector больше не является параметром виджета. Вместо этого он объявлен непосредственно в прототипе виджета. Таким образом, вы можете указать пользовательское значение, обработав событие mobileinit и переопределив initSelector в прототипе:

$( document ).on( "mobileinit", function() {
  $.mobile.page.prototype.initSelector = "div.custom";
});

Примечание: Не забудьте прикрепить обработчик mobileinit после загрузки jQuery, но до загрузки jQuery Mobile, поскольку событие запускается в рамках процесса загрузки jQuery Mobile.

Значение этого параметра представляет собой строку селектора jQuery. Фреймворк выбирает элементы на основе значения этого параметра и создает экземпляры виджетов страницы для каждого из полученных элементов списка.

(версия устарела: 1.4.0)

keepNative

Тип: Selector

По умолчанию: null

Примечание:Этот параметр устарел, начиная с jQuery Mobile 1.4.0, и будет удален в версии 1.5.0. Используйте $.mobile.keepNative вместо него.

Значение этого параметра представляет собой селектор, который будет использоваться в дополнение к параметру keepNativeDefault для предотвращения улучшения элементов, соответствующих ему.

Этот параметр также доступен в виде атрибута данных: data-keep-native=".do-not-enhance.

(версия устарела: 1.4.0)

Примеры кода:

Инициализируйте страницу с указанным параметром keepNative:

$( ".selector" ).page({
  keepNative: ".do-not-enhance"
});

Получите или установите параметр keepNative, после инициализации:

// Getter
var keepNative = $( ".selector" ).page( "option", "keepNative" );
 
// Setter
$( ".selector" ).page( "option", "keepNative", ".do-not-enhance" );

keepNativeDefault

Тип: Selector

По умолчанию: ":jqmData(role='none'), :jqmData(role='nojs')"

Значение этого параметра представляет собой селектор, который будет использоваться для предотвращения улучшения элементов, соответствующих ему.

Этот параметр также доступен в виде атрибута данных: data-keep-native-default=".do-not-enhance.

(версия устарела: 1.4.0)

Примеры кода:

Инициализируйте страницу с указанным параметром keepNativeDefault:

$( ".selector" ).page({
  keepNativeDefault: ".do-not-enhance"
});

Получите или установите параметр keepNativeDefault, после инициализации:

// Getter
var keepNativeDefault = $( ".selector" ).page( "option", "keepNativeDefault" );
 
// Setter
$( ".selector" ).page( "option", "keepNativeDefault", ".do-not-enhance" );

overlayTheme

Тип: Строка

Значение по умолчанию: "a"

Этот параметр предоставляется расширением dialog.

Диалоговые окна отображаются поверх наложенного слоя. По умолчанию этот наложенный слой использует цветовой оттенок "a", но атрибут data-overlay-theme может быть добавлен к элементу для установки любого цветового оттенка (от a до z).

Возможные значения: буква цветового оттенка (a-z)

Этот параметр также доступен в виде атрибута данных: data-overlay-theme="b".

Примеры кода:

Инициализируйте страницу с указанным параметром overlayTheme:

$( ".selector" ).page({
  overlayTheme: "b"
});

Получите или задайте параметр overlayTheme, после инициализации:

// Getter
var overlayTheme = $( ".selector" ).page( "option", "overlayTheme" );
 
// Setter
$( ".selector" ).page( "option", "overlayTheme", "b" );

theme

Тип: Строка

Значение по умолчанию: "a"

Устанавливает цветовое схему (цветовой оттенок) для виджета страницы. Принимает одиночную букву от a до z, которая сопоставляется с цветовыми оттенками, включенными в вашу тему.

Возможные значения: буква цветового оттенка (a-z).

Этот параметр также доступен в виде атрибута данных: data-theme="b".

Примеры кода:

Инициализируйте страницу с указанным параметром theme:

$( ".selector" ).page({
  theme: "b"
});

Получите или задайте параметр theme, после инициализации:

// Getter
var theme = $( ".selector" ).page( "option", "theme" );
 
// Setter
$( ".selector" ).page( "option", "theme", "b" );

Методы

bindRemove( callback )Возвращает: jQuery (только для плагинов)

callback

Тип: Функция()

Необязательный обработчик для замены внутренней обработки удаления страницы. Внутренний обработчик удаляет страницу только в том случае, если она не скрывается в рамках перехода на той же странице.

Примеры кода:

Вызов метода:

$( ".selector" ).page( "bindRemove", function() { alert( 'Page hidden' ); } );

keepNativeSelector()Возвращает: Селектор

Примечание:Этот метод устарел начиная с jQuery Mobile 1.4.0 и будет удален в 1.5.0. Новый параметр keepNative его заменяет.

Возвращает селектор, используемый для фильтрации элементов, которые не должны быть улучшены.

(версия устарела: 1.4.0)

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода keepNativeSelector:

$( ".selector" ).page( "keepNativeSelector" );

removeContainerBackground()Возвращает: jQuery (только для плагинов)

Примечание:Этот метод устарел начиная с jQuery Mobile 1.4.0 и будет удален в 1.5.0.

Удаляет цветовой оттенок фона из контейнера виджета страницы (обычно тело).

(версия устарела: 1.4.0)

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода removeContainerBackground:

$( ".selector" ).page( "removeContainerBackground" );

setContainerBackground( theme )Возвращает: jQuery (только для плагинов)

Примечание:Этот метод устарел начиная с jQuery Mobile 1.4.0 и будет удален в 1.5.0.

Устанавливает новый цветовой оттенок фона для контейнера виджета страницы (обычно тело).

(версия устарела: 1.4.0)

theme

Тип: Строка

Примеры кода:

Вызов метода setContainerBackground:

$( ".selector" ).page( "setContainerBackground", "b" );

События

beforecreate( event )Тип: `pagebeforecreate`

Вызывается перед созданием страницы. Если один из обработчиков вернет false, страница не будет создана.

event

Тип: Событие

Примечание: Объект ui пустой, но включен для согласованности с другими событиями.

Примеры кода:

Инициализируйте страницу с указанным обработчиком beforecreate:

$( ".selector" ).page({
  beforecreate: function( event, ui ) {}
});

Свяжите обработчик события со страницей beforecreate:

$( ".selector" ).on( "pagebeforecreate", function( event, ui ) {} );

create( event )Тип: `pagecreate`

Вызывается после создания страницы и внесения улучшений в страницу.

event

Тип: Событие

Примечание: Объект ui пустой, но включен для согласованности с другими событиями.

Примеры кода:

Инициализируйте страницу с указанным обработчиком create:

$( ".selector" ).page({
  create: function( event, ui ) {}
});

Свяжите обработчик события со страницей create:

$( ".selector" ).on( "pagecreate", function( event, ui ) {} );

Пример:

Базовый пример страницы.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>page demo</title>
  <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 header (optional): Example page</h1>
  </div>
  <div role="main" class="ui-content">
    <h2>Page content</h2>
    <p>Page content goes here.</p>
  </div>
  <div data-role="footer">
    <h1>Page footer (optional)</h1>
  </div>
</div>
 
</body>
</html>

Виджет страницы