Creating Pages

Can we create pages on the fly? We know that a page is just a div element with a proper data-role, so our first thought is that we can make it work. Let’s try and see what it happens. We are going to create a basic page that will create four pages on the fly using JavaScript:

<div data-role="page">
        <div data-role="header">
    <h1>Dynamic page</h1>
    </div>
        <div data-role="content">
        <a id="button1" href="javascript:addPages()" data-role="button">Add Pages</a>
        <ul id="list1">

        </ul>
    </div>
</div>

Then in a script we define the function to create dynamic pages and add buttons to transition to them:

function addPages() {
  for (var i=1; i<5; i++) {
      var page = $("<div>").jqmData("role", "page").attr("id", "page" + i);
      // header
      $("<div>").attr("data-role", "header").append($("<h1>")
          .html("Page " + i)).appendTo(page);
      // content
      $("<div>").attr("data-role", "content").append($("<p>")
          .html("Contents for page " + i))
          .appendTo(page);

      $("body").append(page);

           $("<li>").append($("<a>").attr("href", "#page"+i).html("Go to page " + i))
           .appendTo("#list1");
  }
      $("#button1").hide();
};