Page

<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>

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

$.mobile.back();

Sets the position of the dialog close button in the header.

Possible values:

"left"

The button will be placed on the left edge of the titlebar.

"right"

The button will be placed on the right edge of the titlebar.

"none"

The dialog will not have a close button.

This option is also exposed as a data attribute: data-close-btn.

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

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

Customizes the text of the close button which is helpful for translating this into different languages. The close button is displayed as an icon-only button by default so the text isn't visible on-screen, but is read by screen readers so this is an important accessibility feature.

This option is also exposed as a data attribute: data-close-btn-text="Fermer".

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

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

Sets the color scheme (swatch) for the content div of the page widget. It accepts a single letter from a-z that maps to the swatches included in your theme.

Possible values: swatch letter (a-z).

This option is also exposed as a data attribute: data-content-theme="b".

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

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

Sets whether to draw the dialog with rounded corners.

This option is also exposed as a data attribute: data-corners="false".

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

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

This option is also exposed as a data attribute: data-defaults="true".

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

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

Sets whether the page should be styled like a dialog.

This option is also exposed as a data attribute: data-dialog="true".

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

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

This option is also exposed as a data attribute: data-disabled="true".

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

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

Sets whether to keep the page in the DOM after the user has navigated away from it.

This option is also exposed as a data attribute: data-dom-cache="true".

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

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

The default initSelector for the page widget is:

":jqmData(role='page')"

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

Note: Remember to attach the mobileinit handler after you have loaded jQuery, but before you load jQuery Mobile, because the event is triggered as part of jQuery Mobile's loading process.

The value of this option is a jQuery selector string. The framework selects elements based on the value of this option and instantiates page widgets on each of the resulting list of elements.

The value of this option is a selector that will be used in addition to the keepNativeDefault option to prevent elements matching it from being enhanced.

This option is also exposed as a data attribute: data-keep-native=".do-not-enhance.

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

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

The value of this option is a selector that will be used to prevent elements matching it from being enhanced.

This option is also exposed as a data attribute: data-keep-native-default=".do-not-enhance.

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

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

Dialogs appear to be floating above an overlay layer. This overlay adopts the swatch "a" content color by default, but the data-overlay-theme attribute can be added to the element to set the overlay to any swatch letter.

Possible values: swatch letter (a-z)

This option is also exposed as a data attribute: data-overlay-theme="b".

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

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

Possible values: swatch letter (a-z).

This option is also exposed as a data attribute: data-theme="b".

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

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

Invoke the method:

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

Returns the selector used to filter elements which are not to be enhanced.

Invoke the keepNativeSelector method:

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

Removes the background swatch from the page widget's container (usually the body).

Invoke the removeContainerBackground method:

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

Sets a new background swatch for the page widget's container (usually the body).

Invoke the setContainerBackground method:

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

Triggered before a page is created. If one of the handlers returns false, the page is not created.

Initialize the page with the beforecreate callback specified:

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

Bind an event listener to the pagebeforecreate event:

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

Triggered after a page has been created and enhancements to the page have been made.

Initialize the page with the create callback specified:

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

Bind an event listener to the pagecreate event:

$( ".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>