Question

I am having problems with adding a page to a listview sublist (li)..

I’m doing something like this:

<ul data-role="listview">
      <li><a href="#">Click me</a>
            <ul>
               <li data-role="page">
                     <div data-role="header" data-position="fixed">
              <h1>Page Title</h1>
           </div>

           <div data-role="content">
              <p>Page content goes here.</p> 
           </div>

           <div data-role="footer" data-position="fixed">
               <h4>Page Footer</h4>
           </div>
         </li>
        </ul>
       </li>
         </ul>  

Is there a better way to do this as I have a few problems with it…

• • The fixed header and footer does’nt work on IOS 6 (iphone 3GS)
• • Padding and Margins need setting to 0.

Is this the best way to do this?

Normally a list will contain a sub list with links but I want to sublist to contain the page detail (information page).

Update: Trying this but the link does not link to the page gererated:

$.each(data.id, function(index, value){

output += <li>\
<a href="#mypage">\
<h3 class="h3_title">link title</h3>\
</a>\
</li>\
<div id="mypage" data-role="page">\
<div data-role="header" data-position="fixed">\
<h1>Page Title sub</h1>\
</div>\
<div data-role="content">\
one<br/>\
</div>\
<div data-role="footer" data-position="fixed">\
<h4>Page Footer</h4>\
</div>\
</div>';

...

Answer 1

You could just add the page as a separate div outside the ul tag and make the li a link to it. For example:

<div id="your-current-page" data-role="page">
  <ul data-role="listview">
  .
  .
  .
    <li><a href="#your-second-page">Click me</a>
  .
  .
  .
  </ul>
</div>
<div id="your-second-page" data-role="page">
  You can put here whatever you'd like
</div>