jquery mobile multipage in separate html files

I have a Jquery Mobile multipage with different pages

      <title>TEST</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">


      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>  
      <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>


      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>


      <script type="text/javascript" src="lib/jquery.tmpl.min.js"></script>

      <script>


          $(document).ready(function(){
                $(document).on("pagebeforeshow", "#mainPage", function(e, data) {
                    showPageDossiers(filename, selector);
                });
            //do some initialization stufff
          )};


            function showPageDossiers(filename, selector) {
                // incldue template
                $.get(filename, function(template) {
                    $(selector).html(template);
                    $(selector).trigger("create");
                });
            }
        </script>
    </head>
    <body>

      <div id="mainPage" data-role="page" data-title="Main">

                   <!--    in comment, this code in external HTML file 
                    <div data-role="header"><h2>Main Page</h2></div>            
                    <div class="ui-content" data-role="content"  role="main">

                        <div id="divListeDossiers">
                            <ul id="listeDossiers" data-role="listview" data-inset="true">
                                <li><a href="#page2">GOTO Page2 </a> </li>              
                            </ul>
                         </div>
                    </div> 
                    <div data-role="footer"><h4>Footer</h4></div>
                  -->
      </div>

      <div id="page2" data-role="page" data-title="page2">
                <div data-role="header"><h2>Page 2</h2></div>           
                <div class="ui-content" data-role="content"  role="main">

                    <div id="divList">
                        <ul id="listeDossiers" data-role="listview" data-inset="true">
                            <li><a href="#page3">GOTO page3</a> </li>               
                        </ul>
                     </div>
                </div> 
                <div data-role="footer"><h4>Footer</h4></div>
      </div>

      <div id="page3" data-role="page" data-title="page23">
                <div data-role="header"><h2>Page 3</h2></div>           
                <div class="ui-content" data-role="content"  role="main">

                    <div id="divList">
                        <ul id="listeDossiers" data-role="listview" data-inset="true">
                            <li><a href="#mainPage">GOTO mainPage</a> </li>             
                        </ul>
                     </div>
                </div> 
                <div data-role="footer"><h4>Footer</h4></div>
      </div>  
    </body>
    </html>

I would like to put the code between the

<div id="pageXX"> .... </div>

in separate JSP files since I may have more pages. Having all in one main JSP file make it hard to manage and read. For example, my separate content for the mainPage div, will look like

        <div data-role="header"><h2>Main Page</h2></div>            
        <div class="ui-content" data-role="content"  role="main">

            <div id="divListeDossiers">
                <ul id="listeDossiers" data-role="listview" data-inset="true">
                    <li><a href="#page2">GOTO Page 2</a> </li>              
                </ul>



             </div>
        </div> 
        <div data-role="footer"><h4>Footer</h4></div>

I basically had a Main Page that had a link to page 2 and Page2 had a page to Page 3 and Page3 had a link to MainPage.

I googled but the only things I found is linking to external HTML file.

Anyone known how to break the main file into separate files ?

Thanks

UPDATE : with a complete code that I had now

回答1:

Use the jquery template system :) On the page before event in javascript you can include the html file.

$(document).on("pagebeforeshow", "site_id", function(e, data) {
    showPasswordReset();
});

function showPasswordReset() {
    // incldue template
    $.get("templates/reset_password.html", function(template) {
        $("site_id div[data-role='content']").html(template);
        $("site_id div[data-role='content']").trigger("create");
    });
}

you have to download the jquery.tmpl.min.js that this will work.

回答2:

There's nothing much to know, create normal jquery-mobile pages each one with only 1 div with data-role='page' and then use them normally.

A normal link to those pages would use the jquery-mobile ajax navigation model to load the page, and display the data-role='page' div as main content.