0

我想构建一个单页应用程序的 JQM 应用程序。我需要将菜单放在单独的文件中，并且每个“页面”也将在单独的文件中，并且所有包含和模板都将在 index.html 中。我该怎么做？

谢谢

4

1 回答 1

0

在 JQM 内容中仅可见data-role='page'，您只需按id属性管理每个页面。并且您需要管理菜单，页眉，页脚..等所有常用文件保存在单独的文件中，您可以使用load()功能加载后。在`$(this).trigger('create');'里面 用于应用 JQM 默认样式和属性。如果您对此结构有任何问题，请随时问我。

<!DOCTYPE html> 
<html>
 <head>
  <title>your app title</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/> 
    <script type="text/javascript" src="cordova-2.3.0.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.3.1.js"></script>
    <script type="text/javascript">
    $(document).on('pagecreate', function (event) {     
        $("[id*=header]").load('header.html', function () {
            $(this).trigger('create');
        });
    });
    </script>
 </head>
 <body>
    <div data-role="page" id="pageOne">
        <div data-role="header" id="header"></div>
        <div data-role="content">
            Page one content
        </div><!-- /content -->
    </div><!-- /page -->

    <div data-role="page" id="pageTwo">
        <div data-role="header" id="header"></div>
        <div data-role="content">
            Page two content
        </div><!-- /content -->
    </div><!-- /page -->

    <div data-role="page" id="pageThre">
        <div data-role="header" id="header"></div>
        <div data-role="content">
            Page three content
        </div><!-- /content -->
    </div><!-- /page -->
 </body>
</html>
于 2013-11-09T07:34:43.087 回答