libs/js/jquery-mobile-1.2.0/docs/pages/popup/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <meta charset="utf-8">
   5         <meta name="viewport" content="width=device-width, initial-scale=1">
   6         <title>jQuery Mobile Docs - Popup</title>
   7         <link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile.css" />
   8         <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
   9
  10         <script src="../../../js/jquery.js"></script>
  11         <script src="../../../docs/_assets/js/jqm-docs.js"></script>
  12         <script src="../../../js/"></script>
  13
  14 </head>
  15 <body>
  16
  17         <div data-role="page" class="type-interior">
  18
  19                 <div data-role="header" data-theme="f" data-position="fixed">
  20                 <h1>Popup</h1>
  21                 <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
  22                 <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
  23         </div><!-- /header -->
  24
  25         <div data-role="content" class="ui-body">
  26                 <div class="content-primary">
  27
  28                         <h2>Popup</h2>
  29
  30                         <ul data-role="controlgroup" data-type="horizontal" class="localnav">
  31                                 <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
  32                                 <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
  33                                 <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
  34                                 <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
  35                         </ul>
  36
  37                         <p>To create a popup, add the <code>data-role="popup"</code> attribute to a div with the popup contents. Then create a link with the <code>href</code> set to the <code>id</code> of the popup div, and add the attribute <code>data-rel="popup"</code> to tell the framework to open the popup when the link is tapped. This is a similar markup pattern to the <a href="../dialog/index.html">dialog</a> widget. A popup div has to be nested inside the same page as the link.</p>
  38
  39 <pre><code>
  40 &lt;a href=&quot;#popupBasic&quot; <strong>data-rel=&quot;popup&quot;</strong>&gt;Open Popup&lt;/a&gt;
  41
  42 &lt;div <strong>data-role=&quot;popup&quot;</strong> id=&quot;popupBasic&quot;&gt;
  43         &lt;p&gt;This is a completely basic popup, no options set.&lt;p&gt;
  44 &lt;/div&gt;
  45 </code></pre>
  46
  47                 <p>This will result in the following popup:</p>
  48                 <a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true">Open Popup</a>
  49
  50                 <div data-role="popup" id="popupBasic">
  51                         <p>This is a completely basic popup, no options set.</p>
  52                 </div>
  53
  54                 <p>The popup consists of two elements: the screen, which is a transparent or translucent element that covers the entire document, and the container, which is the popup itself. If your original element had an <code>id</code> attribute, the screen and the container will each receive an <code>id</code> attribute based on it. The screen's <code>id</code> will be suffixed with "-screen", and the container's <code>id</code> will be suffixed with "-popup" (in the above example, <code>id="popupBasic-screen"</code> and <code>id="popupBasic-popup"</code>, respectively).</p>
  55
  56                 <p>The framework adds a small amount of margin to text elements, but it's really just a container with <strong>rounded corners</strong> and a <strong>shadow</strong> which serves as a blank slate for your designs (even these features can be disabled via <a href="options.html">options</a>).</p>
  57
  58                 <p>This simple styling makes it easy to add in widgets to create a variety of different interactions. Here are a few real-world examples that combine the various settings and styles you can achieve out of the box with popups:</p>
  59
  60                 <a href="#popupInfo" data-rel="popup" data-role="button" data-inline="true">Tooltip</a>
  61                 <a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true">Menu</a>
  62                 <a href="#popupNested" data-rel="popup" data-role="button" data-inline="true">Nested menu</a>
  63                 <a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-inline="true">Form</a>
  64                 <a href="#popupDialog" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop">Dialog</a>
  65                 <a href="#popupPhoto" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="fade">Photo</a>
  66
  67                 <div data-role="popup" id="popupInfo" class="ui-content" data-theme="e" style="max-width:350px;">
  68           <p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
  69                 </div>
  70
  71                 <div data-role="popup" id="popupMenu" data-theme="a">
  72                                 <ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="b">
  73                                         <li data-role="divider" data-theme="a">Popup API</li>
  74                                         <li><a href="options.html">Options</a></li>
  75                                         <li><a href="methods.html">Methods</a></li>
  76                                         <li><a href="events.html">Events</a></li>
  77                                 </ul>
  78                 </div>
  79
  80
  81                 <div data-role="popup" id="popupNested" data-theme="none">
  82                         <div data-role="collapsible-set" data-theme="b" data-content-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
  83                                 <div data-role="collapsible" data-inset="false">
  84                                         <h2>Farm animals</h2>
  85                                         <ul data-role="listview">
  86                                                 <li><a href="../dialog.html" data-rel="dialog">Chicken</a></li>
  87                                                 <li><a href="../dialog.html" data-rel="dialog">Cow</a></li>
  88                                                 <li><a href="../dialog.html" data-rel="dialog">Duck</a></li>
  89                                                 <li><a href="../dialog.html" data-rel="dialog">Sheep</a></li>
  90                                         </ul>
  91                                 </div><!-- /collapsible -->
  92                                 <div data-role="collapsible" data-inset="false">
  93                                         <h2>Pets</h2>
  94                                         <ul data-role="listview">
  95                                                 <li><a href="../dialog.html" data-rel="dialog">Cat</a></li>
  96                                                 <li><a href="../dialog.html" data-rel="dialog">Dog</a></li>
  97                                                 <li><a href="../dialog.html" data-rel="dialog">Iguana</a></li>
  98                                                 <li><a href="../dialog.html" data-rel="dialog">Mouse</a></li>
  99                                         </ul>
 100                                 </div><!-- /collapsible -->
 101                                 <div data-role="collapsible" data-inset="false">
 102                                         <h2>Ocean Creatures</h2>
 103                                         <ul data-role="listview">
 104                                                 <li><a href="../dialog.html" data-rel="dialog">Fish</a></li>
 105                                                 <li><a href="../dialog.html" data-rel="dialog">Octopus</a></li>
 106                                                 <li><a href="../dialog.html" data-rel="dialog">Shark</a></li>
 107                                                 <li><a href="../dialog.html" data-rel="dialog">Starfish</a></li>
 108                                         </ul>
 109                                 </div><!-- /collapsible -->
 110                                 <div data-role="collapsible" data-inset="false">
 111                                         <h2>Wild Animals</h2>
 112                                         <ul data-role="listview">
 113                                                 <li><a href="../dialog.html" data-rel="dialog">Lion</a></li>
 114                                                 <li><a href="../dialog.html" data-rel="dialog">Monkey</a></li>
 115                                                 <li><a href="../dialog.html" data-rel="dialog">Tiger</a></li>
 116                                                 <li><a href="../dialog.html" data-rel="dialog">Zebra</a></li>
 117                                         </ul>
 118                                 </div><!-- /collapsible -->
 119                         </div><!-- /collapsible set -->
 120                 </div><!-- /popup -->
 121
 122
 123                 <div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
 124                         <form>
 125                                 <div style="padding:10px 20px;">
 126                                   <h3>Please sign in</h3>
 127                           <label for="un" class="ui-hidden-accessible">Username:</label>
 128                           <input type="text" name="user" id="un" value="" placeholder="username" data-theme="a" />
 129
 130                           <label for="pw" class="ui-hidden-accessible">Password:</label>
 131                           <input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a" />
 132
 133                           <button type="submit" data-theme="b">Sign in</button>
 134                                 </div>
 135                         </form>
 136                 </div>
 137
 138                 <div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
 139                         <div data-role="header" data-theme="a" class="ui-corner-top">
 140                                 <h1>Delete Page?</h1>
 141                         </div>
 142                         <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
 143                                 <h3 class="ui-title">Are you sure you want to delete this page?</h3>
 144                                 <p>This action cannot be undone.</p>
 145                                 <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>
 146                                 <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Delete</a>
 147                         </div>
 148                 </div>
 149
 150                 <div data-role="popup" id="popupPhoto" data-overlay-theme="a" data-theme="d" data-corners="false">
 151                         <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img class="popphoto" src="../../_assets/images/colorful-city.jpg" alt="Colorful city">
 152                 </div>
 153
 154                 <h3>Advanced popup techniques</h3>
 155                 <p>Learn how to customize and extend popups by working with the API, custom scripts, and styles.</p>
 156                 <a href="popup-images.html" data-ajax="false" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right">Scaling images</a>
 157                 <a href="popup-iframes.html" data-ajax="false" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right">Map + video iframes</a>
 158                 <a href="popup-panels.html" data-ajax="false" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right">Overlay panels</a>
 159
 160                 <h2>Calling the popup plugin</h2>
 161
 162                 <p>This plugin will autoinitialize on any page that contains a div with the attribute <code>data-role="popup"</code>. However, if needed you can directly call the <code>popup</code> plugin on any selector, just like any jQuery plugin and programmatically work with the popup <a href="options.html">options</a>, <a href="methods.html">methods</a>, and <a href="events.html">events</a> API:</p>
 163
 164 <pre><code>
 165 $( "#myPopupDiv" ).popup();
 166 </code></pre>
 167
 168                 <h2>Opening popups</h2>
 169
 170                 <p>Using the markup-based configuration, when a link with the <code>data-rel="popup"</code> is tapped, the corresponding popup container with the id referenced in the <code>href</code> of the link will be shown. To open a popup programmatically, call popup with the <code>open</code> method on the popup container:</p>
 171
 172 <pre><code>
 173 $( "#myPopupDiv" ).popup( "open" )
 174 </code></pre>
 175
 176                 <h2>Closing popups</h2>
 177                 <p>Popups can be closed either by clicking outside the popup widget or by pressing the <code>Esc</code> key. Popups can also be closed via the <code>close</code> method:</p>
 178
 179 <pre><code>
 180 $( "#myPopupDiv" ).popup( "close" )
 181 </code></pre>
 182
 183                         <p>To add an explicit close button to a popup, add a link with the role of button into the popup container with a <code>data-rel="back"</code> attribute which will close the popup when tapped. We have created helper classes to position buttons in the upper left (<code>ui-btn-left</code>) or upper right (<code>ui-btn-right</code>) of the popup but you may need to tweak these or add custom positioning styles depending on your design. We recommend adding standard content padding to the popup to make room for the buttons (see next section).</p>
 184
 185
 186                 <pre><code>
 187 &lt;div data-role=&quot;popup&quot;&gt;
 188         <strong>&lt;a href=&quot;#&quot; data-rel=&quot;back&quot; data-role=&quot;button&quot; data-theme=&quot;a&quot; data-icon=&quot;delete&quot; data-iconpos=&quot;notext&quot; class=&quot;ui-btn-right&quot;&gt;Close&lt;/a&gt;</strong>
 189         ...popup contents go here...
 190 &lt;/div&gt;
 191                 </code></pre>
 192
 193                 <a href="#popupCloseRight" data-rel="popup" data-role="button" data-inline="true">Popup with close button right</a>
 194                 <a href="#popupCloseLeft" data-rel="popup" data-role="button" data-inline="true">Popup with close button left</a>
 195
 196                 <div data-role="popup" id="popupCloseRight" class="ui-content" style="max-width:280px">
 197                         <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
 198                         <p>I have a close button at the top right corner with simple HTML markup.</p>
 199                 </div>
 200
 201                 <div data-role="popup" id="popupCloseLeft" class="ui-content" style="max-width:280px">
 202                         <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>
 203                         <p>I have a close button at the top left corner with simple HTML markup.</p>
 204                 </div>
 205
 206                 <h2>Adding padding</h2>
 207                 <p>For popups with formatted text, padding is needed. We recommend adding the <code>ui-content</code> class to the popup container which adds the standard 15px of padding, just like the page content container. Write your own styles to create a more customized design if needed.</p>
 208
 209                 <pre><code>
 210 &lt;a href=&quot;#popupPadded&quot; data-rel=&quot;popup&quot; data-role=&quot;button&quot;&gt;Popup with padding&lt;/a&gt;
 211
 212 &lt;div data-role=&quot;popup&quot; id=&quot;popupPadded&quot; <strong>class=&quot;ui-content&quot;</strong>&gt;
 213         &lt;p&gt;This is a popup with the &lt;code&gt;ui-content&lt;/code&gt; class added to the popup container.&lt;/p&gt;
 214 &lt;/div&gt;
 215                 </code></pre>
 216
 217                 <p>This will result in the following popup with content padding:</p>
 218                 <a href="#popupPadded" data-rel="popup" data-role="button" data-inline="true">Popup with padding</a>
 219
 220                 <div data-role="popup" id="popupPadded" class="ui-content">
 221                         <p>This is a popup with the <code>ui-content</code> class added to the popup container.</p>
 222                 </div>
 223
 224                 <p>When padding is added, we apply a few style rules to negate the top margin for the first heading or paragraph in the popup and do the same for the last element's bottom margin. This keep the popups from having too much vertical space when the content padding and element margins combine.</p>
 225
 226
 227                 <h2>Positioning options</h2>
 228                 <p>By default, popups open centered vertically and horizontally over the thing you clicked (the origin) which is good for popups used as tooltips or menus. The framework also applies some basic collision detection rules to ensure that the popup will appear on-screen so the ultimate position may not always be centered over the origin.</p>
 229                 <p>For situations like a dialog or lightbox where the popup should appear centered within the window instead of over the origin, add the <code>data-position-to</code> attribute to the <strong>link</strong> and specify a value of <code>window</code>. </p>
 230                 <p>It's also possible to specify any valid selector as the value of <code>position-to</code> in addition to <code>origin</code> and <code>window</code>. For example, if you add <code>data-position-to="#myElement"</code> the popup will be positioned over the element with the id <code>myElement</code>.</p>
 231 <pre id="codeSample"><code>
 232 &lt;a href=&quot;#positionWindow&quot; data-rel=&quot;popup&quot; <strong>data-position-to=&quot;window&quot;</strong>&gt;
 233
 234 &lt;div data-role=&quot;popup&quot; id=&quot;positionWindow&quot;&gt;
 235         &lt;p&gt;I am positioned to the window.&lt;/p&gt;
 236 &lt;/div&gt;
 237 </code></pre>
 238
 239                 <p>A few examples:</p>
 240
 241                 <a href="#positionWindow" data-role="button" data-inline="true" data-rel="popup" data-position-to="window">Position to window</a>
 242                 <a href="#positionOrigin" data-role="button" data-inline="true" data-rel="popup" data-position-to="origin">Position to origin</a>
 243                 <a href="#positionSelector" data-role="button" data-inline="true" data-rel="popup" data-position-to="#codeSample">Position to #codeSample</a>
 244
 245                 <div data-role="popup" id="positionWindow" class="ui-content" data-theme="d">
 246                         <p>I am positioned to the window.</p>
 247                 </div>
 248
 249                 <div data-role="popup" id="positionOrigin" class="ui-content" data-theme="d">
 250                         <p>I am positioned over the origin.</p>
 251                 </div>
 252
 253                 <div data-role="popup" id="positionSelector" class="ui-content" data-theme="d">
 254                         <p>I am positioned over the code sample via selector.</p>
 255                 </div>
 256
 257
 258                 <p>The popup's placement constraints, which may cause the popup not to appear centered as desired, are as follow:</p>
 259                 <ol>
 260                         <li>The width of the popup will be limited using CSS <code>max-width</code> to the width of the window minus a tolerance of 15px on either side.</li>
 261                         <li>A tolerance from the edges of the window (15px from each of the sides and 30px from the top and the bottom) will be observed when the popup fits inside the window. Tall popups are allowed to overflow the top and bottom edges of the window. Those parts of the popup can be viewed by manually scrolling the document. This tolerance is a <a href="options.html">configurable option</a>.</li>
 262                         <li>The top coordinate of the popup will never be negative. This ensures that the top of the popup will not be cut off.</li>
 263                         <li>If centering the popup over an element would cause the overall height of the document to increase, the popup is shifted upwards at most until its top coordinate becomes 0.</li>
 264                 </ol>
 265
 266         <p>Also note that a popup is currently always placed at the center of the window after an orientation change or window resize event.</p>
 267
 268                 <p>See <a href="methods.html">methods</a> for information about setting the popup position programmatically, including the option to specify <strong>x and y coordinates</strong>.</p>
 269
 270                 <h2>Setting transitions</h2>
 271                 <p>By default, popups have no transition to make them open as quickly as possible. To set the transition used for a popup, add the <code>data-transition</code> attribute to the link that references the popup. The reverse version of the transition will be used when closing the popup.</p>
 272
 273 <pre><code>
 274 &lt;a href=&quot;#transitionExample&quot; <strong>data-transition=&quot;flip&quot;</strong> data-rel=&quot;popup&quot;&gt;
 275    Flip transition
 276 &lt;/a&gt;
 277 </code></pre>
 278
 279                 <p>For performance reasons on mobile devices, we recommend using simpler transitions like pop, fade or none for smooth and fast popup animations, especially with larger or complex widgets within a popup. To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to "fade" for all transition types. See the <a href="../page-transitions.html">transitions</a> page for detailed information on the transition system.</p>
 280
 281                 <a href="#transitionExample" data-transition="none" data-role="button" data-inline="true" data-rel="popup">No transition</a>
 282                 <a href="#transitionExample" data-transition="pop" data-role="button" data-inline="true" data-rel="popup">Pop</a>
 283                 <a href="#transitionExample" data-transition="fade" data-role="button" data-inline="true" data-rel="popup">Fade</a>
 284                 <a href="#transitionExample" data-transition="flip" data-role="button" data-inline="true" data-rel="popup">Flip</a>
 285                 <a href="#transitionExample" data-transition="turn" data-role="button" data-inline="true" data-rel="popup">Turn</a>
 286                 <a href="#transitionExample" data-transition="flow" data-role="button" data-inline="true" data-rel="popup">Flow</a>
 287                 <a href="#transitionExample" data-transition="slide" data-role="button" data-inline="true" data-rel="popup">Slide</a>
 288                 <a href="#transitionExample" data-transition="slidefade" data-role="button" data-inline="true" data-rel="popup">Slidefade</a>
 289                 <a href="#transitionExample" data-transition="slideup" data-role="button" data-inline="true" data-rel="popup">Slide up</a>
 290                 <a href="#transitionExample" data-transition="slidedown" data-role="button" data-inline="true" data-rel="popup">Slide down</a>
 291
 292
 293                 <div data-role="popup" id="transitionExample" class="ui-content" data-theme="d">
 294                         <p>I'm a simple popup.</p>
 295                 </div>
 296
 297                 <p>When you launch the popup from any of the buttons, the <code>data-transition</code> set on the button will be used. However, if you launch the popup programmatically, such as via <code>$( "#transitionExample" ).popup( "open" )</code>, the <code>data-transition</code> attribute specified in the definition of the popup will be used if present.</p>
 298
 299
 300                 <h2>Theming the popup and overlay</h2>
 301
 302                 <p>The <code>popup</code> plugin provides two theme-related options: <code>data-theme</code> and <code>data-overlay-theme</code>. The <code>data-theme</code> option refers to the theme of the popup itself, whereas <code>data-overlay-theme</code> refers to the theme of the popup's background, which covers the entire window behind the popup.</p>
 303                 <p><code>data-theme</code> will be inherited from the page, and will always have a valid value when the popup opens, unless you explicitly specify <code>data-theme=&quot;none&quot;</code>, in which case the popup will have a transparent background.</p>
 304                 <p>The <code>data-overlay-theme</code> will never be set, and the popup's background, although always present when the popup is shown, will be completely transparent, unless explicitly set using for example <code>data-overlay-theme=&quot;a&quot;</code>. In this case, the background will fade in, partially obscuring the rest of the window, to further direct attention to the popup. Here is an example of an explicitly themed popup:</p>
 305
 306 <pre><code>
 307 &lt;div id=&quot;both&quot; data-role=&quot;popup&quot; <strong>data-theme=&quot;e&quot; data-overlay-theme=&quot;a&quot;</strong> class=&quot;ui-content&quot;&gt;
 308   ...Popup contents...
 309 &lt;/div&gt;
 310 </code></pre>
 311
 312                 <a href="#theme" data-rel="popup" data-role="button" data-inline="true">Theme A</a>
 313                 <div id="theme" data-role="popup" data-theme="a" class="ui-content">
 314                   <p>I have <code>data-theme="a"</code> set on me</p>
 315                 </div>
 316
 317                 <a href="#transparent" data-rel="popup" data-role="button" data-inline="true">Theme "none", no shadow</a>
 318                 <div id="transparent" data-role="popup" data-theme="none" data-shadow="false">
 319                         <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
 320                   <img src="../../_assets/images/firefox-logo.png" class="popphoto" alt="firefox logo on a transparent popup">
 321                 </div>
 322
 323                 <a href="#overlay" data-rel="popup" data-role="button" data-inline="true">Overlay theme A</a>
 324                 <div id="overlay" data-role="popup" data-overlay-theme="a" class="ui-content">
 325                   <p>I have a <code>data-overlay-theme="a"</code> set on me</p>
 326                 </div>
 327
 328                 <a href="#both" data-rel="popup" data-role="button" data-inline="true">Theme E + overlay A</a>
 329                 <div id="both" data-role="popup" data-overlay-theme="a" data-theme="e" class="ui-content">
 330                   <p>I have <code>data-theme="e"</code> and <code>data-overlay-theme="a"</code> set on me</p>
 331                 </div>
 332
 333
 334                 <h2>Note: Chaining of popups not allowed</h2>
 335                 <p>The framework does not currently support chaining of popups so it's not possible to embed a link from one popup to another popup. All links with a <code>data-rel="popup"</code> inside a popup will not do anything at all.</p>
 336                 <p>This also means that custom select menus will not work inside popups, because they are themselves implemented using popups. If you place a select menu inside a popup, it will be rendered as a native select menu, even if you specify <code>data-native-menu="false"</code>.</p>
 337                 <p>A workaround to get chained popups working is the use of a timeout for example in the <code>popupafterclose</code> event bound to the invoking popup. In the following example, when the first popup is closed, the second will be opened by a delayed call to the <code>open</code> method:</p>
 338 <pre><code>
 339 $( document ).on( "pageinit", function() {
 340     $( '.popupParent' ).on({
 341         popupafterclose: function() {
 342             setTimeout( function(){ $( '.popupChild' ).popup( 'open' ) }, 100 );
 343         }
 344     });
 345 });
 346 </code></pre>
 347
 348
 349         </div><!--/content-primary -->
 350
 351                                 <div class="content-secondary">
 352
 353                                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 354
 355                                                         <h3>More in this section</h3>
 356
 357                                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
 358
 359                                                                 <li data-role="list-divider">Pages &amp; Dialogs</li>
 360                                                                 <li><a href="../page-anatomy.html">Anatomy of a page</a></li>
 361                                                                 <li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
 362                                                                 <li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
 363                                                                 <li><a href="../page-titles.html">Page titles</a></li>
 364                                                                 <li><a href="../page-links.html">Linking pages</a></li>
 365                                                                 <li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
 366                                                                 <li><a href="../loader.html">Page loading widget</a></li>
 367                                                                 <li><a href="../dialog/index.html">Dialogs</a></li>
 368                                                                 <li data-theme="a"><a href="index.html">Popups</a></li>
 369                                                                 <li><a href="../page-cache.html">Prefetching &amp; caching pages</a></li>
 370                                                                 <li><a href="../page-navmodel.html">Ajax, hashes &amp; history</a></li>
 371                                                                 <li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
 372                                                                 <li><a href="../page-scripting.html">Scripting pages</a></li>
 373                                                                 <li><a href="../phonegap.html">PhoneGap apps</a></li>
 374                                                                 <li><a href="../touchoverflow.html">touchOverflow feature</a></li>
 375                                                                 <li><a href="../pages-themes.html">Theming pages</a></li>
 376
 377                                                         </ul>
 378                                         </div>
 379                                 </div>
 380
 381 </div><!-- /content -->
 382
 383 <div data-role="footer" class="footer-docs" data-theme="c">
 384                 <p class="jqm-version"></p>
 385                 <p>&copy; 2012 jQuery Foundation and other contributors</p>
 386 </div>
 387
 388 </div><!-- /page -->
 389
 390 </body>
 391 </html>