libs/js/jquery-mobile-1.0.1pre/docs/pages/page-titles.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 - Page titles</title>
   7         <link rel="stylesheet"  href="../../css/themes/default/" />
   8         <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
   9         <script src="../../js/jquery.js"></script>
  10         <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
  11         <script src="../_assets/js/jqm-docs.js"></script>
  12         <script src="../../js/"></script>
  13 </head>
  14 <body>
  15
  16         <div data-role="page" class="type-interior">
  17
  18                 <div data-role="header" data-theme="f">
  19                 <h1>Page titles</h1>
  20                 <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
  21         </div><!-- /header -->
  22
  23         <div data-role="content">
  24                         <div class="content-primary">
  25
  26                 <h2>Titles in Ajax navigation</h2>
  27
  28                 <p>When you load the first page of a jQuery Mobile based site, then click a link or submit a form, Ajax is used to pull in the content of the requested page. Having both pages in the DOM is essential to enable the animated page transitions, but one downside of this approach is that the page title is always that of the first page, not the subsequent page you’re viewing.</p>
  29                 <p>To remedy this, jQuery Mobile automatically parses the <code>title</code> of the page pulled via Ajax and changes the <code>title</code> attribute of the parent document to match.</p>
  30
  31                 <h2>Titles in multi-page templates</h2>
  32
  33                 <p>On multi-page documents, we follow a similiar convention, but since all the pages share a common <code>title</code>, we have a <code>data-title</code> attribute that can be added to each page container within a multi-page template to manually define a title. The title of the HTML document will be automatically updated to match the <code>data-title</code> of the page currently in view.</p>
  34
  35 <pre><code>
  36 &lt;div data-role=&quot;page&quot; id=&quot;foo&quot; <strong>data-title=&quot;Page Foo&quot;</strong>&gt;
  37
  38 &lt;/div&gt;&lt;!-- /page --&gt;
  39 </code></pre>
  40
  41
  42                                 </div><!--/content-primary -->
  43
  44                                 <div class="content-secondary">
  45
  46                                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
  47
  48                                                         <h3>More in this section</h3>
  49
  50                                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
  51
  52                                                                 <li data-role="list-divider">Pages &amp; Dialogs</li>
  53                                                                 <li><a href="page-anatomy.html">Anatomy of a page</a></li>
  54                                                                 <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
  55                                                                 <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
  56                                                                 <li data-theme="a"><a href="page-titles.html">Page titles</a></li>
  57                                                                 <li><a href="page-links.html">Linking pages</a></li>
  58                                                                 <li><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
  59                                                                 <li><a href="page-dialogs.html">Dialogs</a></li>
  60                                                                 <li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
  61                                                                 <li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
  62                                                                 <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
  63                                                                 <li><a href="page-scripting.html">Scripting pages</a></li>
  64                                                                 <li><a href="phonegap.html">PhoneGap apps</a></li>
  65                                                                 <li><a href="touchoverflow.html">touchOverflow feature</a></li>
  66                                                                 <li><a href="pages-themes.html">Theming pages</a></li>
  67                                                         </ul>
  68                                         </div>
  69                                 </div>
  70
  71                         </div><!-- /content -->
  72
  73                         <div data-role="footer" class="footer-docs" data-theme="c">
  74                                         <p>&copy; 2011 The jQuery Project</p>
  75                         </div>
  76
  77                         </div><!-- /page -->
  78
  79                         </body>
  80                         </html>