{"id":70,"date":"2023-08-25T17:32:38","date_gmt":"2023-08-25T17:32:38","guid":{"rendered":"\/\/api.jquerymobile.com\/1.3\/?p=70"},"modified":"2023-08-25T17:32:38","modified_gmt":"2023-08-25T17:32:38","slug":"page","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.3\/page\/","title":{"rendered":"Page Widget"},"content":{"rendered":"

\nPage Widget<\/span>version added: 1.0<\/span>\n<\/h2>\n
\n

Description: <\/strong>Primary unit of content.<\/p>\n

QuickNavExamples<\/a>\n<\/h2><\/header>
\n

Options<\/h3>\n
domCache<\/a><\/div>\n
keepNativeDefault<\/a><\/div>\n
theme<\/a><\/div>\n<\/div>\n
\n

Methods<\/h3>\n
keepNativeSelector<\/a><\/div>\n
removeContainerBackground<\/a><\/div>\n
setContainerBackground<\/a><\/div>\n<\/div>\n
\n

Events<\/h3>\n
beforecreate<\/a><\/div>\n
create<\/a><\/div>\n<\/div><\/section>
\n\t\t

The page widget is responsible for managing a single item in jQuery Mobile's page-based architecture. It is designed to support either single page widgets within a HTML document, or multiple local internal linked page widgets within a HTML document.<\/p>\n\n\t\t

The goal of this model is to allow developers to create websites using best practices — where ordinary links will "just work" without any special configuration — while creating a rich, native-like experience that can't be achieved with standard HTTP requests.<\/p>\n\n\t\t

Caveat:<\/strong> Documents containing multiple pages cause Internet Explorer 7 to exhibit incorrect behavior when its "Back" button is pressed. In particular, if the user navigates between several of the pages internal to the document that has been loaded and then clicks the "Back" button to return to the start page, there will be occasions when clicking the "Back" button does not cause a return to the previous page. However, clicking the "Back" button enough times will eventually return the user through the performed navigation sequence back to the start page.<\/p>\n\t\t

Thus, if Internet Explorer 7 represents a significant proportion of the targeted user base, we recommended that pages be organized as individual HTML documents containing single page widgets, rather than as a single HTML document containing multiple internal pages.<\/p>\n\t<\/div>\n

Options<\/h2><\/header>
\n

domCache \n\t\t\t\t\t<\/h3>\n
\nType: <\/strong>Boolean<\/a>\n<\/div>\n
\nDefault: <\/strong>false<\/code>\n<\/div>\n
\n\t\t\t\t

Sets whether to keep the page in the DOM after the user has navigated away from it.<\/p>\n\t\t\t\t

This option is also exposed as a data attribute: data-dom-cache="true"<\/code>.<\/p>\n\t\t\t<\/div>\nCode examples:<\/strong>

Initialize the page with the domCache<\/code> option specified:<\/p>\n

\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( ".selector"<\/span> ).page({<\/code><\/div><\/div>
  domCache<\/span>: true<\/span><\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n
Get or set the domCache<\/code> option, after initialization:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\/\/ Getter<\/span><\/code><\/div><\/div>
var<\/span> domCache = $( ".selector"<\/span> ).page( "option"<\/span>, "domCache"<\/span> );<\/code><\/div><\/div>
 <\/code><\/div><\/div>
\/\/ Setter<\/span><\/code><\/div><\/div>
$( ".selector"<\/span> ).page( "option"<\/span>, "domCache"<\/span>, true<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n
\n
keepNativeDefault \n\t\t\t\t\t<\/h3>\n
\nType: <\/strong>String<\/a>\n<\/div>\n
\nDefault: <\/strong>:jqmData(role='none'), :jqmData(role='nojs')<\/code>\n<\/div>\n
\n\t\t\t\t
The value of this option is a selector that will be used to prevent elements matching it from being enhanced.<\/p>\n\t\t\t\t
This option is also exposed as a data attribute: data-keep-native-default=".do-not-enhance"<\/code>.<\/p>\n\t\t\t<\/div>\nCode examples:<\/strong>
Initialize the page with the keepNativeDefault<\/code> option specified:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( ".selector"<\/span> ).page({<\/code><\/div><\/div>
  keepNativeDefault<\/span>: ".do-not-enhance"<\/span><\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n
Get or set the keepNativeDefault<\/code> option, after initialization:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\/\/ Getter<\/span><\/code><\/div><\/div>
var<\/span> keepNativeDefault = $( ".selector"<\/span> ).page( "option"<\/span>, "keepNativeDefault"<\/span> );<\/code><\/div><\/div>
 <\/code><\/div><\/div>
\/\/ Setter<\/span><\/code><\/div><\/div>
$( ".selector"<\/span> ).page( "option"<\/span>, "keepNativeDefault"<\/span>, ".do-not-enhance"<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n
\n
theme \n\t\t\t\t\t<\/h3>\n
\nType: <\/strong>String<\/a>\n<\/div>\n
\nDefault: <\/strong>c<\/code>\n<\/div>\n
\n\t\t\t\t
Sets the swatch that will be used to draw the page.<\/p>\n\t\t\t\t
This option is also exposed as a data attribute: data-theme="a"<\/code>.<\/p>\n\t\t\t<\/div>\nCode examples:<\/strong>
Initialize the page with the theme<\/code> option specified:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( ".selector"<\/span> ).page({<\/code><\/div><\/div>
  theme<\/span>: "a"<\/span><\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n
Get or set the theme<\/code> option, after initialization:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\/\/ Getter<\/span><\/code><\/div><\/div>
var<\/span> theme = $( ".selector"<\/span> ).page( "option"<\/span>, "theme"<\/span> );<\/code><\/div><\/div>
 <\/code><\/div><\/div>
\/\/ Setter<\/span><\/code><\/div><\/div>
$( ".selector"<\/span> ).page( "option"<\/span>, "theme"<\/span>, "a"<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div><\/section>
Methods<\/h2><\/header>
\n
keepNativeSelector()Returns: jQuery<\/a> (plugin only<\/a>)<\/span>\n<\/h3>\n
Returns the selector used to filter elements which are not to be enhanced.<\/div>\n