jQuery Mobile single-page vs multi-page template
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 smaller
Optional to use the "page" data-role element in the code
Can turn off Ajax Navigation between pages using data-ajax="false"
Recommend to use the tag for page titles
The <title> tag always gets precedence during page loads
Consumes more bandwidth as each page navigation generates a new request
Navigating back to a previously loaded page will again generate a fresh request (with DOM caching you can avoid reloading of the same pages multiple times)
First load is faster, but every subsequent page has to be fetched
Suitable for larger applications and situations where you want to target as many platforms as possible including platforms which lack JavaScript support
</pre>
<pre>
Multi Page Template:
Launch - example from previous post, notice the address shown as you navigate
Heavier. All the pages are in a single html file.
Needs JavaScript support as Ajax Navigation is used
Multiple page containers are present, and only the first one is shown when page loads
Large applications with many pages will increase the DOM size
The "page" data-role element is required
Using data-ajax="false" for internal pages ignores the data-transition attribute, by default slide is used
Recommend to use the data-title attribute for all page titles
On first load, <title> tag is used and subsequent transitions data-title is used for page titles
Since all pages are already loaded, no additional requests are generated for navigating between pages
First load is slower as the file size is larger, but subsequent page navigation is fast
Suitable for relatively smaller applications and situations where you know the capabilities of your target platforms including presence of JavaScript support
</pre>
<br /></div>
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
</span>
<span class='post-timestamp'>
</span>
<span class='post-comment-link'>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-1551585019'>
<a href='https://www.blogger.com/page-edit.g?blogID=6982422998053494759&pageID=537813732576972495&from=pencil' title='Edit Page'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<div class='post-share-buttons goog-inline-block'>
<a class='goog-inline-block share-button sb-email' href='https://www.blogger.com/share-post.g?blogID=6982422998053494759&pageID=537813732576972495&target=email' target='_blank' title='Email This'><span class='share-button-link-text'>Email This</span></a><a class='goog-inline-block share-button sb-blog' href='https://www.blogger.com/share-post.g?blogID=6982422998053494759&pageID=537813732576972495&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='BlogThis!'><span class='share-button-link-text'>BlogThis!</span></a><a class='goog-inline-block share-button sb-twitter' href='https://www.blogger.com/share-post.g?blogID=6982422998053494759&pageID=537813732576972495&target=twitter' target='_blank' title='Share to X'><span class='share-button-link-text'>Share to X</span></a><a class='goog-inline-block share-button sb-facebook' href='https://www.blogger.com/share-post.g?blogID=6982422998053494759&pageID=537813732576972495&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Share to Facebook'><span class='share-button-link-text'>Share to Facebook</span></a><a class='goog-inline-block share-button sb-pinterest' href='https://www.blogger.com/share-post.g?blogID=6982422998053494759&pageID=537813732576972495&target=pinterest' target='_blank' title='Share to Pinterest'><span class='share-button-link-text'>Share to Pinterest</span></a>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
</span>
</div>
</div>
</div>
<div class='comments' id='comments'>
<a name='comments'></a>
<h4>No comments:</h4>
<div id='Blog1_comments-block-wrapper'>
<dl class='avatar-comment-indent' id='comments-block'>
</dl>
</div>
<p class='comment-footer'>
<div class='comment-form'>
<a name='comment-form'></a>
<h4 id='comment-post-message'>Post a Comment</h4>
<p>
</p>
<a href='https://www.blogger.com/comment/frame/6982422998053494759?pa=537813732576972495&hl=en&saa=85391&origin=https://shyam-shyre.blogspot.com' id='comment-editor-src'></a>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' width='100%'></iframe>
<script src='https://www.blogger.com/static/v1/jsbin/3790099508-comment_from_post_iframe.js' type='text/javascript'></script>
<script type='text/javascript'>
BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
</script>
</div>
</p>
</div>
</div>
</div></div>
</div>
<div class='blog-pager' id='blog-pager'>
<a class='home-link' href='https://shyam-shyre.blogspot.com/'>Home</a>
</div>
<div class='clear'></div>
<div class='blog-feeds'>
<div class='feed-links'>
Subscribe to:
<a class='feed-link' href='https://shyam-shyre.blogspot.com/feeds/posts/default' target='_blank' type='application/atom+xml'>Posts (Atom)</a>
</div>
</div>
</div></div>
</div>
</div>
<div class='column-left-outer'>
<div class='column-left-inner'>
<aside>
</aside>
</div>
</div>
<div class='column-right-outer'>
<div class='column-right-inner'>
<aside>
<div class='sidebar section' id='sidebar-right-1'><div class='widget BlogArchive' data-version='1' id='BlogArchive1'>
<h2>Blog Archive</h2>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<ul class='flat'>
<li class='archivedate'>
<a href='https://shyam-shyre.blogspot.com/2012/09/'>September</a> (3)
</li>
</ul>
</div>
</div>
<div class='clear'></div>
</div>
</div><div class='widget AdSense' data-version='1' id='AdSense2'>
<div class='widget-content'>
<script type="text/javascript"><!--
google_ad_client="pub-7173308427919915";
google_ad_host="pub-1556223355139109";
google_ad_width=300;
google_ad_height=250;
google_ad_format="300x250_as";
google_ad_type="text_image";
google_ad_host_channel="0001+S0009+L0001";
google_color_border="000000";
google_color_bg="000000";
google_color_link="888888";
google_color_url="666666";
google_color_text="FFFFFF";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div class='clear'></div>
</div>
</div><div class='widget Profile' data-version='1' id='Profile1'>
<h2>About Me</h2>
<div class='widget-content'>
<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' href='https://www.blogger.com/profile/01790615471060053980' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'>
MySite
</a>
</dt>
</dl>
<a class='profile-link' href='https://www.blogger.com/profile/01790615471060053980' rel='author'>View my complete profile</a>
<div class='clear'></div>
</div>
</div><div class='widget AdSense' data-version='1' id='AdSense1'>
<div class='widget-content'>
<script type="text/javascript"><!--
google_ad_client="pub-7173308427919915";
google_ad_host="pub-1556223355139109";
google_ad_width=300;
google_ad_height=250;
google_ad_format="300x250_as";
google_ad_type="text_image";
google_ad_host_channel="0001+S0009+L0001";
google_color_border="000000";
google_color_bg="000000";
google_color_link="888888";
google_color_url="666666";
google_color_text="FFFFFF";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div class='clear'></div>
</div>
</div></div>
</aside>
</div>
</div>
</div>
<div style='clear: both'></div>
<!-- columns -->
</div>
<!-- main -->
</div>
</div>
<div class='main-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
<footer>
<div class='footer-outer'>
<div class='footer-cap-top cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left footer-fauxborder-left'>
<div class='fauxborder-right footer-fauxborder-right'></div>
<div class='region-inner footer-inner'>
<div class='foot section' id='footer-1'><div class='widget Stats' data-version='1' id='Stats1'>
<h2>Total Pageviews</h2>
<div class='widget-content'>
<div id='Stats1_content' style='display: none;'>
<span class='counter-wrapper graph-counter-wrapper' id='Stats1_totalCount'>
</span>
<div class='clear'></div>
</div>
</div>
</div><div class='widget AdSense' data-version='1' id='AdSense4'>
<div class='widget-content'>
<script type="text/javascript"><!--
google_ad_client="pub-7173308427919915";
google_ad_host="pub-1556223355139109";
google_ad_width=728;
google_ad_height=90;
google_ad_format="728x90_as";
google_ad_type="text_image";
google_ad_host_channel="0001+S0013+L0003";
google_color_border="000000";
google_color_bg="000000";
google_color_link="888888";
google_color_url="666666";
google_color_text="FFFFFF";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div class='clear'></div>
</div>
</div></div>
<table border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'>
<tbody>
<tr>
<td class='first columns-cell'>
<div class='foot no-items section' id='footer-2-1'></div>
</td>
<td class='columns-cell'>
<div class='foot no-items section' id='footer-2-2'></div>
</td>
</tr>
</tbody>
</table>
<!-- outside of the include in order to lock Attribution widget -->
<div class='foot section' id='footer-3' name='Footer'><div class='widget Attribution' data-version='1' id='Attribution1'>
<div class='widget-content' style='text-align: center;'>
Awesome Inc. theme. Powered by <a href='https://www.blogger.com' target='_blank'>Blogger</a>.
</div>
<div class='clear'></div>
</div></div>
</div>
</div>
<div class='footer-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</footer>
<!-- content -->
</div>
</div>
<div class='content-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</div>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/3044065359-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'ACvIOeCEaOct-wDtJZyp4Y72j9U-:1788057089241';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6982422998053494759','//shyam-shyre.blogspot.com/p/jquery-mobile.html','6982422998053494759');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '6982422998053494759', 'title': 'ShyamBlog', 'url': 'https://shyam-shyre.blogspot.com/p/jquery-mobile.html', 'canonicalUrl': 'http://shyam-shyre.blogspot.com/p/jquery-mobile.html', 'homepageUrl': 'https://shyam-shyre.blogspot.com/', 'searchUrl': 'https://shyam-shyre.blogspot.com/search', 'canonicalHomepageUrl': 'http://shyam-shyre.blogspot.com/', 'blogspotFaviconUrl': 'https://shyam-shyre.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ShyamBlog - Atom\x22 href\x3d\x22https://shyam-shyre.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22ShyamBlog - RSS\x22 href\x3d\x22https://shyam-shyre.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ShyamBlog - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/6982422998053494759/posts/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-7173308427919915', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/60c74d2208a5674d', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'static_page', 'pageId': '537813732576972495', 'pageName': 'Jquery Mobile', 'pageTitle': 'ShyamBlog: Jquery Mobile'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'Awesome Inc.', 'localizedName': 'Awesome Inc.', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': false, 'variant': 'dark', 'variantId': 'dark'}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Jquery Mobile', 'description': ' jQuery Mobile single-page vs multi-page template Single Page Template: Launch - example from previous post, notice the address shown a...', 'url': 'https://shyam-shyre.blogspot.com/p/jquery-mobile.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': true, 'isPost': false, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'pageId': 537813732576972495}}]);
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense3', 'crosscol', document.getElementById('AdSense3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList1', 'crosscol-overflow', document.getElementById('PageList1'), {'title': 'Pages', 'links': [{'isCurrentPage': false, 'href': 'https://shyam-shyre.blogspot.com/', 'title': 'Home'}, {'isCurrentPage': false, 'href': 'https://shyam-shyre.blogspot.com/p/java.html', 'id': '421556374809946033', 'title': 'Java'}, {'isCurrentPage': false, 'href': 'https://shyam-shyre.blogspot.com/p/flex.html', 'id': '3171304197769116001', 'title': 'Flex'}, {'isCurrentPage': false, 'href': 'https://shyam-shyre.blogspot.com/p/hibernate.html', 'id': '8110304994582503204', 'title': 'Hibernate'}, {'isCurrentPage': false, 'href': 'https://shyam-shyre.blogspot.com/p/html5.html', 'id': '4159705831701584804', 'title': 'HTML5'}, {'isCurrentPage': false, 'href': 'https://shyam-shyre.blogspot.com/p/webservices.html', 'id': '2441236970376691064', 'title': 'WebServices'}, {'isCurrentPage': false, 'href': 'https://shyam-shyre.blogspot.com/p/mobile.html', 'id': '7785422800315542965', 'title': 'Mobile'}, {'isCurrentPage': true, 'href': 'https://shyam-shyre.blogspot.com/p/jquery-mobile.html', 'id': '537813732576972495', 'title': 'Jquery Mobile'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': true}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2937099709-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar-right-1', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense2', 'sidebar-right-1', document.getElementById('AdSense2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'sidebar-right-1', document.getElementById('Profile1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense1', 'sidebar-right-1', document.getElementById('AdSense1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_StatsView', new _WidgetInfo('Stats1', 'footer-1', document.getElementById('Stats1'), {'title': 'Total Pageviews', 'showGraphicalCounter': true, 'showAnimatedCounter': true, 'showSparkline': false, 'statsUrl': '//shyam-shyre.blogspot.com/b/stats?style\x3dBLACK_TRANSPARENT\x26timeRange\x3dALL_TIME\x26token\x3dAEHf7-ffh7P5XVgS0EZEk_AUdNoLIetz21VAiVtny8a2Wvz3Mzh8tGy4NS74Z4dyb9_y0wSeK1Fndi1gHdQDd04'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense4', 'footer-1', document.getElementById('AdSense4'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AttributionView', new _WidgetInfo('Attribution1', 'footer-3', document.getElementById('Attribution1'), {}, 'displayModeFull'));
</script>
</body>
</html>