Home > JQuery Mobile > JQuery Mobile – use single page architecture with multiple html files

JQuery Mobile – use single page architecture with multiple html files

December 13, 2011 Leave a comment Go to comments

I am basically a .net developer with expertise in html, css, jquery, javascript etc. For one of my new project (a big project) I am working with jQuery Mobile now and also getting some knowledge of it day by day.
You can see the details about JQuery Mobile in http://jquerymobile.com
In JQuery Mobile we can specify multiple pages in a single html file with an attribute data-role=”page”.
For example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test </title>
</head>

<body>
<div data-role="page" id="page1 " align="center">
</div>

<div data-role="page" id="page2 " align="center">
</div>

<div data-role="page" id="page3 " align="center">
</div>
</body
</html>

We can also keep the pages in separate files.
The single page architecture is better in consideration of performance. But the problem is the manageability.[Note: If the page size is too big it can also make some performance problem]

So, The concept I am going to describe here is
– Keep the pages in a single html file at reasonable size and which pages will not be used from other html file pages.
– Keep the other pages in separate file as you can manage.
– Load the required pages dynamically in the current html page.

Suppose you have three files

File1.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test </title>
</head>

<body>
<div data-role="page" id="page1 " align="center">
</div>

<div data-role="page" id="page2 " align="center">
</div>

<div data-role="page" id="page3 " align="center">
</div>
</body
</html>

File2.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test </title>
</head>

<body>
<div data-role="page" id="page4 " align="center">
</div>

<div data-role="page" id="page5 " align="center">
</div>

<div data-role="page" id="page6 " align="center">
</div>
</body
</html>

Common.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test </title>
</head>

<body>
<div data-role="page" id="page7 " align="center">
</div>

<div data-role="page" id="page8 " align="center">
</div>

<div data-role="page" id="page9 " align="center">
</div>
</body
</html>

Here we need common.html from both File1.html and File2.html and we want to use single page architecture.

So, we will load the pages from common.html to File1.html dynamically when we need from File1.html and same for File2.html.

Here is the code which will load the pages for you.

function loadPages(pagePathList, index) {
    if (index == undefined) {
        index = 0;
    }
 
    $.get(pagePathList[index], {}, function (data) {
        var startIndex = data.indexOf("<div data-role");
        var endIndex = data.indexOf("</body>");
        data = data.substring(startIndex, endIndex);
        $('[data-role="page"]').filter(":last").after(data);
 
        index++;
 
        if (index < pagePathList.length) {
            loadPagesToCurrentpage(pagePathList, index);
        }
    });
}


  $('#page1’).live('pagecreate', function (event, ui)
   {
var pagePathList = new Array();
pagePathList.push("common.html");	
loadPages(pagePathList);    
   }

Here I am loading the pages from common on page1 ‘pagecreate’ event. You can do it with the event as you need.

After the load the File1.html will look like (dynamically)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test </title>
</head>

<body>
<div data-role="page" id="page1 " align="center">
</div>

<div data-role="page" id="page2 " align="center">
</div>

<div data-role="page" id="page3 " align="center">
</div>
<div data-role="page" id="page7 " align="center">
</div>

<div data-role="page" id="page8 " align="center">
</div>

<div data-role="page" id="page9 " align="center">
</div>
</body
</html>

So we can show page9 from page1 as single page architecture Like

<div data-role="page" id="page1 " align="center">
	<a href="page9">show page 9</a>
</div>

Any suggestion will be appreciated.

Categories: JQuery Mobile
  1. Winston
    February 5, 2014 at 12:58 am
    Reply

    Where is the loadPagesToCurrentpage method?
    Have you tried this? As far as I see, your “. I just wondering have you really archived this or it’s just pseudo code?
    Can you provide a download for the full exmaple code?
    Thank you.

  1. No trackbacks yet.

Leave a comment