{"id":106,"date":"2026-08-10T21:20:25","date_gmt":"2026-08-10T21:20:25","guid":{"rendered":"https:\/\/api.jquerymobile.com\/1.4\/?p=106"},"modified":"2026-08-10T21:20:25","modified_gmt":"2026-08-10T21:20:25","slug":"page","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.4\/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
closeBtn<\/a><\/div>\n
closeBtnText<\/a><\/div>\n
contentTheme<\/a><\/div>\n
corners<\/a><\/div>\n
defaults<\/a><\/div>\n
degradeInputs<\/a><\/div>\n
dialog<\/a><\/div>\n
disabled<\/a><\/div>\n
domCache<\/a><\/div>\n
initSelector<\/a><\/div>\n
keepNative<\/a><\/div>\n
keepNativeDefault<\/a><\/div>\n
overlayTheme<\/a><\/div>\n
theme<\/a><\/div>\n<\/div>\n
\n

Methods<\/h3>\n
bindRemove<\/a><\/div>\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

Pages<\/h2>\n\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 \u2014 where ordinary links will \"just work\" without any special configuration \u2014 while creating a rich, native-like experience that can't be achieved with standard HTTP requests.<\/p>\n\n\t\t

The page widget will auto-enhance its content upon creation. This means that it will instantiate widgets on its child elements by invoking .enhanceWithin()<\/code><\/a> on itself.<\/p>\n\n\t\t

Dialogs<\/h3>\n\n\t\t

The page widget has the option dialog<\/code> which you can set to true<\/code> to obtain a page styled like a dialog, such as in the example below:\n<\/p>

\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\t\t
6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
17<\/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
<div<\/span> data-role<\/span>=\"page\"<\/span> data-dialog<\/span>=\"true\"<\/span>><\/span><\/code><\/div><\/div>
  <div<\/span> data-role<\/span>=\"header\"<\/span>><\/span><\/code><\/div><\/div>
    <h2<\/span>><\/span>Are you sure?<\/h2<\/span>><\/span><\/code><\/div><\/div>
  <\/div<\/span>><\/span><\/code><\/div><\/div>
  <div<\/span> class<\/span>=\"ui-content\"<\/span> role<\/span>=\"main\"<\/span>><\/span><\/code><\/div><\/div>
    <h2<\/span>><\/span>Are you sure you wish to exit the application?<\/h2<\/span>><\/span><\/code><\/div><\/div>
    <p<\/span>><\/span>You have unsaved changes. If you exit without saving them, you will lose them.<\/p<\/span>><\/span><\/code><\/div><\/div>
    <div<\/span> class<\/span>=\"ui-grid-a\"<\/span>><\/span><\/code><\/div><\/div>
      <div<\/span> class<\/span>=\"ui-block-a\"<\/span>><\/span><\/code><\/div><\/div>
        <a<\/span> href<\/span>=\"#\"<\/span> id<\/span>=\"exit-button\"<\/span> class<\/span>=\"ui-btn ui-btn-b ui-shadow ui-corner-all\"<\/span>><\/span>Exit<\/a<\/span>><\/span><\/code><\/div><\/div>
      <\/div<\/span>><\/span><\/code><\/div><\/div>
      <div<\/span> class<\/span>=\"ui-block-b\"<\/span>><\/span><\/code><\/div><\/div>
        <a<\/span> href<\/span>=\"#\"<\/span> id<\/span>=\"cancel-button\"<\/span> class<\/span>=\"ui-btn ui-shadow ui-corner-all\"<\/span>><\/span>Cancel<\/a<\/span>><\/span><\/code><\/div><\/div>
      <\/div<\/span>><\/span><\/code><\/div><\/div>
    <\/div<\/span>><\/span><\/code><\/div><\/div>
  <\/div<\/span>><\/span><\/code><\/div><\/div>
<\/div<\/span>><\/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\t\t