Skip to main content

Posts

Showing posts with the label data-title

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…

jQuery Mobile data-title behavior with multi-page template

The jQuery Mobile library comes with wonderful Ajax page transition capabilities. But you have to keep a look on the Page title as you navigate between the various pages and I have tried to document the behavior under different scenarios in this blog.

Consider the below code, click the below link to launch the code in a separate window.
Launch

<!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="page 1 data-title">
  …