1

我有一个带有不同页面的 Jquery Mobile 多页 

      <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>

我想把代码放在

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

在单独的 JSP 文件中，因为我可能有更多页面。将所有内容都放在一个主 JSP 文件中使其难以管理和阅读。例如，我的 mainPage div 的单独内容看起来像

        <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>

我基本上有一个主页，该主页有一个指向第 2 页的链接，而 Page2 有一个指向第 3 页的页面，而第 3 页有一个指向 MainPage 的链接。

我用谷歌搜索，但我发现的唯一东西是链接到外部 HTML 文件。

有人知道如何将主文件分成单独的文件吗？

谢谢

更新：使用我现在拥有的完整代码

4

2 回答 2

0

使用 jquery 模板系统 :) 在 javascript 事件之前的页面上，您可以包含 html 文件。

$(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");
    });
}

你必须下载jquery.tmpl.min.js这将工作。

于 2013-07-23T14:02:07.647 回答
0

没什么要知道的，创建普通的 jquery-mobile 页面，每个页面只有 1 个 div，data-role='page'然后正常使用它们。

到这些页面的正常链接将使用 jquery-mobile ajax 导航模型来加载页面，并将 data-role='page' div 显示为主要内容。

于 2013-07-23T14:03:21.830 回答