Skip to main content

Posts

Showing posts with the label single-page template

jQuery Mobile single-page vs multi-page template

[Updated 2012/02/09]
In my recent posts I mentioned about jQuery Mobile single-page and multi-page templates, so what exactly are the differences between them?


Single Page Template:

Launch- example from previous post, notice the address shown as you navigate
Lighter and cleaner. Each page is a separate html file and more modular. Better fallback if JavaScript is not supported. So works well on more platforms, you could even target grade C browsers On first load, the start page is loaded into the DOM. An internal reference is always held to this. Any new page loaded is added to the DOM. Any previously shown page is removed from the DOM. The start page is always in the DOM.The DOM size is relatively smallerOptional to use the "page" data-role element in the codeCan turn off Ajax Navigation between pages using data-ajax="false"Recommend to use the <title> tag for page titlesThe <title> tag always gets precedence during page loadsConsumes more bandwidth as each…

jQuery Mobile Recommendations for Page Title

In my previous two posts, I outlined how page titles are picked up in jQuery Mobile in a single-page and in a multi-page template scenario.


Read them here: 
jQuery Mobile data-title behavior with multi-page template
jQuery Mobile data-title behavior in single-page template


Though its a very trivial thing, it is important that the right titles are shown on your pages as you navigate through your mobile HTML5 app.


So we see that there are 3 options available to set the page title, 

The <title> tagThe data-title attribute of the page containerThe header text in the header container
Now the question is which one to use? 
And here are my recommendations,

For the landing page for any app, use the <title> tag, that always is the primary one to use. The document.title gets populated first and use the same.For multi-page template, use data-title for every page container, including the first container in the document. After first load, every subsequent Ajax transition uses this attribute.For…

jQuery Mobile data-title behavior in single-page template

In my previous post, I had visited the behavior of the jQuery Mobile library data-title attribute under different scenarios when using a multi-page template. In this post, I will outline the behavior when using a single-page template.
Consider the below single-page template code. Click here to launch the below code in a separate browser. Launch

mainpage-title.html



<!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />      <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>     <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>   </head>   <body>     <div id="page1" data-role="page" data-title="Mainpage…