{"id":122,"date":"2023-08-25T17:34:56","date_gmt":"2023-08-25T17:34:56","guid":{"rendered":"\/\/api.jquerymobile.com\/1.4\/?p=122"},"modified":"2023-08-25T17:34:56","modified_gmt":"2023-08-25T17:34:56","slug":"pagecontainer","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.4\/pagecontainer\/","title":{"rendered":"Pagecontainer Widget"},"content":{"rendered":"

\nPagecontainer Widget<\/span>version added: 1.4<\/span>\n<\/h2>\n
\n

Description: <\/strong>Manages a collection of pages.<\/p>\n

QuickNav<\/h2><\/header>
\n

Options<\/h3>\n
defaults<\/a><\/div>\n
disabled<\/a><\/div>\n
theme<\/a><\/div>\n<\/div>\n
\n

Methods<\/h3>\n
change<\/a><\/div>\n
getActivePage<\/a><\/div>\n
load<\/a><\/div>\n<\/div>\n
\n

Events<\/h3>\n
beforechange<\/a><\/div>\n
beforehide<\/a><\/div>\n
beforeload<\/a><\/div>\n
beforeshow<\/a><\/div>\n
beforetransition<\/a><\/div>\n
change<\/a><\/div>\n
changefailed<\/a><\/div>\n
create<\/a><\/div>\n
hide<\/a><\/div>\n
load<\/a><\/div>\n
loadfailed<\/a><\/div>\n
remove<\/a><\/div>\n
show<\/a><\/div>\n
transition<\/a><\/div>\n<\/div><\/section>
\n\t\t

Smooth Navigation Between Pages<\/h2>\n\t\t
\nNote:<\/strong> The pagecontainer widget is designed to be a singleton instantiated by the framework on the body<\/code> element. This limitation will be removed in future versions of jQuery Mobile.<\/div>\n\t\t

jQuery Mobile's central abstraction is the use of multiple pages inside a single HTML document. The children of the body<\/code> are all div<\/code> elements that have been enhanced into page<\/a> widgets. These are jQuery Mobile pages.<\/p>\n\t\t

Only one page is visible at a time. Upon navigation, the currently visible page is hidden, and another page is shown. Moving from one page to another is accomplished via a transition. This is not possible when navigating between HTML documents via HTTP, because the browser discards all state associated with the source page when navigating to the target page, making it impossible to perform this task via a smooth transition effect such as a fade or a slide.<\/p>\n\t\t

Multipage Documents<\/h2>\n\t\t

In its simplest form, the HTML document retrieved by the browser has a body<\/code> consisting of several div<\/code> elements which are enhanced using the page<\/code> widget. Each such page has an id<\/code> attribute to distinguish it from other pages.<\/p>\n\t\t

The pages can be interlinked using anchors. When the user clicks such an anchor, a new history entry is created, and the page to which the anchor refers is displayed by means of a smooth transition from the previous page. The example below illustrates a multipage setup.\n\t\tNote:<\/strong> If the example below animates using a fade transition instead of the slide transition requested in the anchor, it is because your browser does not support CSS 3D transforms.<\/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\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\t\t
18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
28<\/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
<!doctype html<\/span>><\/span><\/code><\/div><\/div>
<html<\/span>><\/span><\/code><\/div><\/div>
<head<\/span>><\/span><\/code><\/div><\/div>
  <title<\/span>><\/span>Multipage example<\/title<\/span>><\/span><\/code><\/div><\/div>
  <meta<\/span> name<\/span>="viewport"<\/span> content<\/span>="width=device-width, initial-scale=1"<\/span> \/><\/span><\/code><\/div><\/div>
  <link<\/span> rel<\/span>="stylesheet"<\/span> href<\/span>="\/\/code.jquery.com\/mobile\/1.4.5\/jquery.mobile-1.4.5.min.css"<\/span> \/><\/span><\/code><\/div><\/div>
  <script<\/span> src<\/span>="\/\/code.jquery.com\/jquery-1.10.2.min.js"<\/span>><\/span><\/script<\/span>><\/span><\/code><\/div><\/div>
  <script<\/span> src<\/span>="\/\/code.jquery.com\/mobile\/1.4.5\/jquery.mobile-1.4.5.min.js"<\/span>><\/span><\/script<\/span>><\/span><\/code><\/div><\/div>
<\/head<\/span>><\/span><\/code><\/div><\/div>
<body<\/span>><\/span><\/code><\/div><\/div>
  <div<\/span> data-role<\/span>="page"<\/span> id<\/span>="page1"<\/span>><\/span><\/code><\/div><\/div>
    <div<\/span> data-role<\/span>="header"<\/span>><\/span><\/code><\/div><\/div>
      <h1<\/span>><\/span>Page 1<\/h1<\/span>><\/span><\/code><\/div><\/div>
    <\/div<\/span>><\/span><\/code><\/div><\/div>
    <div<\/span> role<\/span>="main"<\/span> class<\/span>="ui-content"<\/span>><\/span><\/code><\/div><\/div>
      <a<\/span> href<\/span>="#page2"<\/span> data-transition<\/span>="slide"<\/span> class<\/span>="ui-btn ui-corner-all ui-btn-inline"<\/span>><\/span>Go To Page 2<\/a<\/span>><\/span><\/code><\/div><\/div>
    <\/div<\/span>><\/span><\/code><\/div><\/div>
  <\/div<\/span>><\/span><\/code><\/div><\/div>
  <div<\/span> data-role<\/span>="page"<\/span> id<\/span>="page2"<\/span>><\/span><\/code><\/div><\/div>
    <div<\/span> data-role<\/span>="header"<\/span>><\/span><\/code><\/div><\/div>
      <h1<\/span>><\/span>Page 2<\/h1<\/span>><\/span><\/code><\/div><\/div>
    <\/div<\/span>><\/span><\/code><\/div><\/div>
    <div<\/span> role<\/span>="main"<\/span> class<\/span>="ui-content"<\/span>><\/span><\/code><\/div><\/div>
      <a<\/span> href<\/span>="#page1"<\/span> data-rel<\/span>="back"<\/span> data-transition<\/span>="slide"<\/span> class<\/span>="ui-btn ui-corner-all ui-btn-inline"<\/span>><\/span>Go Back To Page 1<\/a<\/span>><\/span><\/code><\/div><\/div>
    <\/div<\/span>><\/span><\/code><\/div><\/div>
  <\/div<\/span>><\/span><\/code><\/div><\/div>
<\/body<\/span>><\/span><\/code><\/div><\/div>
<\/html<\/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